clueTip jQuery Tooltip Plugin
El plugin clueTip te permite mostrar fácilmente la información que desees de un link, botón o cualquier elemento HTML tras pasar el cursor del ratón por encima de ellos. También permite la opción de pulsar para ver dicha información. Si el elemento tiene el atributo title establecido, su contenido se convertirá en el encabezado del clueTip Tooltip.
Para disponer de este maravilloso plugin necesitaremos descargarlo e incluir en el <head> los estilos necesarios, la librería jQuery, el plugin y su llamada.
<link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />
<script src="../jquery.js" type="text/javascript"></script>
<script src="jquery.cluetip.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.jt:eq(0)').cluetip({
cluetipClass: 'jtip',
arrows: true,
dropShadow: false,
hoverIntent: false,
sticky: true,
cursor: 'pointer',
mouseOutClose: true,
closePosition: 'title',
closeText: '<img src="demo/cross.png" alt="close" />'
});
});
</script>
Y luego en el <body> de la página tendremos que crear un link como el siguiente:
<a class="jt" href="contentip.html" rel="contentip.html" title="Lorem Ipsum!">Lorem Ipsum</a>
El archivo que estamos incluyendo dentro de las etiquetas «href» y «rel» puede ser un archivo HTML o PHP con elementos HTML, ya sean imágenes, tablas, contendores, etc.
El plugin tiene innumerables opciones que puedes revisar aquí.
El tooltip es personalizable a través de su hoja de estilos CSS y puedes utilizar varios en la misma página.
Ver el ejemplo en funcionamiento
Puedes ver más ejemplos y su implementación aquí.
Autor
¿Buscas trabajo de programador?
3 respuestas a “clueTip jQuery Tooltip Plugin”
Deja una respuesta
11 artículos que te podrían interesar
Ver más sobre
hola tengo una duda, veras necesito mostrar varios tooltips dentro de una imagen svg (que utilizo como mi mapa). cada tooltip quiero que muestre datos de una tabla que tengo en mysql en mi imagen, logro colocar los tooltips pero no que ilustren mis datos de la bd podrias ayudarme con algun ejemplo o si existe algun otro metodo u opcioin para realizar ese efecto????
Hola buenas tardes,
Prueba de implementar este desarrollo:
http://www.jose-aguilar.com/blog/tooltips-click/
Creo que se puede entender mejor
Saludos
[…] muchos plugins interesantes para crear tooltips como por ejemplo qTip o ClueTip entre otros. En este artículo vamos a ver una forma sencilla de conseguir el efecto de estos […]