一个页面上往往有很多链接、按钮，如果没有任何提示信息，会让人很迷茫。虽然ie也带提示功能，只要给title属性赋值，如下代码 <a href="#" title="this a test">自带的提示</a>这样的提示很单调，鼠标移上去的时候显示出来，当鼠标在上面移动的时候，提示信息不会跟随，对比下面自定义的提示信息，差别就很明显，所以自定义的提示信息是很有必要的。

　　把鼠标放到链接上看提示信息如何定制提示信息，说起来很简单，先画出提示信息层，然后定位到目标对象。下面把实现分三部来说明：

　　1）绘制信息层

　　有两种方式，一种是静态，把层的html代码写在文档中，另外一种是动态，运用javascript脚本动态的创建层。静态方式简单，不灵活，动态的灵活，但比较困难，需要熟悉脚本和dom结构，下面的代码是动态方式创建提示层

　　function createdivtooltip（）

　　{

　　var divtips = document.createelement（'div'）；//create div element

　　divtips.id='tooltip'；

　　divtips.style.display='none'//invisible

　　document.body.appendchild（divtips）；

　　}

　　2）定位信息层

　　function locate（e）

　　{ e=e||window.event；

　　var divtips = document.getelementbyid（'tooltip'）；

　　var mousepos=getmouseposition（e）；//get the coordinate of the mouse

　　divtips.style.top=mousepos.top-12+"px"；

　　divtips.style.left=mousepos.left-8+"px"；

　　}关于如何定位鼠标在文档中的位置请参考《获取鼠标的坐标》

　　3）附加事件

　　<a href="" title="this is a test for tooltip" onmouseover="showtooltip（event）；" onmousemove="locate（event）；" onmouseout="hidetooltip（event）；">click to do something</a>上面代码给一个链接添加了三个事件，onmouseover鼠标移到链接上的时候显示提示信息，onmousemove鼠标在链接上移动的时候提示信息跟随，onmouseout鼠标移开链接时隐藏提示信息，虽然上面的代码能够实现功能，但不是很好，因为需要为每个链接一一添加事件，而实际开发中一个页面就会有很多链接，这样就不方便，比较好的方法是下面代码这样实现[www.iocblog.net 来源]

　　function prepare（id）

　　{

　　if（id==null） links=document.getelementsbytagname（"a"）；

　　else links=document.getelementbyid（id）。getelementsbytagname（"a"）；

　　for（i=0；i<links.length；i++）{

　　attachevent（links[i]）；

　　}

　　}

　　function attachevent（link）

　　{

　　if（！link） return；

　　link.attachevent（"onmouseover"，showtooltip）；

　　link.attachevent（"onmousemove"，locate）；

　　link.attachevent（"onmouseout"，hidetooltip）；

　　}

　　完成上面的三部简单的自定义提示信息就完成啦，一些特别的提示信息是对创建的层做了特殊处理，如我们经常看到圆角提示信息，是在层上添加了背景图片。

Tag: tooltips

文章整理：iocblog
版权申明：本站文章均来自网络，如有侵权，请联系我们，我们收到后立即删除，谢谢！
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有。