Estaba buscando como implementar un tooltips que fuera muy fácil y liviano; el sitio DigitalInfeno encontré como hacerlo con jQuery.
TinyTips es un liviano plugin jQuery para crear tooltips, esos cuadro tipo burbujas que en este caso, cuando posamos el puntero el mouse sobre un enlace, muestra un texto y/o una imagen.
Implementar un tooltips con TinyTips
Todo el código necesario para implwmentar tooltips es el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>tinyTips 1.0</title>
<link rel="stylesheet" type="text/css" media="screen" href="/path/to/yourStyleSheet.css" />
<!-- ***enlace a jQuery y TinyTIps*** -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/jquery.tinyTips.js"></script>
<!--- ***código Javascript que implmenta la funcionalidad *** -->
<script type="text/javascript">
$(document).ready(function() {
$('a.tTip').tinyTips('title');
});
</script>
</head>
<body>
<div id="global_wrapper">
<!-- ***código HTML del tooltip*** -->
<h1>Testing tinyTips</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a href="#" title="This tooltip is using the title of this anchor tag.">Aenean ut nunc metus</a>, gravida tincidunt libero.
Proin molestie risus at odio luctus condimentum. Sed molestie bibendum orci a faucibus. Vivamus vel lorem ut augue laoreet cursus.
Maecenas vestibulum nibh non nibh viverra posuere. Sed <a href="#" title="This one is also using the title.">tristique eleifend</a> elit sit amet varius.</p>
</div>
</body>
</html>Es simplemente enlazar los archivos Javascript en la sección HEAD del HTML de la página, agregar el código Javascript y agregar la clase Title en los enlaces que queremos mostrar el tooltips. Se trata de anchor <a> y dentro de la clase title, va el contenido a mostrar dentro del tooltips.
TinyTips
Sitio/demo/descargar: www.digitalinferno.net/blog/jquery-plugin-tinytips-1-0
Suscribirse para recibir las últimas actualizaciones de Pixelco.
Comentarios 1