js 增强型title信息提示效果

时间：2020-12-04 04:18:33|栏目：JavaScript代码|点击：次

效果图:

演示代码:

<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> <div id="test" onmouseover="xstooltip_show('tooltip_123', 'test', 0, 20);" onmouseout="xstooltip_hide('tooltip_123');">显示注释</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 ?C 1.7.11<br> Operating system: Linux - i686 (x86_64) </div> </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需再刷新一下页面才能执行]

上一篇：BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题

栏目：JavaScript代码

下一篇：javascript 语法学习练习

本文标题：js 增强型title信息提示效果

本文地址：http://www.codeinn.net/misctech/29365.html

更多JavaScript代码

JavaScript代码

js 增强型title信息提示效果

阅读排行

推荐教程