Ejemplos jQuery

Como hacer un tooltip con jQuery

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (1 votos, promedio: 5,00 de 5)
Cargando...

Guía completa con código de ejemplo y descarga sobre cómo hacer un tooltip jQuery para usar en tu página web.

Los tooltips son un cojunto de elementos bastante sencillos. Por lo general, estos se utilizan como globos de sugerencias para presentar una pequeña cantidad de texto oculto, algunas veces acompañado de elementos complementarios como imágenes y enlaces, cuya principal función consiste en dar información explicativa, descriptiva o simplemente consejos para el usuario.

En un diseño habitual, los tooltips generalmente aparece al mover el cursor sobre un elemento u objetivo especial, y en algunos casos al dar clic sobre ellos.

ejemplo de como hacer un tooltip

¿Cómo mostrar un tooltip?

Al trabajar con sitios móviles el espacio es algo vital, no cuentas con mucho así que debes aprovecharlo de la mejor manera, es por ello que es recomendable utilizar los menos iconos posibles.

Si tu página web para escritorio, cuenta con muchísimos iconos que se encargan de mostrar los tooltips, para móvil tienes que desechar esta idea y buscar al alternativas, como por ejemplo utilizar un texto con subrayado punteado para dejar en claro al usuario que puede interactuar con él y que no es un enlace.

Aplicar el tooltip directamente en el texto en sí, no sólo te hará ahorrar espacio, sino que también será más fácil de usar. Sin embargo, si tu sitio va a contar con pocos tooltips por página, los iconos siguen siendo una opción para tu diseño.

¿Cómo interactuar?

Una vez mostrado el tooltip, es recomendable mostrar algún tipo de mensaje con letras pequeñas, que le indique al usuario cómo poder cerrarlo.

Esto es de especial relevancia en sitios móviles, ya que el tooltip tendrá un comportamiento distinto en sitios manejados por eventos touch al que tiene en sitios basados en cursor.

Tenga en cuenta que al utilizar dispositivos de escritorio o basados en cursor, el tooltip se ocultará de nuevo con el evento mouse-out, pero esto no se puede hacer en dispositivos táctiles, así que nos debemos asegurar de que los tooltips se puedan cerrar con un evento de clic.

Características

Los tooltips que diseñemos para nuestros sitios web móviles debe ser responsivo, es decir, debemos basarnos en el ancho de la pantalla para mostrar el elemento oculto, y en caso de ser necesario ir reduciendo su tamaño en base al entorno.

Además, al momento de abrir el tooltip, se debe escoger la mejor posición visible en base a la orientación del dispositivo.

Para que el tooltip sea amigable con ambientes móviles, debe aparecer cuando se pulsa un elemento y desaparecer cuando se golpea en el tooltip. De igual manera, debe ser capaz de recibir formato mediante etiquetas HTML y CSS.

CSS

#tooltip_lawebera_lawebera{
    text-align: center;
    color: #fff;
    background: #111;
    position: absolute;
    z-index: 100;
    padding: 15px;
}

#tooltip_lawebera:after{
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #111;
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
}

#tooltip_lawebera.superior:after{
    border-top-color: transparent;
    border-bottom: 10px solid #111;
    top: -20px;
    bottom: auto;
}

#tooltip_lawebera.izquierda:after{
    left: 10px;
    margin: 0;
}

#tooltip_lawebera.derecha:after{
    right: 10px;
    left: auto;
    margin: 0;
}

JavaScript

$( function() {
    var objetivos = $( '[rel~=tooltip]' ),
    objetivo  = false,
    tooltip   = false,
    title     = false;

    objetivos.bind( 'mouseenter', function(){
        objetivo  = $( this );
        tip     = objetivo.attr( 'title' );
        tooltip = $( '



<div id="tooltip_lawebera"></div>




' );

        if( !tip || tip == '' ){
            return false;
        }

        objetivo.removeAttr( 'title' );
        tooltip.css( 'opacity', 0 ).html( tip ).appendTo( 'body' );

        var inicializar_tooltip = function(){
            if( $( window ).width() < tooltip.outerWidth() * 1.5 )
                tooltip.css( 'max-width', $( window ).width() / 2 );
            else
                tooltip.css( 'max-width', 340 );

            var pos_izquierda = objetivo.offset().left + ( objetivo.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
            pos_superior  = objetivo.offset().top - tooltip.outerHeight() - 20;

            if( pos_izquierda < 0 ){ pos_izquierda = objetivo.offset().left + objetivo.outerWidth() / 2 - 20; tooltip.addClass( 'izquierda' ); } else tooltip.removeClass( 'izquierda' ); if( pos_izquierda + tooltip.outerWidth() > $( window ).width() ){
                pos_izquierda = objetivo.offset().left - tooltip.outerWidth() + objetivo.outerWidth() / 2 + 20;
                tooltip.addClass( 'derecha' );
            } else {
                tooltip.removeClass( 'derecha' );
            }

            if( pos_superior < 0 ){
                var pos_superior  = objetivo.offset().top + objetivo.outerHeight();
                tooltip.addClass( 'superior' );
            } else {
                tooltip.removeClass( 'superior' );
            }

            tooltip.css( { left: pos_izquierda, top: pos_superior } ).animate( { top: '+=10', opacity: 1 }, 50 );
        };

        inicializar_tooltip();

        $( window ).resize( inicializar_tooltip );

        var remover_tooltip = function(){
            tooltip.animate( { top: '-=10', opacity: 0 }, 50, function(){
                $( this ).remove();
            });

            objetivo.attr( 'title', tip );
        };

        objetivo.bind( 'mouseleave', remover_tooltip );
        tooltip.bind( 'click', remover_tooltip );
    });
});

HTML

<span title="¡La Webera!" rel="tooltip">La Webera</span>

Implementación

Puedes ver el ejemplo funcionando o descargar el código a través de los siguientes botones:

Para que el anterior código funcione, se debe de implementar de la siguiente manera.

Lo primero que debemos hacer, es colocar el código CSS en cualquier lugar de la cabecera HTML de nuestro archivo utilizando la etiqueta “style” o bien creando un archivo nuevo con extensión “.css” el cual podemos mandar llamar dentro de la misma cabecera.

El código JavaScript debe insertarse en un archivo con extensión “.js” o, al igual que el código CSS, dentro del mismo archivo con el resto del código, este puede ir en la cabecera o en la parte inferior del código si se desea.

Para que nuestro código JavaScript funcione, debemos asegurarnos de que contamos con la librería jQuery en el proyecto y esta también se encuentra incluida en el código.

Finalmente para especificar los elementos que contendrán el tooltip, es necesario agregar el atributo “rel” con el valor “tooltip”, acompañado por el atributo “title” cuyo valor especificará el texto que mostrará el tooltip.

El valor del atributo “title” puede contener etiquetas HTML de estilo como “strong” o “i” con el fin de dar formato al texto que se muestra.

Una respuesta

  1. Hola!! Excelente las publicaciones de Jquery Mobile pero no he visto algo con trabajar con Base de datos como un CRUD con este framework
    Gracias Daniel, Felicitaciones por la consistencia que le das a tus trabajos!

Deja una respuesta