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> Quote Link to comment 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 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.