https://www.planuk.gr.jp/control/js/BubbleTooltips/BubbleTooltips.js

1/*javascript for Bubble Tooltips by Alessandro Fulciniti
2- http://pro.html.it - http://web-graphics.com */
3
4function enableTooltips(id , nus_url){
5var links,i,h;
6if(!document.getElementById || !document.getElementsByTagName) return;
7AddCss(nus_url);
8h=document.createElement("span");
9h.id="btc";
10h.setAttribute("id","btc");
11h.style.position="absolute";
12document.getElementsByTagName("body")[0].appendChild(h);
13if(id==null) links=document.getElementsByTagName("a");
14else links=document.getElementById(id).getElementsByTagName("a");
15for(i=0;i<links.length;i++){
16    Prepare(links[i] , nus_url);
17    }
18}
19
20function Prepare(el , nus_url){
21
22var tooltip,t,b,s,l;
23t=el.getAttribute("title");
24if(t==null || t.length==0) t="link:";
25if (t.match( /^https?:/ )){ 
26//  t  = '<img src="http://img.simpleapi.net/small/'+ t +'">';
27//  t  = 'http://capture.heartrails.com/200x200/cool?'+ t ;
28  t  = 'http://mozshot.nemui.org/shot?'+ t ;
29 el.removeAttribute("title");
30 tooltip=CreateEl("span","tooltip_dammy");
31 s=CreateEl("span","top");
32 s.appendChild(CreateElImg(t));
33 
34 tooltip.appendChild(s);
35 b=CreateEl("b","bottom");
36 l=el.getAttribute("href");
37 if(l.length>30) l=l.substr(0,27)+"...";
38 //b.appendChild(document.createTextNode(l));
39 tooltip.appendChild(b);
40
41}else if(t.match(/\.(pdf|PDF)$/i)){
42  t  = nus_url + '/images/mark-pdf.gif' ;
43 el.removeAttribute("title");
44 tooltip=CreateEl("span","tooltip_dammy");
45 s=CreateEl("span","top");
46 s.appendChild(CreateElImg(t));
47 
48 tooltip.appendChild(s);
49 b=CreateEl("b","bottom");
50 l=el.getAttribute("href");
51 if(l.length>30) l=l.substr(0,27)+"...";
52 //b.appendChild(document.createTextNode(l));
53 tooltip.appendChild(b); 
54
55}else if(t.match(/\.(xls|XLS|txt|TXT)$/i)){
56 
57  t  = nus_url + '/images/mark-excel.gif' ;
58 el.removeAttribute("title");
59 tooltip=CreateEl("span","tooltip_dammy");
60 s=CreateEl("span","top");
61 s.appendChild(CreateElImg(t));
62 
63 tooltip.appendChild(s);
64 b=CreateEl("b","bottom");
65 l=el.getAttribute("href");
66 if(l.length>30) l=l.substr(0,27)+"...";
67 //b.appendChild(document.createTextNode(l));
68 tooltip.appendChild(b); 
69
70
71}else if(t.match(/\.(gif|jpg|jpeg|png)$/i)){
72 
73  t  = nus_url + '/images/mark-dl.gif' ;
74 el.removeAttribute("title");
75 tooltip=CreateEl("span","tooltip_dammy");
76 s=CreateEl("span","top");
77 s.appendChild(CreateElImg(t));
78 
79 tooltip.appendChild(s);
80 b=CreateEl("b","bottom");
81 l=el.getAttribute("href");
82 if(l.length>30) l=l.substr(0,27)+"...";
83 //b.appendChild(document.createTextNode(l));
84 tooltip.appendChild(b); 
85
86 
87
88}else if(t.match(/\.(doc|DOC)$/i)){
89 
90  t  = nus_url + '/images/mark-word.gif' ;
91 el.removeAttribute("title");
92 tooltip=CreateEl("span","tooltip_dammy");
93 s=CreateEl("span","top");
94 s.appendChild(CreateElImg(t));
95 
96 tooltip.appendChild(s);
97 b=CreateEl("b","bottom");
98 l=el.getAttribute("href");
99 if(l.length>30) l=l.substr(0,27)+"...";
100 //b.appendChild(document.createTextNode(l));
101 tooltip.appendChild(b); 
102
103 
104}else {
105
106 el.removeAttribute("title");
107 tooltip=CreateEl("span","tooltip");
108 s=CreateEl("span","top");
109 //t.replace('&amp;nbsp;', "\n");
110 t = t.replace( /&nbsp;/g , "" ) ;
111 //alert(t);
112 s.appendChild(document.createTextNode(t));
113 tooltip.appendChild(s);
114 b=CreateEl("b","bottom");
115 l=el.getAttribute("href");
116 //l.replace('&amp;nbsp;', "\n");
117 
118 if(l.length>30) l=l.substr(0,30)+"...";
119 //b.appendChild(document.createTextNode(l));
120 tooltip.appendChild(b);
121 
122}
123
124setOpacity(tooltip);
125el.tooltip=tooltip;
126el.onmouseover=showTooltip;
127el.onmouseout=hideTooltip;
128el.onmousemove=Locate;
129}
130
131function Prepare_back(el){
132var tooltip,t,b,s,l;
133t=el.getAttribute("title");
134if(t==null || t.length==0) t="link:";
135el.removeAttribute("title");
136tooltip=CreateEl("span","tooltip");
137s=CreateEl("span","top");
138s.appendChild(document.createTextNode(t));
139tooltip.appendChild(s);
140b=CreateEl("b","bottom");
141l=el.getAttribute("href");
142if(l.length>30) l=l.substr(0,27)+"...";
143//b.appendChild(document.createTextNode(l));
144tooltip.appendChild(b);
145setOpacity(tooltip);
146el.tooltip=tooltip;
147el.onmouseover=showTooltip;
148el.onmouseout=hideTooltip;
149el.onmousemove=Locate;
150}
151
152
153
154function showTooltip(e){
155document.getElementById("btc").appendChild(this.tooltip);
156Locate(e);
157}
158
159function hideTooltip(e){
160var d=document.getElementById("btc");
161if(d.childNodes.length>0) d.removeChild(d.firstChild);
162}
163
164function setOpacity(el){
165el.style.filter="alpha(opacity:100)";
166el.style.KHTMLOpacity="1";
167el.style.MozOpacity="1";
168el.style.opacity="1";
169}
170
171function CreateEl(t,c){
172var x=document.createElement(t);
173x.className=c;
174x.style.display="block";
175return(x);
176}
177
178function CreateElImg(t){
179var stalker=document.createElement("img");
180 stalker.src=t;
181 stalker.alt="";
182 stalker.style.position="absolute";
183 stalker.style.left="0";
184 stalker.style.top="0";
185// stalker.setAttribute("id","m_stalker");
186return(stalker);
187}
188
189
190function AddCss(nus_url){
191var l=CreateEl("link");
192l.setAttribute("type","text/css");
193l.setAttribute("rel","stylesheet");
194l.setAttribute("href", nus_url  + '/js/BubbleTooltips/bt.css');
195l.setAttribute("media","screen");
196document.getElementsByTagName("head")[0].appendChild(l);
197}
198
199function Locate(e){
200var posx=0,posy=0;
201if(e==null) e=window.event;
202if(e.pageX || e.pageY){
203    posx=e.pageX; posy=e.pageY;
204    }
205else if(e.clientX || e.clientY){
206    if(document.documentElement.scrollTop){
207        posx=e.clientX+document.documentElement.scrollLeft;
208        posy=e.clientY+document.documentElement.scrollTop;
209        }
210    else{
211        posx=e.clientX+document.body.scrollLeft;
212        posy=e.clientY+document.body.scrollTop;
213        }
214    }
215document.getElementById("btc").style.top=(posy+10)+"px";
216document.getElementById("btc").style.left=(posx-20)+"px";
217}