知识大全 如何定制页面提示信息（tooltips）

Posted 2022-07-14 知

篇首语：苟利国家生死以，岂因祸福避趋之。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 如何定制页面提示信息（tooltips）相关的知识，希望对你有一定的参考价值。

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

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

　　 ）绘制信息层

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

　　function createDivTooltip（）

　　var divTips = document createElement（ div ） //create div element

　　divTips id= tooltip

　　divTips style display= none //invisible

　　document body appendChild（divTips）

　　 ）定位信息层

　　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 + px

　　divTips style left=mousePos left + px

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

　　 ）附加事件

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

　　function prepare（id）

　　if（id==null） links=document getElementsByTagName（ a ）

　　else links=document getElementById（id） getElementsByTagName（ a ）

　　for（i= 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）

相关参考