El componente Tooltip de Bootstrap

Documentación y ejemplos para agregar tooltips Bootstrap personalizados con CSS y JavaScript usando CSS3 para animaciones y atributos de datos para el almacenamiento de títulos local.

Cosas que debes saber al usar el complemento de tooltips:

• Los tooltips se basan en la biblioteca de terceros Popper para su posicionamiento. Debes incluir popper.min.js antes de bootstrap.js, o utiliza un bootstrap.bundle.min.js que contenga Popper.
• Los tooltips son opcionales por motivos de rendimiento, por lo que debes inicializarlos tú mismo.
• Los tooltips con títulos de longitud cero nunca se muestran.
• Especifica container: 'body' para evitar problemas de renderizado en componentes más complejos (como nuestros grupos de entrada, grupos de botones, etc.).
• Activar tooltips en elementos ocultos no funcionará.
• Los tooltips para los elementos .disabled o disabled deben activarse en un elemento contenedor.
• Cuando se activan desde hipervínculos que abarcan varias líneas, los tooltips se centrarán. Utiliza white-space: nowrap; en tus <a>s para evitar este comportamiento.
• Los tooltips deben ocultarse antes de que sus elementos correspondientes se eliminen del DOM.
• Los tooltips se pueden activar gracias a un elemento dentro de un DOM oculto.

¿Tienes todo eso? Genial, veamos cómo funcionan con algunos ejemplos.

Ejemplos del componente Tooltip

Habilitar tooltips

Como se mencionó anteriormente, debes inicializar los tooltips antes de poder usarlos. Una forma de inicializar todos los tooltips en una página sería seleccionarlos por su atributo data-bs-toggle, así:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Tooltips en enlaces

Coloca el cursor sobre los enlaces a continuación para ver tooltips:

<p class="muted">
    Texto de marcador de posición para demostrar algunos <a href="#" data-bs-toggle="tooltip"
        data-bs-title="Default tooltip">enlaces en línea</a> con tooltips. Esto ahora es sólo un relleno. El
    contenido colocado aquí solo para imitar la presencia de <a href="#" data-bs-toggle="tooltip"
        data-bs-title="Another tooltip">texto real</a>. Y todo eso sólo para darle una idea de cómo se vería la
    tooltips cuando se usa en situaciones del mundo real. Esperamos que ahora hayas visto cómo <a href="#"
        data-bs-toggle="tooltip" data-bs-title="Another one here too">estas sugerencias sobre enlaces</a> pueden
    funcionar en la práctica una vez que los utilices en <a href="#" data-bs-toggle="tooltip"
        data-bs-title="The last tip!">tu propio</a> sitio o proyecto.
</p>

Tooltips personalizado

Puedes personalizar la apariencia de los tooltips usando variables CSS. Configuramos una clase personalizada con data-bs-custom-class="custom-tooltip" para definir el alcance de nuestra apariencia personalizada y usarla para sobrescribir una variable CSS local.

site/assets/scss/_component-examples.scss

.custom-tooltip {
    --bs-tooltip-bg: var(--bd-violet-bg);
    --bs-tooltip-color: var(--bs-white);
}

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top"
    data-bs-custom-class="custom-tooltip" data-bs-title="This top tooltip is themed via CSS variables.">
    Tooltips personalizados
</button>

Direcciones

Coloca el cursor sobre los botones a continuación para ver las cuatro direcciones de tooltips: arriba, derecha, abajo e izquierda. Las instrucciones se reflejan cuando se usa Bootstrap en RTL.

<div class="bd-example-tooltips">
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-title="Tooltip on top">Tooltip superior</button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right"
        data-bs-title="Tooltip on right">Tooltips a la derecha</button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom"
        data-bs-title="Tooltip on bottom">Tooltip inferior</button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left"
        data-bs-title="Tooltip on left">Tooltips a la izquierda</button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true"
        data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltips con HTML</button>
