Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Como Usar el Componente Tooltip de Bootstrap 5

Demo Github

Bootstrap 5 es un popular framework que nos permite crear diferentes elementos en nuestras interfaces de usuario del lado front. A medida que pasa el tiempo Bootstrap ha sabido reinventarse y en la actualidad se encuentra entre los mejores frameworks Front-end que existen. Personalmente estoy constantemente dandome un salto por su sitio web para ver que nuevas características y funciones agregan en sus nuevas subversiones de la versión 5. Un componente que ayuda a mejorar la experiencia de los usuarios son los Tooltips que muestran información al colocar el puntero del mouse sobre un elemento en especifico. En este post te enseñaré a Como Usar el Componente Tooltip de Bootstrap 5, vamos con ello.

Mediante ciertas líneas de código puedes mostrar Tooltips de Bootstrap 5

Antes de continuar te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Que Hacer Cuando Estamos En Casay “La Inteligencia Artificial (IA) y el Machine Learning (ML) Siempre Trabajan de la Mano” (Anchor Podcast): 

Spotify: Sound Cloud: Apple Podcasts Anchor Podcasts

Bien ahora continuemos con el Post: Como Usar el Componente Tooltip de Bootstrap 5.

Como Usar el Componente Tooltip de Bootstrap 5

Supongamos que queremos que cuando un usuario coloque el puntero del mouse sobre una imagen, le aparezca un Tooltip con un determinado texto, usaré la siguiente imagen para este ejemplo:


En la imagen anterior la imagen tiene un atributo title con un determinado texto, este texto es el que usaremos para mostrarlo en el Tooltip, si bien Bootstrap en su documentación nos indica que podemos usar el atributo data-bs-title=”Mi Texto”, pero pensando en las buenas practicas de HTML y por temas de SEO, es recomendable usar el atributo nativo title de HTML.

Se supone que ya tenemos instalado y configurado Bootstrap 5 en nuestro sitio web, por ende ya tenemos a disposición todas sus clases CSS y atributos correspondientes.

A la imagen le agrego los atributos data-bs-toggle=”tooltip” y data-bs-placement=”top, entonces el código quedaría así:


Recuerda que en el atributo data-bs-placement=”top”puedes especificar a que dirección se debe mostrar el Tooltip. Las opciones disponibles son top | right | bottom | left

Con ello tenemos lo necesario en el código HTML para que funcione nuestro Tooltip, ahora sencillamente agregaremos un pequeño código de JavaScript:


Entonces si vamos al navegador podemos ver que nuestro Tooltip funciona correctamente:

Con Bootstrap 5 es fácil mostrar un Tooltip

Si necesitas usarlo con jQuery, puedes usar el siguiente código:


Y si estas usando WordPress y jQuery, puedes usar el siguiente código:


Recuerda que también puedes usar código puro de JavaScript en WordPress y otros entornos o CMS.

Al inicio de este post, he colocado una demo para que veas el proyecto en acción, asimismo he colocado un enlace al código fuente del proyecto alojado en GitHub para que lo puedas descargar y usar en tus proyectos.

Conclusión

En este post has aprendido a Como Usar el Componente Tooltip de Bootstrap 5, saber hacer esto te servirá para aplicar Tooltips a tus sitios web y brindar una mejor experiencia a los usuarios. Bootstrap 5 nos brinda varios componentes y no solo Tooltips, date una vuelta por su sitio web y encontrarás

Nota(s)

 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.

Salir de la versión móvil