Herramienta de sugerencia de Bootstrap 5

Tooltip

El componente de tooltip es una pequeña ventana emergente que aparece cuando el usuario mueve el puntero del ratón sobre el elemento:

¿Cómo crear un tooltip?

Para crear un tooltip, por favor agrega: data-bs-toggle="tooltip" Atributo agregado al elemento.

Utilice title Atributo que especifica el texto que se muestra en el tooltip:

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="¡Genial!">¡Mantén el ratón sobre mí!</button>

Notas:Los tooltips deben inicializarse con JavaScript para funcionar.

El siguiente código activará todos los tooltips en el documento:

<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipTriggerList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
}
</script>

Prueba personalmente

Ubicar el tooltip

Por defecto, el tooltip se mostrará en la parte superior del elemento.

Utilice data-bs-placement Configurar la posición del tooltip del elemento en la parte superior, inferior, izquierda o derecha del elemento:

Ejemplo

<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="¡Qué bien!">Pasar el ratón</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="¡Qué bien!">Pasar el ratón</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="¡Qué bien!">Pasar el ratón</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="¡Qué bien!">Pasar el ratón</a>

Prueba personalmente