知识大全如何定制页面提示信息（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）

cha138/Article/program/net/201311/13284

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

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