Siguiendo con los tutoriales javascript aca muestro como hacer un tooltip en Javascript y usarlo facilmente como objecto en tu codigo. Reaccionando con variantes al click y mouseover.


Basicamente la idea es generar un objeto tan simple que nos permita con una sola linea tener un tooltip vistoso. Comencemos con el Javascript que define tal objeto. Primero creamos un objeto javascript. Vamos a decir que de esta manera creamos un objeto javascript por si no lo sabian

Tooltip = function(target, text, event) 

. Lo que hacemos en este constructor del objeto es obtener el target por ID y colocarle segun el evento elegido (click o over por default) una funcion para mostrar el tooltip en la pantalla. En la parte final hacemos append del objeto al elemento BODY. Como ven se agregan 2 metodos a los eventos onmouseover y onmouseout. Estos metodos seran ejecutados cuando algun evento en el cliente se dispare.

Seguimos con el metodo del objeto Tooltip llamado

show()

. Este metodo que fue agregado en al listener onmouseover va a ser quien definitivamente muestre el tooltip.

Y finalmente tenemos un metodo hide que simplemente oculta el tooltip y este fue asociado al evento onmouseout. Importante: necesitamos una porcion de CSS asociado tambien a este script (se muestra abajo)

         function get(id) {
                return document.getElementById(id);
         }

         Tooltip = function(target, text, event) {
		var thisObj = this;
		if (event == null) {
			get(target).onmouseover = function(e) {thisObj.show(e);};
		} else if (event == "click") {
			get(target).onclick = function(e) {thisObj.show(e);};
		}
		get(target).onmouseout = function(e) {thisObj.hide(e);};
		this.tooltip = div();
		this.tooltip.className = "tooltip";
		this.tooltip.innerHTML = text;
		appendElement(this.tooltip);
		var func = function() {thisObj.hide()};
		setTimeout(func, 10000);
	}

	Tooltip.prototype.show = function(e) {
		var tempX, tempY;
	  if (isIE()) { // grab the x-y pos.s if browser is IE
	    tempX = event.clientX   document.body.scrollLeft;
	    tempY = event.clientY   document.body.scrollTop;
	  } else {  // grab the x-y pos.s if browser is NS
	    tempX = e.pageX;
	    tempY = e.pageY;
	  }  
	  this.tooltip.style.top = tempY   5   "px";
	  this.tooltip.style.left = tempX   5   "px";
		this.tooltip.style.display = "block";
	}
	
	Tooltip.prototype.hide = function() {
		this.tooltip.style.display = "none";
	}

El CSS asociado

.tooltip {
	background-color: #FFFFCC;
	border: 1px solid #DDDDDD;
	padding: 10px;
	z-index:9999;
	-moz-opacity:90%;
	filter:alpha(opacity=90);
	display:none;
	position: absolute;
}