[转]通js实现自定义Tooltip样式

以前经常在别的网站上看到他们的工具提示不像普通的一样，是有样式的，有的还加上了图标，一直在想它是怎么实现的。
今天研究了一下，自已写了一个这样的功能，嘿嘿
现在功能实现显示连接的title内容与连接地址
如下图所示，只要加上我写好这段代码，就可以很快实现这样的效果了。



JS代码:

//  ===================================================
//  Tooltip V1.0
//  为超级连接加上样式的js
//  Author:Huacn Lee
//  Blog: Huacn.cnblogs.com
//  ===================================================
var  _BarIdName  =   " ___tooltipbar " ;
// 页面上调用的方法
function  initToolTip()
{    
    initStyle();//注册CSS样式
    initTipbar();//创建tooltip显示区域
            
    var tagaArry = new Array();    
    var tag = null;        
    tagaArry = document.getElementsByTagName("a");
    
    for(var i=0;i<tagaArry.length;i++)
    {
        tag = tagaArry[i];    
        //alert(tag.href);        
        var oldTitle = tag.title;    
        tag.onmouseover = function()
        { 
            showTipbar(this);
        };
        
        tag.onmouseleave = function()
        {
            hideTipbar(this);    
        };
        
        tag.onmousemove = function()
        {            
            setTipLocation();
        }
    }        
    
}

// 显示tooltip
function  showTipbar(tag)
{    
    var tipbar = $(_BarIdName);
    //alert(oldTitle);
    tipbar.innerHTML = tag.title;
    tag.title = "";    
    tipbar.style.display = "";    
}

// 隐藏tooltip
function  hideTipbar(tag)
{
    var tipbar = $(_BarIdName);
    tipbar.style.display = "none";    
    tag.title = $(_BarIdName).innerHTML;
}

// 初始化tooltip区域
function  initTipbar()
{        
    var div = document.createElement("div");    
    div.className = "tooltip";
    div.id = _BarIdName;
    document.body.appendChild(div);
    div.style.display = "none";
    //alert(div.innerHTML);
}

// 设置tipbar的位置
function  setTipLocation(e)
{
    var intX=0,intY=0;    
    if(e==null)
    {        
        e=window.event;        
    }
    
    if(e.pageX || e.pageY)
    {
        intX=e.pageX; intY=e.pageY;
    }
    else if(e.clientX || e.clientY)
    {
        if(document.documentElement.scrollTop)
        {
            intX=e.clientX+document.documentElement.scrollLeft;
            intY=e.clientY+document.documentElement.scrollTop;
        }
        else
        {
            intX=e.clientX+document.body.scrollLeft;
            intY=e.clientY+document.body.scrollTop;
        }
    }
    $(_BarIdName).style.top = (intY+10)+"px";
    $(_BarIdName).style.left = (intX)+"px";
}

// 注册css
function  initStyle()
{        
    var linkstyle = document.createElement("link");
    linkstyle.setAttribute("href","styles/tooltip.css");
    linkstyle.setAttribute("rel","stylesheet");
    linkstyle.setAttribute("type","text/css");        
    linkstyle.setAttribute("media","screen");    
    document.getElementsByTagName("head")[0].appendChild(linkstyle);
}

function  $(re)
{
    return document.getElementById(re);
}

HTML页面调用：

< script  type ="text/javascript"  src ="scripts/ToolTip.js" ></ script >
< script  type ="text/javascript" > initToolTip(); </ script >

 

HTML页面调用：
通过在页面的最后加入这样一段代码，就可以实现给所有的超级连接加上自定义工具提示了。
Tooltip源代码包下载地址： http://files.cnblogs.com/huacn/ToolTip.rar
刚刚修改了一下，现在在Firefox下没有问题了，样式也修改了一下，加上了图标，另外把连接的地址显示在上面了，还改了一下css，一面在使用的时候跟其它的css发生冲突（嘿嘿，把哪个class的名称改得很长，估计不会有哪位跟我想到一起了吧）。