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.
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.
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í:
<button data-balloon="¡Gracias por escribirnos!" data-balloon-pos="up">Envia</button>
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.
Con el paso de los años, CSS se está haciendo cada vez más potente y… Leer más
Al igual que un artista mejora su técnica con la práctica constante, un programador aprende… Leer más
WordPress es, probablemente, el mayor CMS para la creación de páginas web en el mundo.… Leer más
Guste más o menos, Wordpress está detrás de un alto porcentaje de las webs activas… Leer más
Hoy, la gente de Xataka ha publicado un artículo muy interesante hablando de Estonia. Parece… Leer más
Aunque todos lo conocemos, seguro que hay algún despistado al que lo de Google reCAPTCHA… Leer más
Ver Comentarios
Muchas gracias por el post, necesitaba un artículo como este para poder actualizar mi web y hacerla más personalizada.
Por cierto muy buenos articulos todos! Trabajáis temas muy muy interesantes
Gracias