Tooltips

Descripción general

Cosas a saber cuando usas el plugin tooltip:

• Los tooltips dependen de la librería de terceros Popper para el posicionamiento. Debes incluir popper.min.js antes de bootstrap.js o usar bootstrap.bundle.min.js / bootstrap.bundle.js que contiene Popper para que los tooltips funcionen.
• Los tooltips son opt-in por motivos de rendimiento, así 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.
• Cuando se activan desde hipervínculos que abarcan múltiples líneas, los tooltips se centrarán. Usa white-space: nowrap; en tus <a>s para evitar este comportamiento.
• Los tooltips deben ocultarse antes de que sus elementos correspondientes hayan sido eliminados del DOM.
• Los tooltips pueden activarse gracias a un elemento dentro de un shadow DOM.

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

Ejemplo: Habilitar tooltips en todas partes

Una forma de inicializar todos los tooltips en una página sería seleccionarlos por su atributo data-bs-toggle:

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

Ejemplos

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

Pasa el cursor sobre los botones de abajo para ver las cuatro direcciones de tooltips: top, right, bottom y left. Las direcciones se invierten cuando se usa Bootstrap en RTL.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

Y con HTML personalizado añadido:

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

Con un SVG:

Sass

Variables

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

Uso

El plugin tooltip genera contenido y markup bajo demanda, y por defecto coloca los tooltips después de su elemento disparador.

Activa el tooltip vía JavaScript:

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

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

Markup

El markup requerido para un tooltip es solo un atributo data y un title en el elemento HTML al que le quieres poner un tooltip. El markup generado de un tooltip es bastante simple, aunque sí requiere una posición (por defecto, establecida en top por el plugin).

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

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" 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 enfocarlos, pasar el cursor por encima ni hacer clic en ellos para activar un tooltip (o popover). Como solución alternativa, querrás activar el tooltip desde un <div> o <span> contenedor, idealmente hecho enfocable por teclado usando tabindex="0".

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

Opciones

Las opciones se pueden pasar vía atributos data o JavaScript. Para los atributos data, añade el nombre de la opción a data-bs-, como en data-bs-animation="". Asegúrate de cambiar el tipo de capitalización del nombre de la opción de camelCase a kebab-case cuando pases las opciones vía atributos data. Por ejemplo, en lugar de usar data-bs-customClass="beautifier", usa data-bs-custom-class="beautifier".

Usar una función con popperConfig

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

Métodos

show

Muestra el tooltip de un elemento. Retorna al llamador antes de que el tooltip se haya mostrado realmente (es decir, antes de que ocurra el evento shown.bs.tooltip). Esto se considera una activación “manual” del tooltip. Los tooltips con títulos de longitud cero nunca se muestran.

tooltip.show()

hide

Oculta el tooltip de un elemento. Retorna al llamador antes de que el tooltip se haya ocultado realmente (es decir, antes de que ocurra el evento hidden.bs.tooltip). Esto se considera una activación “manual” del tooltip.

tooltip.hide()

toggle

Alterna el tooltip de un elemento. Retorna al llamador antes de que el tooltip se haya mostrado u ocultado realmente (es decir, antes de que ocurra el evento shown.bs.tooltip o hidden.bs.tooltip). Esto se considera una activación “manual” del tooltip.

tooltip.toggle()

dispose

Oculta y destruye el tooltip de un elemento (Elimina los datos almacenados en el elemento del DOM). Los tooltips que usan delegación (que se crean usando la opción selector) no pueden destruirse individualmente en los elementos disparadores descendientes.

tooltip.dispose()

enable

Le da al tooltip de un elemento la capacidad de mostrarse. Los tooltips están habilitados por defecto.

tooltip.enable()

disable

Elimina la capacidad de mostrar el tooltip de un elemento. El tooltip solo podrá mostrarse si se vuelve a habilitar.

tooltip.disable()

toggleEnabled

Alterna la capacidad de mostrar u ocultar el tooltip de un elemento.

tooltip.toggleEnabled()

update

Actualiza la posición del tooltip de un elemento.

tooltip.update()

getInstance

Método estático que te permite obtener la instancia de tooltip asociada a un elemento del DOM

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateInstance

Método estático que te permite obtener la instancia de tooltip asociada a un elemento del DOM, o crear una nueva en caso de que no haya sido inicializada

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

Eventos

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()