</div>

Y con HTML personalizado agregado:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
    Tooltip with HTML
</button>

Con un SVG:

<a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip">
    <svg width="50" height="50" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <rect width="100%" height="100%" fill="#563d7c"></rect>
        <circle cx="50" cy="50" r="30" fill="#007bff"></circle>
    </svg>
</a>

Personalización del CSS del componente

Variables Sass del componente

Como parte del enfoque de variables CSS en evolución de Bootstrap, los tooltips ahora usan variables CSS locales en .tooltip para mejorar la personalización en tiempo real. Los valores de las variables CSS se establecen a través de Sass, por lo que la personalización de Sass también es compatible.

scss/_tooltip.scss

--#{$prefix}tooltip-zindex: #{$zindex-tooltip};
--#{$prefix}tooltip-max-width: #{$tooltip-max-width};
--#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
--#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
--#{$prefix}tooltip-margin: #{$tooltip-margin};
@include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
--#{$prefix}tooltip-color: #{$tooltip-color};
--#{$prefix}tooltip-bg: #{$tooltip-bg};
--#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
--#{$prefix}tooltip-opacity: #{$tooltip-opacity};
--#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
--#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};

Variables Sass generales relacionadas

scss/_variables.scss

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     var(--#{$prefix}body-bg);
$tooltip-bg:                        var(--#{$prefix}emphasis-color);
$tooltip-border-radius:             var(--#{$prefix}border-radius);
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

Uso del componente Tooltip

El complemento de tooltips genera contenido y marcado a pedido y, de forma predeterminada, coloca tooltips después de su elemento desencadenante. Activa el tooltips a través de JavaScript:

const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)

const tooltip = new bootstrap.Tooltip('#example', {
    boundary: document.body // or document.querySelector('#boundary')
})

Markup

El marcado requerido para un tooltips es solo un atributo data y un title en el elemento HTML que deseas tener como tooltips. El marcado generado de un tooltips es bastante simple, aunque requiere una posición (de forma predeterminada, el complemento la establece en top).

<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" data-bs-title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-auto" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">
    Some tooltip text!
    </div>
</div>

Elementos deshabilitados

Los elementos con el atributo disabled no son interactivos, lo que significa que los usuarios no pueden enfocarse, pasar el cursor o hacer clic en ellos para activar una tooltips (o ventana emergente). Como solución alternativa, querrás activar los tooltips desde un contenedor <div> o <span>, idealmente considerando al teclado usando tabindex="0".

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Disabled tooltip">
    <button class="btn btn-primary" type="button" disabled="">Botón deshabilitado</button>
</span>

Opciones

Como las opciones se pueden pasar a través de atributos de datos o JavaScript, puedes agregar un nombre de opción a data-bs-, como en data-bs-animation="{value}". Asegúrate de cambiar el tipo de caso del nombre de la opción de “camelCase” a “kebab-case” al pasar las opciones a través de atributos de datos. Por ejemplo, utiliza data-bs-custom-class="beautifier" en lugar de data-bs-customClass="beautifier".

A partir de Bootstrap 5.2.0, todos los componentes admiten un atributo de datos experimental reservado data-bs-config que puede albergar datos simples de configuración del componente como una cadena JSON. Cuando un elemento tiene los atributos data-bs-config='{"delay":0, "title":123}' y data-bs-title="456", el valor final de title será 456 y los atributos de datos separados sobrescribirán los valores proporcionados en data-bs-config. Además, los atributos de datos existentes pueden albergar valores JSON como data-bs-delay='{"show":0,"hide":150}'.

El objeto de configuración final es el resultado combinado de data-bs-config, data-bs- y js object donde el último valor-clave dado sobrescribe los demás.

Usar la función con popperConfig

const tooltip = new bootstrap.Tooltip(element, {
    popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
    }
})

Métodos

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

Eventos

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', () => {
    // do something...
})

tooltip.hide()