Tooltips

Resumen

Cosas que debes saber al usar el plugin de tooltip:

• Los tooltips dependen de la biblioteca de terceros Popper para el posicionamiento. Debes incluir popper.min.js antes de bootstrap.js, o usar un bootstrap.bundle.min.js que contenga Popper.
• Los tooltips son opt-in por razones 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 elementos .disabled o disabled deben activarse en un elemento contenedor (wrapper).
• Cuando se activan desde enlaces que se extienden en varias líneas, los tooltips se centrarán. Usa white-space: nowrap; en tus <a> para evitar este comportamiento.
• Los tooltips deben ocultarse antes de que sus elementos correspondientes hayan sido eliminados del DOM.
• Los tooltips se pueden activar gracias a un elemento dentro de un shadow DOM.

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

Ejemplos

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

Pasa el cursor sobre los enlaces de abajo para ver los tooltips:

<p class="muted">Texto de marcador de posición para demostrar algunos <a href="#" data-bs-toggle="tooltip" data-bs-title="Tooltip predeterminado">enlaces en línea</a> con tooltips. Esto es ahora solo relleno. Contenido colocado aquí solo para imitar la presencia de <a href="#" data-bs-toggle="tooltip" data-bs-title="Otro tooltip">texto real</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you’ve now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="¡El último consejo!">your own</a> site or project.</p>

Tooltips personalizados

Puedes personalizar la apariencia de los tooltips usando variables CSS. Establecemos una clase personalizada con data-bs-custom-class="custom-tooltip" para delimitar nuestra apariencia personalizada y usarla para anular una variable CSS local.

.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.">
  Tooltip personalizado
</button>

Direcciones

Pasa el cursor sobre los botones de abajo para ver las cuatro direcciones de los tooltips: arriba (top), derecha (right), abajo (bottom) e izquierda (left). Las direcciones se reflejan cuando se usa Bootstrap en RTL.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip arriba">
  Tooltip arriba
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip a la derecha">
  Tooltip a la derecha
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip abajo">
  Tooltip abajo
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip a la izquierda">
  Tooltip a la izquierda
</button>

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 con HTML
</button>

Con un SVG:

CSS

Variables

Como parte del enfoque evolutivo de las variables CSS de Bootstrap, los tooltips ahora usan variables CSS locales en .tooltip para una personalización mejorada 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.

--#{$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 de Sass

$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

El plugin de tooltip genera contenido y marcado bajo demanda y, de forma predeterminada, coloca los tooltips después de su elemento activador. Activa el tooltip 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')
})

Marcado

El marcado requerido para un tooltip es solo un atributo data y un title en el elemento HTML sobre el que deseas tener un tooltip. El marcado generado de un tooltip es bastante simple, aunque requiere una posición (por defecto, establecida en top por el plugin).

<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" data-bs-title="¡Algo de texto de tooltip!">Pasa el cursor sobre mí</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-auto" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    ¡Algo de texto de tooltip!
  </div>
</div>

Elementos deshabilitados

Los elementos con el atributo disabled no son interactivos, lo que significa que los usuarios no pueden enfocarlos, pasar el cursor sobre ellos ni hacer clic en ellos para activar un tooltip (o popover). Como solución alternativa, querrás activar el tooltip desde un contenedor <div> o <span>, idealmente enfocado con el teclado usando tabindex="0".

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Tooltip deshabilitado">
  <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 añadir un nombre de opción a data-bs-, como en data-bs-animation="{value}". Asegúrate de cambiar el tipo de mayúsculas y minúsculas del nombre de la opción de “camelCase” a “kebab-case” al pasar las opciones a través de atributos de datos. Por ejemplo, usa 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 reservado experimental data-bs-config que puede albergar una configuración simple 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 anulará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 fusionado de data-bs-config, data-bs- y el js object (objeto js) donde el último par clave-valor proporcionado anula a los demás.

Uso de 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') // Devuelve una instancia de tooltip de Bootstrap

// Ejemplo de setContent
tooltip.setContent({ '.tooltip-inner': 'otro título' })

Eventos

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

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

tooltip.hide()