Cmo crear tooltips

modernos solamente con CSS

Fecha de publicacin
12 de febrero de 2016

ETIQUETAS POPULARES

Los tooltips son los "globos de ayuda" que aparecen al posicionar el ratn sobre
un determinado elemento. ltimamente se estn poniendo de moda en el
diseo web porque permiten aadir mucha informacin til a un sitio o
aplicacin web sin tener que "ensuciar" demasiado la interfaz.
Siempre ha sido posible crear tooltips solamente con CSS, sin necesidad de
utilizar ninguna librera JavaScript. Sin embargo, antes de CSS 3 este tipo de
tooltips eran muy rudimentarios y por eso muchos diseadores recurran a
soluciones basadas en JavaScript. En este artculo vamos a hablar sobre Hint.css
(http://kushagragour.in/lab/hint/) la librera para crear tooltips modernos
exclusivamente con CSS.

Instalacin
Puedes descargar esta librera usando varias alternativas:
Descargar el archivo CSS minimizado desde el repositorio del proyecto
(https://github.com/chinchang/hint.css).
Usar Bower: bower install hint.css
Usar npm: npm install --save hint.css
Enlazar directamente el archivo de alguna CDN: http://www.jsdelivr.com
/#!hint.css

o https://cdnjs.com/libraries/hint.css

Una vez descargado, no olvides enlazar el archivo hint.min.css o aadirlo a la

tarea automatizada que crea el archivo con los estilos de tu sitio o aplicacin.
La librera hint.css aade 1.5 KB de peso a tu sitio web (una vez minimizado y
comprimido). Puede parecer mucho para una simple librera de tooltips, pero
como vers ms adelante, tiene muchas opciones de conguracin. Adems,
cualquier librera JavaScript avanzada tendr un tamao similar o superior.

Uso bsico
El siguiente ejemplo muestra cmo crear un tooltip sencillo:

composer (/tutoriales
/composer/)
css (/tutoriales/css/)
diseo (/tutoriales/dise%C3
%B1o/)
html (/tutoriales/html/)
javascript (/tutoriales
/javascript/)
php (/tutoriales/php/)
programacin (/tutoriales
/programaci%C3%B3n/)
sistemas (/tutoriales
/sistemas/)
symfony (/tutoriales
/symfony/)

SUSCRBETE GRATIS
Todos los tutoriales
(/rss/tutoriales/todos.xml)
RSS

Tutoriales de diseo
(/rss/tutoriales/diseno.xml)
RSS

Tutoriales de
programacin (/rss/tutoriales
/programacion.xml)
RSS

<span class="hint--top" data-hint="Lorem Ipsum Dolor Sit Amet">

pasa el ratn por encima
</span>

En primer lugar, encierra el texto visible con un elemento HTML (por ejemplo un
<span> ) donde se congura el tooltip. Despus, aade la clase hint--top
(cuidado porque tiene dos guiones medios) para que la librera cree el tooltip.
Por ltimo, aade el texto que se ver en el globo de ayuda dentro de un
atributo llamado data-hint .
Si ves el ejemplo anterior en cualquier navegador, este ser el resultado:

Opciones de configuracin
La librera hint.css dispone de varias opciones de conguracin para crear
tooltips de todo tipo. Estas opciones se activan aadiendo ms clases CSS al
elemento que muestra el tooltip.

Posicin
El "globo de ayuda" del tooltip se puede mostrar en ocho posiciones diferentes,
cada una de las cuales se corresponde con una de estas clases CSS:
hint--top-right
hint--top
hint--top-left
hint--bottom-right
hint--bottom
hint--bottom-left
hint--right
hint--left

En la prctica, as se ve cada posicin en un navegador:

Colores y estilos
Los tooltips se pueden mostrar en cuatro colores diferentes, que se
corresponden con los cuatro estados tpicos de las libreras CSS ms populares,
como por ejemplo Bootstrap:
hint--error
hint--info
hint--warning
hint--success

De esta manera, para convertir el tooltip anterior en un mensaje de error, aade

lo siguiente:
<span class="hint--bottom hint--error" data-hint="Lorem Ipsum Dolor Sit Amet"
>
pasa el ratn por encima
</span>

Por otra parte, tooltip muestra por defecto bordes rectangulares. Si preeres
bordes redondeados, aade la clase hint--rounded .

Animaciones
El comportamiento por defecto hace que el "globo de ayuda" que estaba oculto
aparezca con una pequea animacin. Este comportamiento tambin se puede
modicar segn tus necesidades:

hint--always ,

para mostrar el tooltip siempre visible, sin que haya que pasar

el ratn por encima.

hint--no-animate ,

para mostrar el tooltip inmediatamente sin esperar a la

pequea animacin de entrada.

hint--bounce ,

para modicar la animacin inicial y hacer que el tooltip haga

un pequeo rebote.
En la siguiente imagen puedes ver el comportamiento de cada tipo de
animacin:

Recursos tiles
Sitio web ocial de hint.css (http://kushagragour.in/lab/hint/)
Repositorio ocial del proyecto en GitHub (https://github.com/chinchang
/hint.css)

Sobre el autor
Este artculo ha sido publicado por Javier Eguiluz (https://github.com
/javiereguiluz).

Comentarios

2 Comentarios

LibrosWeb

Compartir

Recomendar 1

Acceder

Ordenar por los mejores

Join the discussion

sabe

hace 3 das

good

Responder Compartir

Eugenio Avila

hace un mes

Muy interesante este articulo. Gracias

Responder Compartir

TAMBIN EN LIBROSWEB

Cmo solucionar los errores habituales de

Composer
Un comentario hace 4 meses

Cmo instalar Composer globalmente

Un comentario hace 4 meses

I'm root Gracias muy funcional saludos!!

Alarmado Cuando no me deja instalar

ningun plugin que puede ser lo que este

pasando

Cmo organizar bien un proyecto Silex

El proceso de rediseo de LibrosWeb.es

2 comentarios hace 4 meses

Un comentario hace 4 meses

Javier Eguiluz Gracias por avisar! Acabo

Evert Cruz Reyes Hola que tal, muy buena

de corregir esos enlaces.

tu pagina, y gracias por compartir esta

informacin, no tengo mucha experiencia y

2006-2016 LibrosWeb.es Contacto (/sitio/contacto)

(/sitio/condiciones)

Privacidad (/sitio/privacidad)

Novedades (https://plus.google.com/+librosweb)

Condiciones

3.426

das online