Ligero y poderoso tooltip con CSS

Seguramente alguna vez habrás notado componentes de una página web interactúan con el puntero del mouse

Seguramente alguna vez habrás notado componentes de una página web interactúan con el puntero del mouse, mostrando un pequeño globo informativo que describe el elemento sobre el cual estas posicionado, este elemento flotante se lo conoce como tooltip.

Hoy te comparto un proyecto más en el cual llevo trabajando bastante tiempo, mis propios globos informativos que no requieren javascript, fáciles de usar, sin la necesidad de memorizar sintaxis complicadas y sobre todo muy ligeros, llegando a pesar solo 0.7kb comprimidos con Brotli.

Instalar

Incluye el archivo tooltips.min.css arriba de </head>, si no puedes alojarlo te facilito una version entregada mediante una CDN proporcionada por jsdelivr:

  	<link href='//cdn.jsdelivr.net/npm/@zkreations/tooltips@4/tooltips.min.css' rel='stylesheet'/>
  

Estos tooltips son considerados estilos “no críticos”, por lo que, si deseas obtener un mayor rendimiento, te recomiendo diferir la carga de este archivo.

Modo de uso

Solo debes agregar los atributos data-tts y aria-label a un elemento html, ejemplo:

      <span data-tts aria-label="Hola mundo!">Tooltip</span>
    

Orientación

Por defecto, el globo siempre se mostrará hacia arriba. Agrega el nombre de la orientación (up, left, right, down) al atributo data-tts, por ejemplo:

      <span data-tts="down" aria-label="Hacia abajo">Hacia abajo</span>
    

Dirección

Las orientaciones up y down se pueden combinar con left y right (up-left, up-right, down-left, down-right), por ejemplo:

      <span data-tts="up-left" aria-label="Esquina superior">Esquina superior</span>
    

Animaciones

No se incluyen animaciones por defecto, pero pueden crearse con variables css, principalmente las que afectan al estado inicial y final durante la interpretación del globo:

Con ellas puedes crear las animaciones que desees, para ello debes escribir las clases de tus estilos y luego brindarle esa clase a un elemento con tooltip, por ejemplo:

      	<span data-tts class="tts-slideIn" aria-label="Slide In">SlideIn</span>
<span data-tts class="tts-slideOut" aria-label="Slide Out">SlideOut</span>
<span data-tts class="tts-zoomIn" aria-label="Zoom In">ZoomIn</span>
<span data-tts class="tts-zoomOut" aria-label="Zoom Out">ZoomOut</span>
      

      	.tts-slideIn { --tts-start-translate: -1rem }
.tts-slideOut { --tts-start-translate: 1rem }
.tts-zoomIn { --tts-start-scale: .8 }
.tts-zoomOut { --tts-start-scale: 1.2 }
      

Esta característica también te permite definir una animación por defecto para todos los globos sin necesidad de hacer cambios en el html:

  	[data-tts] {
  --tts-start-translate: 1rem;
  --tts-start-scale: .75;
}
  

Opciones

Mostrar tooltip programable

Agrega el atributo data-tts-visible para mostrar en cualquier momento el tooltip sin la necesidad de que el usuario interactúe con la página. Puedes agregar fácilmente este atributo utilizando Javascript.

    <span data-tts data-tts-visible aria-label="Visible programado">Hola mundo</span>
  

Personalizar

Crea nuevos estilos o modifica los existentes definiendo nuevos valores para las variables css del tooltip. Las variables disponibles se describen en la siguiente tabla:

Las variables permiten crear nuevos temas que puedes aplicar con tus propias clases:

        <span data-tts class="tts-custom" aria-label="Slide In">Custom</span>
      

        .tts-custom {
  --tts-background: #607D8B;
  --tts-duration: .5s;
  --tts-border-radius: 1em;
}
      

Del mismo modo, puedes definir estilos por defecto para todos los globos:

    [data-tts] {
  --tts-background: #607D8B;
  --tts-color: #f1f1f1;
}
  

Configurar en Sass

Si eres desarrollador, puedes modificar la apariencia por defecto. Para ello edita el archivo _variables.scss ubicado en la ruta /scss/inc del proyecto. Aquí encontrarás los valores modificables, por ejemplo las variables obligatorias:

    $tts-duration: .3s;
$tts-arrow-size: 6px;
$tts-arrow-offset: 6px;
$tts-background: rgb(0 0 0 / 90%); // Solo color (background-color)
  

Lo interesante de este archivo es el siguiente objeto que he creado, el cual se convierte en estilos con variables y respaldos, de esta manera todos las propiedades serán personalizables del lado del cliente:

  	$tts-text: (
  "font-size": 14px,
  "font-family": "Roboto, sans-serif",
  "color": #fff,
  "padding": 0.5em .75em,
  "border-radius": .25em,
) !default;
  

Por último ejecuta el comando npm run build para crear y comprimir los estilos a la vez, de esta manera podras tener globos mas personalizados o adecuados a tu proyecto.

Observaciones

Los tooltips se basan en los pseudo-elementos ::before y ::after, por lo tanto, no funcionan con etiquetas singleton, como lo son <img/> o <input/>, para solucionarlo, crea un contenedor e inicia el globo en él:

    <figure data-tts aria-label="Soy una imagen">
  <img src="example.jpg"/>
</figure>
  

Conclusión

Llevo trabajando en este proyecto desde el 2016 y personalmente es uno de mis favoritos, puedes comprobar los cambios en github que ha tenido a lo largo de los años.

Comparte este artículo o califica con una estrella el repositorio si este proyecto te ha sido de utilidad, te lo agradeceré enormemente. Cualquier duda déjala en los comentarios, muchas gracias por pasar.