comparte el articulo 

Tooltips para sitios web móviles

Actualizado el 10/10/2014 < > 0 Comentarios

Resumen: Un complemento sencillo como el tooltip permitirá añadir una gran experiencia de usuario a tu sitio móvil, aquí te explicamos cómo diseñarlos.

Los tooltips son un cojunto de elementos bastante sencillos, los cuales han tomado una relevancia significativa en el diseño web, debido al importante papel que juegan en el tema de la experiencia del usuario. 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. Pero al momento de trabajar con sitios móviles, muchas de las prácticas comunes se tienen que desechar por no funcionar adecuadamente, es por ello que muchos se preguntan ¿Cuáles son las mejores prácticas para mostrar tooltips en sitios web para móviles?

¿Cómo mostrarlo?

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

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.

Publicado el 10/10/2014, última actualización 10/10/2014.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras