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;
}
Categories: General

Rodrigo Asensio

Apasionado por la tecnología

2 Comments

Julio · July 13, 2012 at 11:57 am

Estoy trabajando con dreamweaver e insertando tooltips. Después de haber insertado 5 sin problema el sexto no me lo reconoce y aparece el siguiente comentario:

Spry.Widget.TooltipERR: The elements(s) “#sprytrigger6” do not exist in the page

he revisado el codigo y está igual a los anteriores por tal razón no entiendo lo que pasa
se agradece desde ya la ayuda

Rodrigo Asensio · July 13, 2012 at 1:33 pm

Julio, este es un plugin muy viejo y evidentemente estas usando Adobe Spry el cual tambien lo es. Yo hoy en dia estoy usando QTip http://craigsworks.com/projects/qtip/ en conjuncion con JQuery. Es super flexible y funciona en todos los browsers.

saludos

Leave a Reply

Your email address will not be published. Required fields are marked *