2
javascript for Bubble Tooltips by Alessandro Fulciniti
3
- http://pro.html.it - http://web-graphics.com
4
obtained from: http://web-graphics.com/mtarchive/001717.php
6
phpBB 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
13
var head_text, tooltip_mode;
16
* Enable tooltip replacements for links
18
function enable_tooltips_link(id, headline, sub_id)
24
if (!document.getElementById || !document.getElementsByTagName)
29
hold = document.createElement('span');
30
hold.id = '_tooltip_container';
31
hold.setAttribute('id', '_tooltip_container');
32
hold.style.position = 'absolute';
34
document.getElementsByTagName('body')[0].appendChild(hold);
38
links = document.getElementsByTagName('a');
42
links = document.getElementById(id).getElementsByTagName('a');
45
for (i = 0; i < links.length; i++)
49
if (links[i].id.substr(0, sub_id.length) == sub_id)
60
tooltip_mode = 'link';
64
* Enable tooltip replacements for selects
66
function enable_tooltips_select(id, headline, sub_id)
72
if (!document.getElementById || !document.getElementsByTagName)
77
hold = document.createElement('span');
78
hold.id = '_tooltip_container';
79
hold.setAttribute('id', '_tooltip_container');
80
hold.style.position = 'absolute';
82
document.getElementsByTagName('body')[0].appendChild(hold);
86
links = document.getElementsByTagName('option');
90
links = document.getElementById(id).getElementsByTagName('option');
93
for (i = 0; i < links.length; i++)
97
if (links[i].parentNode.id.substr(0, sub_id.length) == sub_id)
108
tooltip_mode = 'select';
112
* Prepare elements to replace
114
function prepare(element)
116
var tooltip, text, desc, title;
118
text = element.getAttribute('title');
120
if (text == null || text.length == 0)
125
element.removeAttribute('title');
126
tooltip = create_element('span', 'tooltip');
128
title = create_element('span', 'top');
129
title.appendChild(document.createTextNode(head_text));
130
tooltip.appendChild(title);
132
desc = create_element('span', 'bottom');
133
desc.innerHTML = text;
134
tooltip.appendChild(desc);
136
set_opacity(tooltip);
138
element.tooltip = tooltip;
139
element.onmouseover = show_tooltip;
140
element.onmouseout = hide_tooltip;
142
if (tooltip_mode == 'link')
144
element.onmousemove = locate;
151
function show_tooltip(e)
153
document.getElementById('_tooltip_container').appendChild(this.tooltip);
160
function hide_tooltip(e)
162
var d = document.getElementById('_tooltip_container');
163
if (d.childNodes.length > 0)
165
d.removeChild(d.firstChild);
170
* Set opacity on tooltip element
172
function set_opacity(element)
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';
183
function create_element(tag, c)
185
var x = document.createElement(tag);
187
x.style.display = 'block';
192
* Correct positioning of tooltip container
203
for (var posx = 0, posy = 0; e.offsetParent; e = e.offsetParent)
205
posx += e.offsetLeft;
215
if (tooltip_mode == 'link')
217
document.getElementById('_tooltip_container').style.top=(posy+20) + 'px';
218
document.getElementById('_tooltip_container').style.left=(posx-20) + 'px';
222
document.getElementById('_tooltip_container').style.top=(posy+30) + 'px';
223
document.getElementById('_tooltip_container').style.left=(posx-205) + 'px';
232
if (e.pageX || e.pageY)
237
else if (e.clientX || e.clientY)
239
if (document.documentElement.scrollTop)
241
posx = e.clientX+document.documentElement.scrollLeft;
242
posy = e.clientY+document.documentElement.scrollTop;
246
posx = e.clientX+document.body.scrollLeft;
247
posy = e.clientY+document.body.scrollTop;