diff options
Diffstat (limited to 'phpBB/adm/style/tooltip.js')
-rw-r--r-- | phpBB/adm/style/tooltip.js | 251 |
1 files changed, 251 insertions, 0 deletions
diff --git a/phpBB/adm/style/tooltip.js b/phpBB/adm/style/tooltip.js new file mode 100644 index 0000000000..20610b52fe --- /dev/null +++ b/phpBB/adm/style/tooltip.js @@ -0,0 +1,251 @@ +/* +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; + } + } +*/ +} |