js 增强型title信息提示效果

更新时间：2010年06月02日 13:47:55 作者：

js操作div仿title提示信息效果,增强型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> <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 – 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需再刷新一下页面才能执行]

您可能感兴趣的文章:

实例详解JSON数据格式及json格式数据域字符串相互转换
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式，这些特性使JSON成为理想的数据交换语言
2016-01-01
使用taro开发微信小程序遇到的坑总结
Taro，京东凹凸实验室出品的适配多端的一个框架，这篇文章主要介绍了使用taro开发微信小程序遇到的坑总结,需要的朋友可以参考下
2019-04-04
微信小程序中限制激励式视频广告位显示次数(实现思路)
本文给大家分享微信小程序中限制激励式视频广告位显示次数，本文通过实例代码来说明，感兴趣的朋友跟随小编一起看看吧
2019-12-12
一文读懂TS 中联合类型和交叉类型各自的含义
联合类型在 TypeScript 中相当流行，你可能已经用过很多次了。交叉类型稍微不那么常见，它们似乎引起更多的困惑，这篇文章主要介绍了一文读懂TS 中联合类型和交叉类型的含义,需要的朋友可以参考下
2022-12-12
Javascript 作用域使用说明
在传统的面向对象程序设计中，主要关注于公用和私有作用域。公用作用域中的对象属性可以从对象外部访问，即开发者创建对象的实例后，就可使用它的公用属性。
2009-08-08
webpack-dev-server远程访问配置方法
下面小编就为大家分享一篇webpack-dev-server远程访问配置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
angular-tree-component的使用详解
这篇文章主要介绍了angular-tree-component的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
理解JavaScript表单的基础知识
这篇文章主要带领大家理解JavaScript表单的基础知识，对javascript表单脚本进行深入学习，感兴趣的小伙伴们可以参考一下
2016-01-01
原生js实现商品筛选功能
这篇文章主要为大家详细介绍了原生js实现商品筛选，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
原生js实现fadein 和 fadeout淡入淡出效果
这篇文章主要介绍了通过原生js实现fadein 和 fadeout淡入淡出效果,需要的朋友可以参考下
2014-06-06