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> Link to comment https://forums.phpfreaks.com/topic/65199-hover-tool-tip-acting-strange/ 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. Link to comment https://forums.phpfreaks.com/topic/65199-hover-tool-tip-acting-strange/#findComment-325601 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} Link to comment https://forums.phpfreaks.com/topic/65199-hover-tool-tip-acting-strange/#findComment-325647 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.