carefree Posted August 16, 2007 Share Posted August 16, 2007 I have a hover text script but if i scroll to the bottom of the page and hover over a image the tool tip displays at the top of the page. Is there a way to get the tooltip to display right next to the cursor?? <style type="text/css"> <!-- #toolTipBox { display: none; padding: 5; font-size: 20px; border: #800000 solid 4px; font-family: verdana; position: absolute; background: #ffd038; colour: #008000; } --> </style> <script type="text/javascript"> <!-- var theObj=""; function toolTip(text,me) { theObj=me; theObj.onmousemove=updatePos; document.getElementById('toolTipBox').innerHTML=text; document.getElementById('toolTipBox').style.display="block"; window.onscroll=updatePos } function updatePos() { var ev=arguments[0]?arguments[0]:event; var x=ev.clientX; var y=ev.clientY; diffX=24; diffY=0; document.getElementById('toolTipBox').style.top = y-2+diffY+document.body.scrollTop+ "px"; document.getElementById('toolTipBox').style.left = x-2+diffX+document.body.scrollLeft+ "px"; theObj.onmouseout=hideMe; } function hideMe() { document.getElementById('toolTipBox').style.display="none"; } --> </script> </head> <body> <div align="center"> <span id ="toolTipBox" width="200"></span> <img src="YOUR IMAGE HERE.jpg" border="0" onmouseover="toolTip(' PLACE TOOL TIP HERE', this)"></div> </body> </html> Quote Link to comment Share on other sites More sharing options...
gurroa Posted August 16, 2007 Share Posted August 16, 2007 Add first call to updatePos() at the end of toolTip() function. function toolTip(text,me) { theObj=me; theObj.onmousemove=updatePos; document.getElementById('toolTipBox').innerHTML=text; document.getElementById('toolTipBox').style.display="block"; window.onscroll=updatePos updatePos(); } I've try it in IE and Mozilla and everythink seem to be ok. Quote Link to comment Share on other sites More sharing options...
carefree Posted August 16, 2007 Author Share Posted August 16, 2007 Thanks - it does make a difference on normal html pages. But i forgot to tell you im using {variables} for pictures. Looks like this: <td><a href="{$gallery.gallery_url|htmlspecialchars}" target="_blank"> <img src="{$gallery.preview_url|htmlspecialchars}" border="1" alt="{$gallery.description|htmlspecialchars}"></a><p> {date value='today' format='F d'} <span id ="toolTipBox" width="200" style="position: absolute; left: 488px; top: 34px; width: 160px"></span><img src="assorted_002.gif" border="0" width="10" height="13" onmouseover="toolTip('{$gallery.description|htmlspecialchars}', this)" ></div></td> So the tooltip might think its displaying within the original parameters. Might try a tooltip {variable} Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.