SummArg | Cursos y recursos para webmasters

18/05/2011

Tooltipsy, Tooltips con jQuery

En pocas líneas pueden insertar tooltips elegantes gracias a este plugin para jQuery facil de instalar. El primer paso es descargar Tooltipsy para luego linkearlo a nuestro documento. Pueden descargar el plugin de tooltipsy.com y luego entre etiquetas <head> insertamos:

<script type="text/javascript" src="/ruta/jquery.js"></script>
<script type="text/javascript" src="/ruta/tooltipsy.min.js"></script>

El CSS se puede personalizar para adecuarse al estilo de nuestro website.

.tooltipsy
{
    padding: 10px;
    max-width: 200px;
    color: #303030;
    background-color: #f5f5b5;
    border: 1px solid #deca7e;
}

Finalmente, insertamos el recurso como link con una clase de nuestra elección e insertamos el texto del tooltip dentro del atributo title. Antes del cierre de la etiqueta <body> indicamos la clase que activará Tooltipsy.

<a class="hastip" title="Show me">
<a class="hastip" title="Me too">
<script type="text/javascript">
$('.hastip').tooltipsy();
</script>

En el website del recurso pueden ver ejemplos de configuración y un demo del mismo.

Dejar un comentario