source: trunk/forum/adm/style/tooltip.js

Last change on this file was 400, checked in by george, 17 years ago
  • Přidáno: Nové forum phpBB 3.
File size: 4.4 KB
Line 
1/*
2javascript for Bubble Tooltips by Alessandro Fulciniti
3- http://pro.html.it - http://web-graphics.com
4obtained from: http://web-graphics.com/mtarchive/001717.php
5
6phpBB Development Team:
7 - modified to adhere to our coding guidelines
8 - integration into our design
9 - added ability to perform tooltips on select elements
10 - further adjustements
11*/
12
13var head_text, tooltip_mode;
14
15/**
16* Enable tooltip replacements for links
17*/
18function enable_tooltips_link(id, headline, sub_id)
19{
20 var links, i, hold;
21
22 head_text = headline;
23
24 if (!document.getElementById || !document.getElementsByTagName)
25 {
26 return;
27 }
28
29 hold = document.createElement('span');
30 hold.id = '_tooltip_container';
31 hold.setAttribute('id', '_tooltip_container');
32 hold.style.position = 'absolute';
33
34 document.getElementsByTagName('body')[0].appendChild(hold);
35
36 if (id == null)
37 {
38 links = document.getElementsByTagName('a');
39 }
40 else
41 {
42 links = document.getElementById(id).getElementsByTagName('a');
43 }
44
45 for (i = 0; i < links.length; i++)
46 {
47 if (sub_id)
48 {
49 if (links[i].id.substr(0, sub_id.length) == sub_id)
50 {
51 prepare(links[i]);
52 }
53 }
54 else
55 {
56 prepare(links[i]);
57 }
58 }
59
60 tooltip_mode = 'link';
61}
62
63/**
64* Enable tooltip replacements for selects
65*/
66function enable_tooltips_select(id, headline, sub_id)
67{
68 var links, i, hold;
69
70 head_text = headline;
71
72 if (!document.getElementById || !document.getElementsByTagName)
73 {
74 return;
75 }
76
77 hold = document.createElement('span');
78 hold.id = '_tooltip_container';
79 hold.setAttribute('id', '_tooltip_container');
80 hold.style.position = 'absolute';
81
82 document.getElementsByTagName('body')[0].appendChild(hold);
83
84 if (id == null)
85 {
86 links = document.getElementsByTagName('option');
87 }
88 else
89 {
90 links = document.getElementById(id).getElementsByTagName('option');
91 }
92
93 for (i = 0; i < links.length; i++)
94 {
95 if (sub_id)
96 {
97 if (links[i].parentNode.id.substr(0, sub_id.length) == sub_id)
98 {
99 prepare(links[i]);
100 }
101 }
102 else
103 {
104 prepare(links[i]);
105 }
106 }
107
108 tooltip_mode = 'select';
109}
110
111/**
112* Prepare elements to replace
113*/
114function prepare(element)
115{
116 var tooltip, text, desc, title;
117
118 text = element.getAttribute('title');
119
120 if (text == null || text.length == 0)
121 {
122 return;
123 }
124
125 element.removeAttribute('title');
126 tooltip = create_element('span', 'tooltip');
127
128 title = create_element('span', 'top');
129 title.appendChild(document.createTextNode(head_text));
130 tooltip.appendChild(title);
131
132 desc = create_element('span', 'bottom');
133 desc.innerHTML = text;
134 tooltip.appendChild(desc);
135
136 set_opacity(tooltip);
137
138 element.tooltip = tooltip;
139 element.onmouseover = show_tooltip;
140 element.onmouseout = hide_tooltip;
141
142 if (tooltip_mode == 'link')
143 {
144 element.onmousemove = locate;
145 }
146}
147
148/**
149* Show tooltip
150*/
151function show_tooltip(e)
152{
153 document.getElementById('_tooltip_container').appendChild(this.tooltip);
154 locate(this);
155}
156
157/**
158* Hide tooltip
159*/
160function hide_tooltip(e)
161{
162 var d = document.getElementById('_tooltip_container');
163 if (d.childNodes.length > 0)
164 {
165 d.removeChild(d.firstChild);
166 }
167}
168
169/**
170* Set opacity on tooltip element
171*/
172function set_opacity(element)
173{
174 element.style.filter = 'alpha(opacity:95)';
175 element.style.KHTMLOpacity = '0.95';
176 element.style.MozOpacity = '0.95';
177 element.style.opacity = '0.95';
178}
179
180/**
181* Create new element
182*/
183function create_element(tag, c)
184{
185 var x = document.createElement(tag);
186 x.className = c;
187 x.style.display = 'block';
188 return x;
189}
190
191/**
192* Correct positioning of tooltip container
193*/
194function locate(e)
195{
196 var posx = 0;
197 var posy = 0;
198
199 e = e.parentNode;
200
201 if (e.offsetParent)
202 {
203 for (var posx = 0, posy = 0; e.offsetParent; e = e.offsetParent)
204 {
205 posx += e.offsetLeft;
206 posy += e.offsetTop;
207 }
208 }
209 else
210 {
211 posx = e.offsetLeft;
212 posy = e.offsetTop;
213 }
214
215 if (tooltip_mode == 'link')
216 {
217 document.getElementById('_tooltip_container').style.top=(posy+20) + 'px';
218 document.getElementById('_tooltip_container').style.left=(posx-20) + 'px';
219 }
220 else
221 {
222 document.getElementById('_tooltip_container').style.top=(posy+30) + 'px';
223 document.getElementById('_tooltip_container').style.left=(posx-205) + 'px';
224 }
225
226/*
227 if (e == null)
228 {
229 e = window.event;
230 }
231
232 if (e.pageX || e.pageY)
233 {
234 posx = e.pageX;
235 posy = e.pageY;
236 }
237 else if (e.clientX || e.clientY)
238 {
239 if (document.documentElement.scrollTop)
240 {
241 posx = e.clientX+document.documentElement.scrollLeft;
242 posy = e.clientY+document.documentElement.scrollTop;
243 }
244 else
245 {
246 posx = e.clientX+document.body.scrollLeft;
247 posy = e.clientY+document.body.scrollTop;
248 }
249 }
250*/
251}
Note: See TracBrowser for help on using the repository browser.