Los tooltips son pequeños cuadros de texto que aparecen cuando el usuario
interactúa con un elemento específico, generalmente al pasar el cursor sobre él o al enfocarlo.
Estos cuadros proporcionan información adicional o descripciones breves sobre el elemento en cuestión,
mejorando la experiencia del usuario al ofrecer contexto sin saturar la interfaz.
Este elemento no pertenece directamente a Bodystyle, sino que proviene de una dependencia llamada
Dynamics-Tips v3.0.0
Vamos a ver unos ejemplos de tooltips aplicados a diferentes elementos: Por ejemplo botones.
/*
Para realizar lo anterior es necesario inicializar los tooltips
como se mostrará a continuación:
*/
BS.ToolTipsInit()
Es posible definir en que posición queremos que el tooltips se muestre, las mismas son: arriba, abajo, izquierda y derecha. (TOP / BOTTOM / LEFT / RIGHT)
Para realizar esto se configura el attr data-pos con una cadena de texto que indique la posición deseada.
Por defecto el evento es el HOVER (pasar el cursor por encima), pero es posible cambiarlo al evento CLICK.
Es importante resaltar que el valor del atributo data-tips puede contener código HTML, lo que permite personalizar el contenido del tooltip con estilos, enlaces, imágenes, etc.
Si por alguna razón necesitamos eliminar todos los tooltips de la página, podemos hacerlo utilizando el siguiente método:
const Destroy = () => {
BS.ToolTipsDestroy()
BS.Toast({
html: "¡Tooltips destruidos!",
clases: ["bg-red", "c-white", "bor-pill"]
})
}