使用方法：

在需要的页面引用这段js,或者你把它写入js文件调用,并在window.onload中加入enable_tooltip();即可

//===============================tooltip效果函数================================  
/*--->enableTooltips() 
 * 功能:调用tooltip效果 
 * 参数:无 
 * 返回:无 
 */ 
    function enable_tooltip(){  
        var links,i,h;  
        //是否支持DOM  
        if(!document.getElementById || !document.getElementsByTagName){  
            return;  
        }  
        //添加样式  
        add_css();  
        h=document.createElement("span");  
        h.setAttribute("id","btc");  
        h.style.position="absolute";  
        document.getElementsByTagName("body")[0].appendChild(h);  
        //遍历链接,添加tooltip事件  
        for(i=0;i<DOCUMENT.GETELEMENTSBYTAGNAME("A").LENGTH;I++){ *--- } Prepare(document.getElementsByTagName(?img?)[i]); for(i='0;i<document.getElementsByTagName("img").length;i++){' 遍历图片,添加tooltip事件 Prepare(document.getElementsByTagName(?a?)[i]);>Prepare(el)  
 * 功能:实现tooltip的显示,删除,透明度等功能  
 * 参数:  
 *      el:受作用节点  
 * 返回:无  
 */  
    function Prepare(el){  
        //变量说明:  
            //tooltip:tooltip效果的整体,装载在id为btc的span标签中  
            //s:显示链接的title,tooltip的上半部分效果  
            //t:title的值  
            //b:显示链接的href,tooltip下半部分效果  
            //l:链接内容,就是href的值  
        var tooltip,t,b,s,l;  
        t=el.getAttribute("title");  
        if(t==null || t.length==0){  
            return;  
        }  
        //去掉该节点的title属性  
        if(el.getAttribute("title")){  
            el.removeAttribute("title");  
        }  
        if(el.getAttribute("alt")){  
            el.removeAttribute("alt");  
        }  
        //创建节点tooltip,标签为span,设置class属性值为tooltip  
        tooltip=CreateEl("span","tooltip");  
        //创建节点s,标签为span,设置class属性值为top.s节点是用来显示a链接的title内容  
        s=CreateEl("span","top");  
        s.appendChild(document.createTextNode(t));  
        tooltip.appendChild(s);  
          
        //创建节点b,标签为span,设置class属性值为bottom.b节点是用来显示a的链接的href内容  
        b=CreateEl("b","bottom");  
        l=el.getAttribute("href") || el.getAttribute("src");  
        if(l.length>30) l=l.substr(0,27)+"...";  
        b.appendChild(document.createTextNode(l));  
        tooltip.appendChild(b);  
        //设置透明度  
        setOpacity(tooltip);  
        el.tooltip=tooltip;  
        //节点的鼠标移到上面事件:显示tooltip  
        el.onmouseover=showTooltip;  
        //节点的鼠标移出事件:移除tooltip  
        el.onmouseout=hideTooltip;  
        //节点的鼠标在上面移动事件:只要调整位置  
        el.onmousemove=Locate;  
    }  
/*--->add_css() 
 * 功能:动态添加样式 
 * 参数:无 
 * 返回值:无 
 */ 
    function add_css(){  
        var l=CreateEl("link");  
        l.setAttribute("type","text/css");  
        l.setAttribute("rel","stylesheet");  
        l.setAttribute("href","css/tooltip.css");  
        l.setAttribute("media","screen");  
        document.getElementsByTagName("head")[0].appendChild(l);  
    }  
/*--->CreateEl(t,c) 
 * 功能:创建一个标签节点,并设置它的css属性 
 * 参数: 
 *      t:要创建的标签名 
 *      c:要创建的css的class名 
 * 返回:创建的节点 
 */ 
    function CreateEl(t,c){  
        var x=document.createElement(t);  
        x.className=c;  
        x.style.display="block";  
        return(x);  
    }  
/*--->setOpacity(el) 
 * 功能:设置tooltip的透明度 
 * 参数:tooltip当前节点 
 * 返回值:无 
 */ 
    function setOpacity(el){  
        el.style.filter="alpha(opacity:75)";  
        el.style.KHTMLOpacity="0.75";  
        el.style.MozOpacity="0.75";  
        el.style.opacity="0.75";  
    }  
/*--->showTooltip(e) 
 * 功能:显示tooltip,并设置位置 
 * 参数: 
 *      e:事件,这里接受a的onmouseover 
 * 返回:无 
 * 说明:由于是把tooltip节点做为孩子加入btc节点,所以后面删除只要移除tooltip节点即可. 
 *      而tooltip是第一个孩子,所以removeChild掉firstChild即可 
 */ 
    function showTooltip(e){  
        document.getElementById("btc").appendChild(this.tooltip);  
        Locate(e);  
    }  
/*--->hideTooltip(e) 
 * 功能:移除tooltip显示 
 * 参数: 
 *      e:事件,这里接受a的onmouseout事件 
 * 返回:无 
 */ 
    function hideTooltip(e){  
        //获取tooltip节点  
        var d=document.getElementById("btc");  
        if(d.childNodes.length>0) d.removeChild(d.firstChild);  
    }  
/*--->Locate(e) 
 * 功能:设置tooltip的位置 
 * 参数: 
 *      e:事件,,这里接受a的onmousemove 
 *  返回:无 
 */ 
    function Locate(e){  
        var posx=0,posy=0;  
        if(e==null) e=window.event;  
        if(e.pageX || e.pageY){  
            posx=e.pageX; posy=e.pageY;  
        }else if(e.clientX || e.clientY){  
            if(document.documentElement.scrollTop){  
                posx=e.clientX+document.documentElement.scrollLeft;  
                posy=e.clientY+document.documentElement.scrollTop;  
            }else{  
                posx=e.clientX+document.body.scrollLeft;  
                posy=e.clientY+document.body.scrollTop;  
            }  
        }  
        document.getElementById("btc").style.top=(posy+10)+"px";  
        document.getElementById("btc").style.left=(posx-20)+"px";  
    } 

源代码下载地址：tooltip.rar （25.05 KB）