qTip jQuery Plugin

Qtip es un plugin jQuery para mostrar información extra sobre links, lo que se suele denominar como tooltips.

Ha sido construido a partir de cero para ser fácil de usar, sin embargo, es rico en características, Qtip proporciona una infinidad de opciones, como esquinas redondedas, tamaño, color del texto, fondo, etc.

Implementarlo en tu Web es muy sencillo, tan solo tienes que descargar el plugin junto con la librería jQuery y la llamada al plugin con las opciones que necesites:

<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".example").qtip({
       content: 'Contenido del tooltip!',
       position: {
          corner: {
             target: 'topMiddle',
             tooltip: 'bottomLeft'
          }
       },
       style: { 
          width: 200,
          padding: 5,
          background: '#A2D959',
          color: 'white',
          textAlign: 'center',
          border: {
             width: 7,
             radius: 5,
             color: '#A2D959'
          },
          tip: 'bottomLeft'
       }
    });
});
</script>

Y luego en <body> de la página tendremos el link con class=”example”:

<a href="#" class="example">Hover over me to see an example</a>

que tras pasar el botón por encima aparecerá el tooltip.

Ver más documentación

Ver ejemplo en funcionamiento

Ver ejemplo tooltip by click

 

Autor
Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (3 votos, promedio: 5,00 de 5)
Cargando…
Comparte en las redes sociales

2 respuestas a “qTip jQuery Plugin”

  1. Dante dice:

    buena pagina primo me ayuda bastante sigue adelante y buenos deseos

  2. […] muchos plugins interesantes para crear tooltips como por ejemplo qTip o ClueTip entre otros. En este artículo vamos a ver una forma sencilla de conseguir el efecto de […]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre