|
|
4c79b5 |
/*
|
|
|
4c79b5 |
javascript for Bubble Tooltips by Alessandro Fulciniti
|
|
|
4c79b5 |
- http://pro.html.it - http://web-graphics.com
|
|
|
4c79b5 |
obtained from: http://web-graphics.com/mtarchive/001717.php
|
|
|
4c79b5 |
|
|
|
4c79b5 |
phpBB Development Team:
|
|
|
4c79b5 |
- modified to adhere to our coding guidelines
|
|
|
4c79b5 |
- integration into our design
|
|
|
4c79b5 |
- added ability to perform tooltips on select elements
|
|
|
4c79b5 |
- further adjustements
|
|
|
4c79b5 |
*/
|
|
|
4c79b5 |
|
|
|
4c79b5 |
var head_text, tooltip_mode;
|
|
|
4c79b5 |
|
|
|
4c79b5 |
/**
|
|
|
4c79b5 |
* Enable tooltip replacements for links
|
|
|
4c79b5 |
*/
|
|
|
4c79b5 |
function enable_tooltips_link(id, headline, sub_id)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
var links, i, hold;
|
|
|
4c79b5 |
|
|
|
4c79b5 |
head_text = headline;
|
|
|
4c79b5 |
|
|
|
4c79b5 |
if (!document.getElementById || !document.getElementsByTagName)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
return;
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
|
|
|
4c79b5 |
hold = document.createElement('span');
|
|
|
4c79b5 |
hold.id = '_tooltip_container';
|
|
|
4c79b5 |
hold.setAttribute('id', '_tooltip_container');
|
|
|
4c79b5 |
hold.style.position = 'absolute';
|
|
|
4c79b5 |
|
|
|
4c79b5 |
document.getElementsByTagName('body')[0].appendChild(hold);
|
|
|
4c79b5 |
|
|
|
4c79b5 |
if (id == null)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
links = document.getElementsByTagName('a');
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
else
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
links = document.getElementById(id).getElementsByTagName('a');
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
|
|
|
4c79b5 |
for (i = 0; i < links.length; i++)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
if (sub_id)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
if (links[i].id.substr(0, sub_id.length) == sub_id)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
prepare(links[i]);
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
else
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
prepare(links[i]);
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
|
|
|
4c79b5 |
tooltip_mode = 'link';
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
|
|
|
4c79b5 |
/**
|
|
|
4c79b5 |
* Enable tooltip replacements for selects
|
|
|
4c79b5 |
*/
|
|
|
4c79b5 |
function enable_tooltips_select(id, headline, sub_id)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
var links, i, hold;
|
|
|
4c79b5 |
|
|
|
4c79b5 |
head_text = headline;
|
|
|
4c79b5 |
|
|
|
4c79b5 |
if (!document.getElementById || !document.getElementsByTagName)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
return;
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
|
|
|
4c79b5 |
hold = document.createElement('span');
|
|
|
4c79b5 |
hold.id = '_tooltip_container';
|
|
|
4c79b5 |
hold.setAttribute('id', '_tooltip_container');
|
|
|
4c79b5 |
hold.style.position = 'absolute';
|
|
|
4c79b5 |
|
|
|
4c79b5 |
document.getElementsByTagName('body')[0].appendChild(hold);
|
|
|
4c79b5 |
|
|
|
4c79b5 |
if (id == null)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
links = document.getElementsByTagName('option');
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
else
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
links = document.getElementById(id).getElementsByTagName('option');
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
|
|
|
4c79b5 |
for (i = 0; i < links.length; i++)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
if (sub_id)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
if (links[i].parentNode.id.substr(0, sub_id.length) == sub_id)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
prepare(links[i]);
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
else
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
prepare(links[i]);
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
|
|
|
4c79b5 |
tooltip_mode = 'select';
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
|
|
|
4c79b5 |
/**
|
|
|
4c79b5 |
* Prepare elements to replace
|
|
|
4c79b5 |
*/
|
|
|
4c79b5 |
function prepare(element)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
var tooltip, text, desc, title;
|
|
|
4c79b5 |
|
|
|
4c79b5 |
text = element.getAttribute('title');
|
|
|
4c79b5 |
|
|
|
4c79b5 |
if (text == null || text.length == 0)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
return;
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
|
|
|
4c79b5 |
element.removeAttribute('title');
|
|
|
4c79b5 |
tooltip = create_element('span', 'tooltip');
|
|
|
4c79b5 |
|
|
|
4c79b5 |
title = create_element('span', 'top');
|
|
|
4c79b5 |
title.appendChild(document.createTextNode(head_text));
|
|
|
4c79b5 |
tooltip.appendChild(title);
|
|
|
4c79b5 |
|
|
|
4c79b5 |
desc = create_element('span', 'bottom');
|
|
|
4c79b5 |
desc.innerHTML = text;
|
|
|
4c79b5 |
tooltip.appendChild(desc);
|
|
|
4c79b5 |
|
|
|
4c79b5 |
set_opacity(tooltip);
|
|
|
4c79b5 |
|
|
|
4c79b5 |
element.tooltip = tooltip;
|
|
|
4c79b5 |
element.onmouseover = show_tooltip;
|
|
|
4c79b5 |
element.onmouseout = hide_tooltip;
|
|
|
4c79b5 |
|
|
|
4c79b5 |
if (tooltip_mode == 'link')
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
element.onmousemove = locate;
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
|
|
|
4c79b5 |
/**
|
|
|
4c79b5 |
* Show tooltip
|
|
|
4c79b5 |
*/
|
|
|
4c79b5 |
function show_tooltip(e)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
document.getElementById('_tooltip_container').appendChild(this.tooltip);
|
|
|
4c79b5 |
locate(this);
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
|
|
|
4c79b5 |
/**
|
|
|
4c79b5 |
* Hide tooltip
|
|
|
4c79b5 |
*/
|
|
|
4c79b5 |
function hide_tooltip(e)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
var d = document.getElementById('_tooltip_container');
|
|
|
4c79b5 |
if (d.childNodes.length > 0)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
d.removeChild(d.firstChild);
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
|
|
|
4c79b5 |
/**
|
|
|
4c79b5 |
* Set opacity on tooltip element
|
|
|
4c79b5 |
*/
|
|
|
4c79b5 |
function set_opacity(element)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
element.style.filter = 'alpha(opacity:95)';
|
|
|
4c79b5 |
element.style.KHTMLOpacity = '0.95';
|
|
|
4c79b5 |
element.style.MozOpacity = '0.95';
|
|
|
4c79b5 |
element.style.opacity = '0.95';
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
|
|
|
4c79b5 |
/**
|
|
|
4c79b5 |
* Create new element
|
|
|
4c79b5 |
*/
|
|
|
4c79b5 |
function create_element(tag, c)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
var x = document.createElement(tag);
|
|
|
4c79b5 |
x.className = c;
|
|
|
4c79b5 |
x.style.display = 'block';
|
|
|
4c79b5 |
return x;
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
|
|
|
4c79b5 |
/**
|
|
|
4c79b5 |
* Correct positioning of tooltip container
|
|
|
4c79b5 |
*/
|
|
|
4c79b5 |
function locate(e)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
var posx = 0;
|
|
|
4c79b5 |
var posy = 0;
|
|
|
4c79b5 |
|
|
|
4c79b5 |
e = e.parentNode;
|
|
|
4c79b5 |
|
|
|
4c79b5 |
if (e.offsetParent)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
for (var posx = 0, posy = 0; e.offsetParent; e = e.offsetParent)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
posx += e.offsetLeft;
|
|
|
4c79b5 |
posy += e.offsetTop;
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
else
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
posx = e.offsetLeft;
|
|
|
4c79b5 |
posy = e.offsetTop;
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
|
|
|
4c79b5 |
if (tooltip_mode == 'link')
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
document.getElementById('_tooltip_container').style.top=(posy+20) + 'px';
|
|
|
4c79b5 |
document.getElementById('_tooltip_container').style.left=(posx-20) + 'px';
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
else
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
document.getElementById('_tooltip_container').style.top=(posy+30) + 'px';
|
|
|
4c79b5 |
document.getElementById('_tooltip_container').style.left=(posx-205) + 'px';
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
|
|
|
4c79b5 |
/*
|
|
|
4c79b5 |
if (e == null)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
e = window.event;
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
|
|
|
4c79b5 |
if (e.pageX || e.pageY)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
posx = e.pageX;
|
|
|
4c79b5 |
posy = e.pageY;
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
else if (e.clientX || e.clientY)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
if (document.documentElement.scrollTop)
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
posx = e.clientX+document.documentElement.scrollLeft;
|
|
|
4c79b5 |
posy = e.clientY+document.documentElement.scrollTop;
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
else
|
|
|
4c79b5 |
{
|
|
|
4c79b5 |
posx = e.clientX+document.body.scrollLeft;
|
|
|
4c79b5 |
posy = e.clientY+document.body.scrollTop;
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
}
|
|
|
4c79b5 |
*/
|
|
|
4c79b5 |
}
|