Mega Code Archive

 
Categories / JavaScript Tutorial / GUI Components
 

Tooltips based on div

< html> <head> <title>Style Example</title> <script type="text/javascript">     function showTip(oEvent) {         var oDiv = document.getElementById("toolTipComponent");         oDiv.style.visibility = "visible";         oDiv.style.left = oEvent.clientX + 5;         oDiv.style.top = oEvent.clientY + 5;     }     function hideTip(oEvent) {         var oDiv = document.getElementById("toolTipComponent");         oDiv.style.visibility = "hidden";     } </script> </head> <body> <P>Move your mouse over the hyper link.</p> <a href="http://www.rntsoft.com"    onmouseover="showTip(event)" onmouseout="hideTip(event)">www.rntsoft.com</a> <div id="toolTipComponent" style="background-color: green; position: absolute; visibility: hidden; padding: 5px"> <span style="font-weight: bold">Custom Tooltip</span><br/> detail information for www.rntsoft.com </div> </body> </html>