Blame Extras/phpBB/3.0.4/adm/style/tooltip.js

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
}