https://jnew.jp/js/tooltip.js

1var tooltip = function() {
2    var id = 'tt';
3    var top = 3;
4    var left = 3;
5    var maxw = 300;
6    var speed = 10;
7    var timer = 20;
8    var endalpha = 95;
9    var alpha = 0;
10    var tt, t, c, b, h;
11    var ie = document.all ? true : false;
12    return {
13        show: function(v, w) {
14            if(tt == null) {
15                tt = document.createElement('div');
16                tt.setAttribute('id', id);
17                t = document.createElement('div');
18                t.setAttribute('id', id + 'top');
19                c = document.createElement('div');
20                c.setAttribute('id', id + 'cont');
21                b = document.createElement('div');
22                b.setAttribute('id', id + 'bot');
23                tt.appendChild(t);
24                tt.appendChild(c);
25                tt.appendChild(b);
26                document.body.appendChild(tt);
27                tt.style.opacity = 0;
28                tt.style.filter = 'alpha(opacity=0)';
29                document.onmousemove = this.pos;
30            }
31            tt.style.display = 'block';
32            c.innerHTML = v;
33            tt.style.width = w ? w + 'px' : 'auto';
34            if(!w && ie) {
35                t.style.display = 'none';
36                b.style.display = 'none';
37                tt.style.width = tt.offsetWidth;
38                t.style.display = 'block';
39                b.style.display = 'block';
40            }
41            if(tt.offsetWidth > maxw) {
42                tt.style.width = maxw + 'px';
43            }
44            h = parseInt(tt.offsetHeight) + top;
45            clearInterval(tt.timer);
46            tt.timer = setInterval(function() {
47                tooltip.fade(1);
48            }, timer);
49        },
50        pos: function(e) {
51            var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
52            var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
53
54            if((window.innerWidth - l) < parseInt(tt.offsetWidth)) {
55                l = l - parseInt(tt.offsetWidth);
56                l = (l < 0) ? 0 : l;
57            }
58
59            tt.style.top = u + top +  'px';
60            tt.style.left = l + 'px';
61        },
62        fade: function(d) {
63            var a = alpha;
64            if((a != endalpha && d == 1) || (a != 0 && d == -1)) {
65                var i = speed;
66                if(endalpha - a < speed && d == 1) {
67                    i = endalpha - a;
68                } else if(alpha < speed && d == -1) {
69                    i = a;
70                }
71                alpha = a + (i * d);
72                tt.style.opacity = alpha * .01;
73                tt.style.filter = 'alpha(opacity=' + alpha + ')';
74            } else {
75                clearInterval(tt.timer);
76                if(d == -1) {
77                    tt.style.display = 'none';
78                }
79            }
80        },
81        hide: function() {
82            clearInterval(tt.timer);
83            tt.timer = setInterval(function() {
84                tooltip.fade(-1);
85            }, timer);
86        }
87    };
88} ();