PDA

View Full Version : 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/dynamicindex5/dhtmltooltip.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.



<!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>