ToolTip

【程序源码】

var tooltip = function() {
    function T$(i) { return document.getElementById(i); }
    function T$$(e, o) { return (o || document).getElementsByTagName(e); }
    var id = 'tt';
    var top = 3;
    var left = 3;
    var speed = 15;
    var timer = 20;
    var endalpha = 95;
    var alpha = 0;
    var tt, t, c, b, h;
    var ie = document.all ? true : false;
    var ct = [
                ['[名字]:漩涡鸣人', 
                 '[身世]:木叶四代火影波风水门之子。第四代火影把九尾封印在当时还是个婴儿的鸣人体内', 
                 '[忍术]:色诱术(C)是鸣人的第一个自创忍术'], 
                ['[名字]:宇智波佐助', 
                 '[身世]:宇智波一族是《火影忍者》中的火之国木叶忍者村的一个氏族', 
                 '[忍术]:风魔手里剑·影风车'], 
                ['[名字]:旗木卡卡西', 
                 '[身世]:卡卡西、带土、琳都是四代目的部下。作为木叶白牙的儿子，卡卡西是个天才忍者', 
                 '[忍术]:木叶体术奥义 千年杀'], 
                ['[名字]:佩恩', 
                 '[身世]:佩恩是本体长门和他所操纵六道的总称，是一个象征性代号。', 
                 '[忍术]:外道·轮回天生之术'], 
                ['[名字]:我爱罗', 
                 '[身世]:我爱罗是第四代风影之子，也是手鞠和勘九郎的弟弟。', 
                 '[忍术]:守鹤之盾'], 
        ];
    return {
        init: function(ct) {
            var self = this;
            var es = T$$('li', T$(id)), i = 0, len = es.length;
            for (; i < len; i++) {
                es[i].onmouseover = new Function('tooltip.show('+i+')');
                es[i].onmouseout = function() { self.hide(); }
            }
        },
        
        show: function(i) {
            var self = this;
            if (tt == null) {
                tt = document.createElement('div');
                tt.setAttribute('id', id);
                t = document.createElement('div');
                t.setAttribute('id', id + 'top');
                c = document.createElement('div');
                c.setAttribute('id', id + 'cont');
                b = document.createElement('div');
                b.setAttribute('id', id + 'bot');
                tt.appendChild(t);
                tt.appendChild(c);
                tt.appendChild(b);
                document.body.appendChild(tt);
                tt.style.opacity = 0;
                tt.style.filter = 'alpha(opacity = 0)';
                document.onmousemove = this.pos;
            } 
            tt.style.display = 'block';
            h = parseInt(tt.offsetHeight) + top;
            T$(id + 'top').innerHTML = ct[i][0];
            T$(id + 'cont').innerHTML = ct[i][1];
            T$(id + 'bot').innerHTML = ct[i][2];
            clearInterval(tt.timer);
            tt.timer = setInterval(function() { self.fade(1)}, timer);
        },
        
        fade: function(d) {
            var a = alpha;
            if ((a != endalpha && d == 1) || (a != 0 && d == -1)) {
                var i = speed;
                if (endalpha - a < speed && d == 1) {
                    i = endalpha - a;
                } else if (alpha < speed && d == -1) {
                    i = a;
                } 
                alpha = a + (i * d);
                tt.style.opacity = alpha * .01;
                tt.style.filter = 'alpha(opacity=' + alpha + ')';
            } else {
                clearInterval(tt.timer);
                if (d == -1) { tt.style.display = 'none'; } 
            }
        },

        pos: function(e) {
            var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
            var l = ie ? event.clientX + document.documentElement.scrollLeft: e.pageX;
            tt.style.top = (u - h) + 'px';
            tt.style.left = (l + left) + 'px';
        },
        
        hide: function() {
            var self = this;
            clearInterval(tt.timer);
            tt.timer = setInterval(function() { self.fade(-1) }, timer);
        }
    };
}();

tooltip.init();

【源码下载】 

toolTip