SummArg | Cursos y recursos para webmasters

25/01/2012

Tooltips que soportan diferentes elementos en su interior: jQuery clueTip

clueTip es un potente plugin para jQuery que nos permite contar con una amplia variedad de configuraciones y skins diferentes para nuestros tooltips.

Para su utilización primero necesitamos descargarlo y linkearlo, junto con jQuery, a nuestro documento colocando el siguiente código entre etiquetas <head>:

<link rel="stylesheet" href="css/jquery.cluetip.css" />
 <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
 <script type="text/javascript" src="scripts/jquery.cluetip.min.js"></script>

Para insertar un tooltip con un formato totalmente diseñado por nosotros debemos crear el diseño en un archivo aparte y linkearlo a nuestro documento de la siguiente forma:

<a href="tooltip1.html" rel="tooltip1.html">Delete</a>

El archivo tooltip1.html puede contener:

<div>
 Are you sure you want to delete all of your account details?
 <br />
 <a href="#"><div class="button">Delete</div></a>
 </div>

Y al final de nuestro documento insertamos el script

<script>
 $('a.dt:eq(0)').cluetip({
 cluetipClass: 'rounded',
 activation: 'click',
 multiple:true,
 arrows: true,
 dropShadow: false,
 hoverIntent: false,
 sticky: true,
 mouseOutClose: true,
 closePosition: 'bottom',
 positionBy: 'bottomTop',
 showTitle: false,
 closeText: '<div class="button">Cancel</div>'
 });
 </script>

ClueTip trae 3 skins y la posibilidad de setear diferentes valores para: el modo de activación, el modo de cierre, con o sin sombra, con o sin flechas, insertar imágenes y elementos html o sólo texto, posición hacia donde se despliega el tooltip, delay al cerrar el tooltip, etc. Además está muy bien documentado y tiene muchos ejemplos para que sea aún mas fácil comenzar a usar la herramienta.

clueTip

Dejar un comentario