Tutorial: Tooltips con contenido dinámico en Jquery y PHP (sin plugins)

Os traigo hoy una de esas pequeñas funcionalidades que implementas en tus programas sin la intención de buscar ningún plugin, y que realmente, no necesitan de más añadidos, de manera que evitas la inclusión de nuevos añadidos que acaban recargando tu página web y aumentando el tiempo de descarga.

Lo que veremos es la creación de un tooltip, un mensaje emergente en un cuadro, que nos muestra información al pasar el cursor del ratón por encima de un elemento. También, veremos por encima como hacer llamadas AJAX a un fichero PHP que a su vez consulta a una base de datos por ODBC, que en mi caso es un truño de BBDD de ACCESS. muy a mi pesar. Este PHP devuelve el HTML formateado que acabamos mostrando en el tooltip. Es un proceso bastante fácil fácil, y rico rico, y más aún en jQuery.
Lo primero que debemos hacer es crear nuestro tooltip, que será una caja no visible en medio de nuestro código HTML. Con la ayuda de CSS la estilizaremos un poco y la dejaremos, como ya he dicho, invisible en primera instancia:

La caja:


#tooltip { visibility:hidden; position:fixed; background-color:#FF9; border:1px solid #000; width:auto; height:auto; padding:5px; }

Ya es cosa de cada uno si se le quiere añadir a la caja por ejemplo sombras, o cantos biselados (redondeados).
Ahora, necesitamos un trigger, un elemento sobre el que mostrar el tooltip, y en mi caso, será un enlace, pero bien podría ser cualquier otro elemento de HTML. Por lo tanto, introduciremos los enlaces con la clase .elemento_tooltip y como añadido, he usado los atributos href para indicar un número de producto (ID) que más tarde enviaré por AJAX a PHP para consultar en la base de datos y poder mostrar la información relacionada.  Veamos como quedarían esos enlaces:

ID Producto 8801

ID Producto 8802

ID Producto 8802

Como véis, no tiene mucho misterio. En este caso hay tres, pero podrían ser tantos como quisieramos, como en mi caso, que se generan dinámicamente a traves de PHP, un dato importante para lo que luego veremos en jQuery.
Resumiendo lo que tenemos hasta ahora: Una caja invisible en primera instancia, que servirá para mostrar la información y que se llama tooltip, y unos enlaces con clase .elemento_tooltip que servirán para que, al pasar el cursor por encima, podamos consultar el ID que tienen por href en la BBDD antes mencionada, todo ello a través de jQuery con la ayuda de PHP.

Vamos ahora a lo más interesante de este tutorial, la parte del script en jQuery. Lo primero que tenemos que saber es que tendremos que 'bindear' los eventos de entrada y de salida del cursor del ratón al area del enlace. Para ello podriamos usar la funcion .bind('mouseenter', fn) o .bind('mouseleave', fn), o bien usando el método abreviado .mouseenter(fn).mouseleave(fn), pero nos encontrariamos con un problema, que a priori no ocurriría si fuese una página estática. Como ya he mencionado antes, los enlaces los genero dinámicamente cada vez que alguien introduce o da de alta un nuevo producto, por lo tanto no podría bindear los eventos a todos los elementos si aún no están presentes. Para eso jQuery cuenta con una muy maravillosa función que nos resuelve la vida en estos casos, y que funciona muy bien. Se llama .live() y trabaja igual que .bind(fn) pero con esa pecualiaridad: la de adjudicar eventos a clases y ID's que no formaban parte de la página en el momento de solicitarla.

Una vez acalarado esto, vamos con el código:

