学步园

以前经常在别的网站上看到他们的工具提示不像普通的一样，是有样式的，有的还加上了图标，一直在想它是怎么实现的。
今天研究了一下，自已写了一个这样的功能，嘿嘿
现在功能实现显示连接的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的名称改得很长，估计不会有哪位跟我想到一起了吧）。