say hello to role descriptions, role ordering and tooltips on role selects

git-svn-id: file:///svn/phpbb/trunk@5791 89ea8834-ac86-4346-8a33-228a782c2dd0

phpBB/adm/style/tooltip.js

@@ -0,0 +1,223 @@
+/*
+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';
+}
+
+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';
+}
+
+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;
+}
+
+function show_tooltip(e)
+{
+	document.getElementById('_tooltip_container').appendChild(this.tooltip);
+	locate(this);
+}
+
+function hide_tooltip(e)
+{
+	var d = document.getElementById('_tooltip_container');
+	if (d.childNodes.length > 0)
+	{
+		d.removeChild(d.firstChild);
+	}
+}
+
+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';
+}
+
+function create_element(tag, c)
+{
+	var x = document.createElement(tag);
+	x.className = c;
+	x.style.display = 'block';
+	return x;
+}
+
+function locate(e)
+{
+	var posx = 0;
+	var posy = 0;
+
+	if (tooltip_mode == 'link')
+	{
+		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;
+			}
+		}
+
+		document.getElementById('_tooltip_container').style.top=(posy+10) + 'px';
+		document.getElementById('_tooltip_container').style.left=(posx-20) + 'px';
+	}
+	else
+	{
+		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;
+		}
+
+		document.getElementById('_tooltip_container').style.top=(posy+30) + 'px';
+		document.getElementById('_tooltip_container').style.left=(posx-205) + 'px';
+	}
+}