TipTip jQuery Plugin

Name: TipTip jQuery Plugin
Brand: Jose Aguilar
SKU: joseaguilarblog-3540
Availability: InStock
Rating: 5 (3 reviews)

TipTip es un plugin jQuery que nos cambia los titles de los elementos para mostrarlos de forma personalizada al estilo tooltip.

TipTip utiliza el atributo title para mostrar el contenido del tooltip al igual que lo hace un navegador pero con un estilo personalizable. Sin embargo, el título va a ser copiado y luego se retira del elemento cuando se utiliza TipTip para que la información depositada en el title del elemento se muestre con el estilo invocado.

Todos los elementos HTML que dispongan del atributo «title» podrán disponer de esta funcionalidad. Por ejemplo, los links y imágenes.

Para utilizarlo en nuestra página Web deberemos descargar el plugin e incorporarlo en vuestro servidor, añadirlo en el <head> junto con la librería jQuery y su llamada, además de los estilos necesarios.

<link rel="stylesheet" href="tipTip.css" type="text/css" />
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="jquery.tipTip.js"></script>
<script type="text/javascript">
$(function(){
    $(".tiptip").tipTip();
});
</script>

Ahora todos los elementos que dispongan de title y tengan como class=»tiptip» se les aparecerá un tooltip con estilo.

Es totalmente personalizable utilizando CSS.

TipTip ha sido probado (y funciona) en: IE7 y IE8, Firefox, Safari, Opera y Chrome.

Opciones:

activation: string («hover» by default) – jQuery method TipTip is activated with. Can be set to: «hover», «focus» or «click».
keepAlive: true of false (false by default) – When set to true the TipTip will only fadeout when you hover over the actual TipTip and then hover off of it.
maxWidth: string («200px» by default) – CSS max-width property for the TipTip element. This is a string so you can apply a percentage rule or ‘auto’.
edgeOffset: number (3 by default) – Distances the TipTip popup from the element with TipTip applied to it by the number of pixels specified.
defaultPosition: string («bottom» by default) – Default orientation TipTip should show up as. You can set it to: «top», «bottom», «left» or «right».
delay: number (400 by default) – Number of milliseconds to delay before showing the TipTip popup after you mouseover an element with TipTip applied to it.
fadeIn: number (200 by default) – Speed at which the TipTip popup will fade into view.
fadeOut: number (200 by default) – Speed at which the TipTip popup will fade out of view.
attribute: string («title» by default) – HTML attribute that TipTip should pull it’s content from.
content: string (false by default) – HTML or String to use as the content for TipTip. Will overwrite content from any HTML attribute.
enter: callback function – Custom function that is run each time you mouseover an element with TipTip applied to it.
exit: callback function – Custom function that is run each time you mouseout of an element with TipTip applied to it.