Coda Bubble - Crea Tooltips en jQuery | Blogger Recursos

Coda Bubble - Crea Tooltips en jQuery

4/28/2010 01:43:00 p.m. | Publicadas por nenesio | Editar entrada

Coda Bubble - jQuery plugin que te permite agregar información sobre tooltips emergentes, permitir configurar las opciones para sustituir a las imágenes PNG, GIF, o simplemente eliminar burbujas en Internet Explorer.

Instalación :

Añade en la sección de Head de tu template la librería jQuery, bubble.css y jquery.codabubble.js


<link href="http ://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/bubble.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http ://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http ://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="http ://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/jquery.codabubble.js"></script>

Ahora abajo del código anterior agregas el script con el cual configuras el tamaño de las burbujas y dirección de las imágenes (Configuración para 2 burbujas):

<br /><script type="text/javascript"><br />$(function(){<br />   opts = {<br />      distances : [40,40],<br />      leftShifts : [-30,-30],<br />      bubbleTimes : [400,400],<br />      hideDelays : [0,0],<br />      bubbleWidths : [200,200],<br />      bubbleImagesPath : "DIRECCION URL CARPETA DE IMAGENES",<br />      msieFix : true<br />   };<br />   $('.coda_bubble').codaBubble(opts);<br />});<br /></script> <br />

Con el siguiente código generas las burbujas en tu template:

<br /><div class="coda_bubble"><br />        <div><br />            <p class="trigger">Nombre de la Burbuja</p><br />        </div><br />        <div class="bubble_html"><br />           <!-- Aqui el texto u contenido de la burbuja --><br />        </div><br />    </div><br />

Plugin configuración:

distances = Distancias de las burbujas

leftShifts = Posicionar las burbujas a la izquierda

bubbleTimes = Tiempo de duracion de las burbujas

hideDelays = Ocultar las burbujas a cierto tiempo

bubbleWidths = Ancho de burbujas

bubbleImagesPath = Ruta de las imagenes de la burbujas

msieFix = Arreglo para IE para PNG, sustituye PNGS con GIFS si fuera necesario, por defecto: true

msiePop = Si es en "false" elimina las burbujas en el IE. Por defecto: true (activas)

Developer | Carlo Tasca

Tutorial Coda Bubble

Descargar Coda Bubble

Etiquetas: jQuery


<link href="http ://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/bubble.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http ://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http ://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="http ://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/jquery.codabubble.js"></script>

Ahora abajo del código anterior agregas el script con el cual configuras el tamaño de las burbujas y dirección de las imágenes (Configuración para 2 burbujas):

<br /><script type="text/javascript"><br />$(function(){<br />   opts = {<br />      distances : [40,40],<br />      leftShifts : [-30,-30],<br />      bubbleTimes : [400,400],<br />      hideDelays : [0,0],<br />      bubbleWidths : [200,200],<br />      bubbleImagesPath : "DIRECCION URL CARPETA DE IMAGENES",<br />      msieFix : true<br />   };<br />   $('.coda_bubble').codaBubble(opts);<br />});<br /></script> <br />

Con el siguiente código generas las burbujas en tu template:

<br /><div class="coda_bubble"><br />        <div><br />            <p class="trigger">Nombre de la Burbuja</p><br />        </div><br />        <div class="bubble_html"><br />           <!-- Aqui el texto u contenido de la burbuja --><br />        </div><br />    </div><br />