Effect Chart:
Demo Code:
<ptml> <pead> <style type= "Text/css" > Xstooltip {visibility:hidden; Position:absolute; top:0; left:0; Z-index:2; Font:normal 8pt Sans-serif; padding:3px; Border:solid 1px; } </style> </pead> <body> <div id= "test" onmouseover= xstooltip_show (' tooltip_123 ', ' test ', 0, 20 ); "onmouseout=" Xstooltip_hide (' tooltip_123 '); > Show Comments </div> <div id= "tooltip_123" class= "Xstooltip" > <b>jb51</b>www.jb51.net<br> Time spent:00:00:08<br> Page viewed:4<br> browser:mozilla–1.7.11<br> operating system:linux-i 686 (x86_64) </div> </body> </ptml> <script> function xstooltip_findposx (obj) {var curleft = 0; if (obj.offsetparent) {while (obj.offsetparent) {curleft + = Obj.offsetleft obj = obj.offsetparent; ' Else if (obj.x) curleft + = obj.x; return curleft; function Xstooltip_findposy (obj) {var curtop = 0; if (obj.offsetparent) {while (obj.offsetparent) {curtop + = Obj.offsettop obj = obj.offsetparent; ' Else if (obj.y) curtop + = OBJ.Y; return curtop; function Xstooltip_show (tooltipid, ParentID, Posx, posy) {it = document.getElementById (tooltipid); if ((it.style.top = = ' | | it.style.top = 0) && (it.style.left = = ' | | | it.style.left = = 0)) {//need to Fixa Te default size (msie problem) It.style.width = it.offsetwidth + ' px '; It.style.height = it.offsetheight + ' px '; img = document.getElementById (parentid); If tooltip is too wide, shift left to be within parent if (POSX + it.offsetwidth > Img.offsetwidth) posx = img.offs Etwidth-it.offsetwidth; if (Posx < 0) Posx = 0; x = Xstooltip_findposx (img) + posx; y = Xstooltip_findposy (img) + posy; It.style.top = y + ' px '; It.style.left = x + ' px '; } it.style.visibility = ' visible '; function Xstooltip_hide (id) {it = document.getElementById (ID); it.style.visibility = ' hidden '; } </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
