js 增强型title信息提示效果

效果图:

演示代码:

<html> <head> <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> </head> <body> 显示注释<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 - i686 （x86_64）</body> </html> <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 fixate 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.offsetWidth - 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 全选注:如需引入外部Js需刷新才能执行]