Un tooltip es una herramienta de ayuda visual, que funciona al situar el cursor sobre algún elemento gráfico o texto, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.
Los tooltips son una variación de los globos de ayuda y es un complemento muy usado en programación y diseño, dado que proporcionan información adicional sin necesidad de que el usuario la solicite de forma activa.
En este artículo os explico cómo realizar varios tooltips utilizando sólamente CSS y HTML.
Índice del artículo
Ejemplos de tooltips animados
A continuación podéis probar los siguientes tooltips animados en la página de CodePen, sólo tenéis que pasar el cursor sobre el icono o enlace de texto para ver su efecto. Cambiar el CSS para que quede mejor en vuestro sitio web, ya que parte del código está puesto para que quede bien en los ejemplos.
Ver ejemplos en CdePen
Código para implementar estos tooltips animados
Para realizar estos tooltips, primero descargamos los archivos, el enlace se encuentra más abajo. Dentro del archivo descargado encontramos tres carpetas. Abrimos la carpeta css que contiene dentro los estilos de todos los tooltips por separado y el archivo tooltips.css que contiene todos ellos. Copiamos los estilos que necesitemos y lo pegamos dentro de nuestro archivo de estilos principal CSS.
Para los iconos de algunos ejemplos he utilizado Font Awesome la versión 4. Podéis utilizar el siguiente enlace para incluirlo en vuestro sitio web preferiblemente desde el archivo functions.php del Child Theme si utilizáis WordPress.
https://use.fontawesome.com/13bf04a6da.js
Si queréis utilizar las mismas fuentes para los textos, utilizar los siguientes enlaces e incluirlos en la hoja de estilos de vuestra web.
https://fonts.googleapis.com/css?family=Kalam https://fonts.googleapis.com/css?family=Bangers https://fonts.googleapis.com/css?family=Satisfy https://fonts.googleapis.com/css?family=Kalam:700,400
Ir a los enlaces y copiar los códigos, o enlazarlos de la siguiente manera, por poner un ejemplo.
@import url(https://fonts.googleapis.com/css?family=Kalam);
Ahora abrimos la carpeta img y copiamos y pegamos todas las imágenes que vayamos a utilizar a nuestra carpeta donde tenemos alojadas el resto de imágenes de nuestro sitio web. Luego cambiar en el HTML la ruta de estas imágenes por su localización correcta.
Por último, dentro de la carpeta demo encontramos el código HTML de todos los tooltips. Copiamos aquello que nos interese y lo pegamos en la página donde vayamos a poner el tooltip. Por ejemplo, si vamos a poner el Tooltip Bloated, tendremos que poner el siguiente código.
<div class="dummy dummy-menu dummy-menu-icons"> <ul> <li><a class="tooltipbloated" href="#"><i style="color:#c39f76;" class="fa fa-fw fa-car"></i><span class="tooltipbloated-content">¡Hola! Soy un <span style="color:#c39f76">Tooltip</span> que sale del icono de un coche.</span></a></li> <li><a class="tooltipbloated" href="#"><i style="color:#c39f76;" class="fa fa-fw fa-bicycle"></i><span class="tooltipbloated-content">¡Hola! Soy un <span style="color:#c39f76">Tooltip</span> que sale del icono de una bicicleta.</span></a></li> <li><a class="tooltipbloated" href="#"><i style="color:#c39f76;" class="fa fa-fw fa-plane"></i><span class="tooltipbloated-content">¡Hola! Soy un <span style="color:#c39f76">Tooltip</span> que sale del icono de un avión.</span></a></li> <li><a class="tooltipbloated" href="#"><i style="color:#c39f76;" class="fa fa-fw fa-bus"></i><span class="tooltipbloated-content">¡Hola! Soy un <span style="color:#c39f76">Tooltip</span> que sale del icono de un autobús.</span></a></li> </ul> </div>
Como veis, es bastante sencillo de aplicar estos tooltips. Podéis cambiar algunos iconos utilizados por otros que os gusten más, los tenéis en la web de Font Awesome. A continuación os dejo el enlace de descarga con todos los archivos.
!Si te gustó este artículo, no dejes de visitar el blog o suscribirte a la newsletter! | Iborra Web Design
