tinyTips es un plugin para jQuery muy ligero el cual nos permite agregar Tooltips a nuestras páginas Web muy fácilmente.
Este tutorial nos muestra como implementar esta funcionalidad en nuestra página Web.
Paso 1 : Incluir los Scripts y CSS
Crearemos un archivo html donde incluiremos los JavaScripts y CSS (el Framework jQuery lo podemos llamar desde Google).
<link rel="stylesheet" type="text/css" media="screen" href="styles/tinyTips.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.tinyTips.js"></script>
Luego inicializaremos los tooltips
<script type="text/javascript">
$(document).ready(function() {
$('a.tTip').tinyTips('title');
$('a.imgTip').tinyTips('<img src="images/demo-image.jpg" /><br />You can even put images or any other markup in the tooltips.');
$('img.tTip').tinyTips('title');
});
</script>
En el código vemos 3 inicializaciones:
- La primera es para todos los enlaces con clase tTip, colocaran el atributo title como Tooltip.
- La segunda crea tooltips personalizados con el código html que se puede apreciar.
- La tercera colocara tooltips a imágenes con clase tTip.
Paso 2 : Generando el código HTML
Ahora crearemos los elementos anteriormente inicializados para generar los tooltips.
<p> <a class="tTip" title="Primer Tooltip">Tooltip jQuery #1</a> <img class="tTip" src="img/demo.jpg" title="Tooltip imagen" /> <a class="imgTip">Tooltip Personalizado</a> </p>
Comentarios