carefree Posted August 16, 2007 Share Posted August 16, 2007 Is there a way to make the hover text always appear next to the cursor even when scrolling down to the bottom of the page. It works ok at the top but when down the bottom the hover still displays at the top of the screen. <html> <head> <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 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/65332-hover-text/ Share on other sites More sharing options...
MadTechie Posted August 16, 2007 Share Posted August 16, 2007 Move to CSS/javascript section this is NOT a PHP question Link to comment https://forums.phpfreaks.com/topic/65332-hover-text/#findComment-326262 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.