27 octubre, 2017 Jose Antonio Vila

Crea fácilmente tooltips gracias a CSS3

Existen una gran cantidad de recursos visualmente muy sencillos pero que pueden llegar a marcar la diferencia, haciendo ver que se cuidan todos los pequeños detalles de nuestra web. En este caso hablamos de los “tooltips”, pequeños globos informativos que pueden aparecer al pasar el ratón por encima de un elemento para dar un poco más de información, para avisar de un error o solamente como pequeño mensaje oculto en nuestro sitio.

Generalmente, estos elementos tan visuales suponen algún que otro problema para implementarlos, porque siempre se cumple aquello que decía “lo difícil está en la sencillez” o algo parecido. Pero el desarrollador Claudio Holanda ha creado gracias al CSS3 un sistema muy sencillo para mostrar estos mensajes. Vamos a verlo.

CSS3 siempre está cuando se le necesita

Como decíamos, Claudio ha creado estas lineas de CSS que nos permiten utilizar los tooltip sin complicaciones gracias a los pseudo-elementos, lo cual es un arma de doble filo.

¿Por qué? Pues porque nos suponen esfuerzo cero para su implementación, pero los pseudo-elementos pueden crear conflictos si existen más en el elemento que estemos trabajando. Además, en etiquetas que se cierran a si mismas como <img> o <hr>, no funcionarán.

De cualquier manera, te contamos como funciona. Lo primero es bajar desde GitHub el fichero CSS de nuestro amigo desarrollador y enlazarlo desde nuestro HTML. Una vez enlazado, toda la dificultad está en añadir dos atributos a nuestro elemento: data-balloon, en el que incluiremos el texto que mostrará nuestro globo, y data-balloon-pos, que hará referencia a donde se mostrará el mensaje.

CSS3 Tooltips

Por ejemplo, tenemos un elemento button en un formulario y queremos que al pasar el puntero nos aparezca un mensaje sobre el botón dándonos las gracias por hacer uso de dicho formulario. En este caso, nuestro código tal que así:

Sencillo, ¿verdad? Pues no tiene mayor misterio su uso. Dos parámetros y listo. Puedes posicionar tu globo a los cuatro lados del elemento (up, left, right y down) e incluir en el mensaje prácticamente cualquier código y de cualquier longitud. Una maravilla.

Si os ha gustado, probadlo y dejadnos vuestras experiencias de uso en los comentarios.

Tagged: , ,

Sobre mí

Jose Antonio Vila Desarrollando webs desde hace más de 10 años. Media vida en agencias y la otra media como freelance, tengo la experiencia de los años y los profesionales de los dos mundos. Jose A. en Google+

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *