Bootstrap5 Tooltip
El tooltip es una pequeña ventana emergente que se muestra al pasar el mouse sobre un elemento y desaparece cuando el mouse se aleja del elemento.
Cómo crear un tooltip
Al agregar a un elementodata-bs-toggle="tooltip"para crear un tooltip.
titleEl contenido del atributo es el contenido que muestra el tooltip:
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="¡Soy el contenido del tooltip!">Pasa el mouse sobre mí</button>
Nota:El tooltip debe escribirse en el código de inicialización de JavaScript: luego, en el elemento especificado, llame altooltip()método.
El siguiente ejemplo puede usar tooltips en cualquier parte del documento:
Ejemplo
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
Pruébalo »
Especificar la posición del tooltip
De forma predeterminada, el tooltip se muestra encima del elemento.
Puede utilizardata-bs-placementel atributo para establecer la dirección del tooltip: top, bottom, left o right:
Ejemplo
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="¡Soy el contenido del tooltip!">Pasa el mouse sobre mí</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="¡Soy el contenido del tooltip!">Pasa el mouse sobre mí</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="¡Soy el contenido del tooltip!">Pasa el mouse sobre mí</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="¡Soy el contenido del tooltip!">Pasa el mouse sobre mí</a>
Pruébalo »