dhtml tool tip position should be bottom side to the icon always?

**csmadhav** · 04-04-2007, 09:48 AM

1) Script Title:
Position always should be downside,,
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tmltooltip.htm

3) Describe problem:My requirement is ..as follows. i have one help icon is there . for that one text has to display on mouse over..

By using above cool tip.. everything is fine,,
But for IE7 i am facing the problem.. that some text is not displaying it is going under header.. so i would like to show the tool tip text always downside of the icon so that i can see all text..

see the below figures for more information..my desired goal as in image 2..

Could any one come up with code... ?

ThanksInAdvance..

Madhav

**codeexploiter** · 04-04-2007, 11:01 AM

The following is a tooltip code which is based YUI developer library.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.0/build/fonts/fonts-min.css"> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.0/build/reset/reset-min.css">


<script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/event/event-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/dom/dom-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/container/container-min.js"></script>
<style type="text/css">
.yui-tt {
	visibility:hidden;
	position:absolute;
	color:#333; /*font color of the tooltip*/
	background-color:#FDFFB4; /*background color of the tooltip*/
	font-family:arial,helvetica,verdana,sans-serif;
	padding:2px 5px 2px 2px;
	border:1px solid #FCC90D; /*border width, style and color of the tooltip*/
	font:100&#37; sans-serif;
	width:auto;	/*You can change it to whatever the width you want. Can add the height also if that is a necessity*/
}
</style>
</head>

<body>
<br>
<p>
<a href="http://www.google.com" id="first">Google</a>
<a href="http://www.yahoo.com" id="second">Yahoo!</a>
</p>
<script type="text/javascript">
	var obj1 = new YAHOO.widget.Tooltip("obj1",{context:"first",text:"World's best search engine"});
	var obj2 = new YAHOO.widget.Tooltip("obj2",{context:"second",text:"Another useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful site"});	
</script>
</body>
</html>

Thread: dhtml tool tip position should be bottom side to the icon always?

Thread Tools

Search Thread

dhtml tool tip position should be bottom side to the icon always?

Bookmarks

Bookmarks

Posting Permissions