/**
 * Muestra un tooltip sobre un elemento
 * 
 * Forma de uso:
 *
 * var help = new TitleHelp({
 * 		id : 'help',                               //id del elemento sobre el que mostrar el tooltip
 * 		texto : 'El nombre es obligatorio',        //texto a mostrar
 * 		className : 'help'                         //nombre de la clase css a utilizar en el tooltip
 * });
 */
function TitleHelp(props)
{
	this.id = document.getElementById(props.id);
	this.texto = props.texto;
	this.className = props.className;
	
	/**
	 * Devuelve una funcion a partir de un metodo de un objeto concreto
	 * Es muy util para llamar a la funcion "setInterval" o "setTimeout" con metodos de un objeto
	 */
	this.associateObjWithEvent = function(obj, methodName) {
		return (function(e){
			e = e||window.event;
			return obj[methodName](e, this);
		});
	}
	
	/**
	 * Inicializa el tooltip
	 */
	this.init = function()
	{
		this.id.style.position = 'relative';
		this.tooltip = document.createElement('span');
		this.tooltip.appendChild( document.createTextNode(this.texto) );
		this.tooltip.style.display = 'none';
		this.tooltip.style.position = 'absolute';
		this.tooltip.style.top = this.id.offsetHeight + 'px';
		this.tooltip.style.left = this.id.offsetWidth + 'px';
		this.tooltip.className = this.className;
		this.id.appendChild( this.tooltip );
		
		this.id.onmouseover = this.associateObjWithEvent(this, "show");
		this.id.onmouseout = this.associateObjWithEvent(this, "hide");
	}
	
	/**
	 * Muestra el tooltip
	 */
	this.show = function()
	{
		this.tooltip.style.display = 'block';
	}
	
	/**
	 * Oculta el tooltip
	 */
	this.hide = function()
	{
		this.tooltip.style.display = 'none';
	}

	this.init();
}