通js实现自定义Tooltip样式

http://www.cnblogs.com/huacn/archive/2007/04/27/729222.html



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>

通过在页面的最后加入这样一段代码，就可以实现给所有的超级连接加上自定义工具提示了。
Tooltip源代码包下载地址：https://files.cnblogs.com/huacn/ToolTip.rar