Como hacer un tooltip con jQuery

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.

¿Cómo mostrar un tooltip?

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.

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.

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.