//Cuando el DOM esté descargado por completo:
$(document).ready(function(){
	//Enlazamos el evento mouseenter (el cursor se 		posicione encima del elemento):
	$(".elemento_tooltip").live('mouseenter', function(e){

	// Con esto evitamos que los enlaces se comporten como tal y den error al intentar navegar al href que tienen (un (ID)
	e.preventDefault();

	// Sacamos la posición de los enlaces en la página, par a posicionar el tooltip después
	var a_posicion = $(this).offset();

	//Posiciones el tooltip, con el mismo left, y un poco 	por debajo del enlace.
	$("#tooltip").css({
		"top":a_posicion.top + 20,
		"left:"a_posicion.left
	});

	//Cogemos el ID almacenado en el atributo href
	var ID_href = $(this).attr('href');

	// Preparamos los datos para enviar por POST o GET a PHP mediante la funcion AJAX de Jquery
	var Data = "id=" + ID_href

	//Hacemos visible el tooltip, y mostramos un texto informativo mientras hacemos la consulta
	$("#tooltip")..HTML("Consultando datos...").fadeOut("fast", function(){ $("#tooltip").css("visibility", "visible"); }).fadeIn("fast");

	//Generamos la llamada AJAX
	$.ajax({
		//El archivo PHP que recibirá los datos
		url:"consultar.php",
		//Los datos a enviar
		data:Data,
		//Tipo de llamada (GET o POST).
		type:"GET",
		//Informamos de que la respuesta recibida será 		código HTML
		dataType:"html",
		//Cuando tengamos los datos, rellenaremos el tooltip con estos
		success:function(HTML_devuelto){
			$("#tooltip").HTML(HTML_devuelto);
		}
	});
	return false;

	//Ahora cerramos la llamada, y añadimos el evento mouseleave, para cuando el ratón no esté encima del enlace
}).live('mouseleave', function(){
		$("#tooltip").fadeOut("fast");
	});
});

Como véis realizar todo el proceso es bastante fácil, y realizar una llamada a PHP mediante AJAX bastante más, con las ventajas de no tener que  recargar la página para enviar las consultas, haciendo todo nuestro site mucho más dinámico. En un futuro trataremos el tema de conexión a una base de datos ACCESS por ODBC y qué hacemos con la respueta. Si tenéis cualquier pregunta, no dudéis preguntar en los comentarios... y si es una mejora o crítica, más aún 🙂

En próximas entradas, trataremos el tema de formatear el tooltip e insertarle imagenes de información, darle un aspecto más llamativo e incluso que parezca un globo de conversación.

  • marmota

    ¿qué hace el zanahorio en la cabecera?

  • Pingback: Maqetta: RIA en HTML5, open source & IBM « 17 pulgadas – De geeks, para geeks.()

  • Pingback: Calcular ancho del navegador con jQuery para crear cajas « 17 pulgadas – De geeks, para geeks.()

  • Onesimo182

    Saludos yo quiero motrar en un tooltip una tabla con unos datos de la base de datos los cuales obtengo mediante el id de la tabla es casi lo mismo que esto creo, podrias poner la implementacion y el contenido de la pgia consulta.php,  o me lo puedes manar a onesimo182@gmail.com gracias 🙂

  • Root_12_

    eres el mejor
     

  • KIl

    genial, realmente andaba buscando algo parecido desde hace unos dias….y esto me ha servido de MUCHO.

  • Daván Palma

    Podrían compartir el código completo por favor.
    No e logrado implementarlo.
    Gracias de antemano

  • I accidentally stumbled upon your blog. I am new to this blogging world and I find your

    posts very interesting, honest, and compelling. Keep it up and look to the Lord as always. I

    have had many storms in my recent life, one I am going through right now that I am not sure

    how I am going to handle it, but I keep trying to praise Him in this storm. Thanks for the

    blog.

  • ravendarkash

    me gusto mucha la simplicidad de tu codigo pero tenia un par de errores (que algunos corregi) y por alguna extraña razon no me corre… agradezco que allas tomado la molestia de compartir tus avances y de acerlo todo dinamico

    • tonijota

      Gracias raven! Si puedo ayudarte con ese código coméntamelo y lo miramos 🙂

  • Richard

    Hola, muy buen post, mi consulta es, cuando el servidor me devuelve los datos para mostrar en el tooltip, como le digo que datos son o como los puedo manipular para mostrarlos por orden y los tipos de datos específicos que necesito?

    por ejemplo estoy desarrollando una pagina web de productos, y cada imagen de un producto quiero que muestre un tooltip con información de ese producto, información que tengo en una base de datos en mi servidor o hosting, entonces como puedo mandar a llamar a esos datos específicos y mostrarlos en el tooltip, con variables las que les doy el valor de la petición al servidor, pero esa petición como la manipulo para manipular los datos que quiero, espero me puedas entender y ayudar, saludos.