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 - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador 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

3 respuestas a “qTip jQuery Plugin”

  1. […] 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 […]

  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 […]

  3. Dante dice:

    buena pagina primo me ayuda bastante sigue adelante y buenos deseos

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