如何定制页面提示信息（tooltips）

一个页面上往往有很多链接、按钮，如果没有任何提示信息，会让人很迷茫。虽然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鼠标移开链接时隐藏提示信息，虽然上面的代码能够实现功能，但不是很好，因为需要为每个链接一一添加事件，而实际开发中一个页面就会有很多链接，这样就不方便，比较好的方法是下面代码这样实现

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);
}

完成上面的三部简单的自定义提示信息就完成啦，一些特别的提示信息是对创建的层做了特殊处理，如我们经常看到圆角提示信息，是在层上添加了背景图片。
提供一个示例下载供大家参考，希望有帮助<< 示例下载>>

转载于:https://www.cnblogs.com/AganCN/archive/2008/01/26/1053875.html