min Before Tooltips

Repositorio Demo en Codepen

En este ocasión he diseñado mis propios tooltips utilizando solo CSS, mi objetivo era que fueran fáciles de usar, sin la necesidad de memorizar sintaxis complicadas. Además son extremadamente ligeros, pesando tan solo 0.8kb comprimidos con gzip.


Contenido


Instalación

Descarga de github el archivo tooltips.min.css e incluyelo arriba de </head> o mediante una CDN:


<link href="//cdn.jsdelivr.net/gh/zkreations/tooltips@3/tooltips.min.css" rel="stylesheet">

Modo de uso

Solo agregue la clase tts y el atributo aria-label a un elemento html, por ejemplo:


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

Orientación

Por defecto, el tooltip siempre se muestra hacia arriba. Para cambiar la dirección agregue dos puntos seguido del nombre de una posición:


<span class="tts:left" aria-label="Izquierda">Tooltip</span>
<span class="tts:right" aria-label="Derecha">Tooltip</span>
<span class="tts:down" aria-label="Abajo">Tooltip</span>

Animación

Por defecto la animación del tooltip es fade. Agrega una clase adicional con el nombre de una animación disponible, puede escoger entre tts-slideIn, tts-slideOut, tts-zoomIn y tts-zoomOut ejemplo::


<span class="tts tts-slideIn" aria-label="Slide In">Tooltip</span>
<span class="tts tts-slideOut" aria-label="Slide Out">Tooltip</span>
<span class="tts tts-zoomIn" aria-label="Zoom In">Tooltip</span>
<span class="tts tts-zoomOut" aria-label="Zoom Out">Tooltip</span>

Opciones

Siempre visible

Agrega la clase tts-visible para que el tooltip se muestre siempre. Esta opción ignorara incluso las animaciones:


<span class="tts tts-visible" aria-label="Siempre visible">Tooltip</span>

Salto de línea

Por defecto el tooltip contiene la propiedad nowrap. Agregue la clase tts-wrap para retirar la propiedad nowrap del código:


<span class="tts tts-wrap" aria-label="Los saltos de linea se respetan">Tooltip</span>

Bloque en linea

Por defecto se aplica la propiedad display inline-block a todos los elementos con tooltip, si deseas que esto no ocurra, agrega la clase tts-block para retirar las propiedades inline-block del elemento:


<div class="tts tts-block" aria-label="Adiós inline-block">Tooltip</div>

Personalizar

Puedes modificar fácilmente los estilos del tooltip mediante variables css. La siguiente tabla contiene las variables disponibles:


Variable Default Descripcion
--tts-size 14px Tamaño de texto y relleno
--tts-arrow 6px Tamaño del indicador
--tts-bg rgb(0 0 0 / 90%) Color de fondo
--tts-color #fff Color del texto
--tts-duration .3s Duración de la animación
--tts-shadow 0 2px 3px rgb(0 0 0 / 40%) Sombra
--tts-radius .25em Bordes redondeados

Con las variables puedes crear nuevos temas que puedes aplicar con tus propias clases:


.tts-custom {
  --tts-bg: #607D8B;
  --tts-duration: .5s;
  --tts-shadow: 0 2px 10px rgb(0 0 0 / 20%);
  --tts-radius: 1em;
}

O puede establecer estilos globales para todos los tooltips:


:root {
  --tts-bg: #607D8B;
  --tts-duration: .5s;
}

Observaciones

No funciona con etiquetas de auto cierre, como por ejemplo <img/> o <input/>. Para solucionarlo, encierra las etiquetas mencionadas y agrega la clase tts al contenedor, ejemplo:


<figure class="tts" aria-label="Una imagen">
   <img src="example.jpg"/>
</figure>

Conclusión

Comparte este articulo si te ha sido de ayuda. Cualquier duda o consulta déjala en los comentarios, muchas gracias por pasar y leer.