Tooltip con css y jquery
Muchas veces, necesitamos mostrar información a los usuarios de manera no intrusiva y de una forma amigable, e aquí la utilidad de los tooltips. Estos nos detallan información de los campos o inputs que el usuario va a completar, también son usados, para detallar información sobre imágenes . Existen varias formas de hacerlos, con CSS, con librerías como Mootools, Prototype, pero en este caso en particular lo haremos con Jquery y algo de Hoja de estilos (CSS). Para lograr nuestro objetivo utilizaremos dos librerías: jquery.min.js y jqueryTooltip.js.
Como primer paso, incluimos las librerías arriba mensionadas de esta manera:
<script src="jquery.min.js" type="text/javascript"></script> <script src="jqueryTooltip.js" type="text/javascript"></script>
Luego definimos algo de css para nuestro tooltip, el cual, consta de dos partes el título y el detalle, de esta forma:
.tooltipTitle {
font-weight: bold;
color:#FF9900;
}
#tooltip {
position: absolute;
padding: 4px;
color: #FFF;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
display: none;
text-align: left;
background-color: #000;
opacity: 0.8;
-moz-opacity: 0.8;
filter: alpha(opacity=80);
}
El estilo como las librerías js van dentro de los tag <head> y </head>.
Ahora solo nos resta aplicarlo donde necesitemos mostrar información extra al usuario, para tal fin utilizaremos el tag <a> y </a> de esta forma:
<a class="tooltip" title="[!]Importante[/!]Insertar primer y segundo nombre si lo tiene:: con un mínimo de 5 caracteres."><img src="img_info.png" width="15" height="15"/></a>
Notemos los siguientes detalles. En mi caso práctico dentro de las etiquetas <a> y </a> ingrese una imagen para que quede más ilustrativo, como se muestra en la captura. En el atributo title es el lugar donde se ingresa el contenido del tootltip. Entre las etiquetas [!]…[/!], va el título del mismo y para hacer saltos de líneas utilizamos :: De esta manera, con Jquery y un poco de Css, tenemos nuestros tooltips terminados.
También te puede Interesar
¿Disfrutaste esta entrada? Por qué no dejas un comentario abajo y continúas la conversación, o te suscribes a mi feed y obtienes artículos como este enviados a tu lector de feeds.
Comentarios
Muy bueno!!!
Está genial el tema de los [!] y ::, muy buena idea!
Agregado a mi sistema, se agradece el código.
saludos!
hola como estas me encanta tu página quisiera saber si este efecto tooltip con jquery se puede usar en un blog.
saludos
Hola amigo pues intente hacerlo en un blog mio y no logro visualizarlo solo sale el tooltip pero no con el efecto Jquery.
saludos
Muchas graciass! Me sirvió mucho!
El unico problema que tuve es que en mi archivo ya tenia una libreria incluida.. jquery-1.2.1.min.js y al incluir jquery.min.js que es la de acá, parece que me pisa lo anterior que es un acordeón, y no me lo muestra funcionando.. es el acordeon o el tooltip, no sé bien porque.
Un saludo!