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