Como Usar el Componente Tooltip de Bootstrap 5

4 minuto(s)

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.

Caja de códigos de programación — 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 Casa” y “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:


<!-- Imagen --> 
<img 
  id="mitooltip"
  src="assets/img/mimg_destacada_blog_devs-930x360.png" 
  class="img-fluid" 
  title="Como Personalizar un Scrollbar con CSS Para Todos los Navegadores"
>

<img

id="mitooltip"

src="assets/img/mimg_destacada_blog_devs-930x360.png"

class="img-fluid"

title="Como Personalizar un Scrollbar con CSS Para Todos los Navegadores"

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í:


<img 
  id="mitooltip" 
  src="assets/img/mimg_destacada_blog_devs-930x360.png" 
  class="img-fluid" 
  title="Como Personalizar un Scrollbar con CSS Para Todos los Navegadores" 
  data-bs-toggle="tooltip" <!-- Agregamos este atributo -->
  data-bs-placement="top" <!-- Agregamos este atributo --> 
>

<img

id="mitooltip"

src="assets/img/mimg_destacada_blog_devs-930x360.png"

class="img-fluid"

title="Como Personalizar un Scrollbar con CSS Para Todos los Navegadores"

data-bs-toggle="tooltip"

data-bs-placement="top"

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:


<script type="text/javascript"> 
  const elemento = document.getElementById('mitooltip') // Seleccionamos el id de la imagen
  const tooltip = new bootstrap.Tooltip(elemento) // Le creamos un Tooltip 
</script>

const elemento = document.getElementById('mitooltip') // Seleccionamos el id de la imagen

const tooltip = new bootstrap.Tooltip(elemento) // Le creamos un Tooltip

</script>

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

Sitio Web mostrando un Tooltip — Con Bootstrap 5 es fácil mostrar un Tooltip

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


<!-- Código jQuery (Tooltip) --> 
<script type="text/javascript">
  $(function(){
    $('[data-bs-toggle="tooltip"]').tooltip();   
  }); 
</script>

$(function(){

$('[data-bs-toggle="tooltip"]').tooltip();

});

</script>

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


<!-- Código WordPress + jQuery (Tooltip) --> 
<script type="text/javascript">
  jQuery(function(){
    jQuery('[data-bs-toggle="tooltip"]').tooltip();
  }); 
</script>

jQuery(function(){

jQuery('[data-bs-toggle="tooltip"]').tooltip();

});

</script>

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)

No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

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

Bootstrap
21-06-2023
27-09-2023
Crear un Post - Eventos Devs - Foro

Como Usar el Componente Tooltip de Bootstrap 5

Demo Github

Como Usar el Componente Tooltip de Bootstrap 5

Conclusión

Nota(s)

Todas Nuestras Páginas y Categorías:

Partners