Tooltips

Descripción general

Cosas que debes saber al usar el complemento de tooltip:

• Los tooltips se basan en la biblioteca 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 no están habilitados 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 representación en componentes más complejos (como nuestros input groups, button groups, etc.).
• La activación de tooltips en elementos ocultos no funcionará.
• Los tooltips para los elementos .disabled o disabled deben activarse en un elemento contenedor.
• Cuando se activa desde hipervínculos que abarcan varias líneas, el tooltip se centrará. Usa 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 puede activar gracias a un elemento dentro del shadow DOM.

¿Lo tienes? Genial, veamos cómo funcionan con algunos ejemplos.

Ejemplo: habilita los 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 = Array.prototype.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 a continuación para ver sus tooltips:

Pasa el cursor sobre los botones a continuación para ver las cuatro direcciones de tooltips: top, right, bottom, y 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" title="Tooltip superior">
  Tooltip superior
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip derecho">
  Tooltip derecho
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip inferior">
  Tooltip inferior
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip izquierdo">
  Tooltip izquierdo
</button>

Y con HTML personalizado:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>con</u> <b>HTML</b>">
  Tooltip con 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 complemento de tooltip genera contenido y marcado a pedido y, de forma predeterminada, coloca tooltips después de tu elemento desencadenante.

Activa el tooltip a través de 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 // o document.querySelector('#boundary')
})

Marcado

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

<!-- HTML a escribir -->
<a href="#" data-bs-toggle="tooltip" title="Algo de texto tooltip!">Pasa el puntero de mouse aquí</a>

<!-- Marcado generado por el complemento -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Algo de texto tooltip!
  </div>
</div>

Elementos deshabilitados

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

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

Opciones

Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agrega el nombre de la opción a data-bs-, como en data-bs-animation="". 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, en lugar de usar data-bs-customClass="beautifier", usa data-bs-custom-class="beautifier".

Uso de la función con popperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // usa defaultBsPopperConfig si es necesario...
    // return newPopperConfig
  }
})

Métodos

show

Revela el tooltip de un elemento. Regresa al punto de la llamada antes de que se haya mostrado realmente la tooltip (es decir, antes de que ocurra el evento shown.bs.tooltip). Esto se considera una activación “manual” del tooltip. El tooltip con títulos de longitud cero nunca se muestra.

tooltip.show()

hide

Oculta el tooltip de un elemento. Regresa al punto de la llamada antes de que la tooltip se haya ocultado (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. Regresa al punto de la llamada antes de que la tooltip se haya mostrado u ocultado (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 DOM). El tooltip que utiliza la delegación (que se crea mediante la opción selector) no se puede destruir individualmente en los elementos desencadenantes descendientes.

tooltip.dispose()

enable

Le da al tooltip de un elemento la capacidad de mostrarse. El tooltip está habilitada de forma predeterminada.

tooltip.enable()

disable

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

tooltip.disable()

setContent

Brinda una forma de cambiar el contenido del tooltip después de su inicialización.

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

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 del tooltip asociado con un elemento DOM

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Devuelve una instancia del tooltip de Bootstrap

getOrCreateInstance

Método estático que te permite obtener la instancia de tooltip asociado con un elemento DOM, o crear uno nuevo en caso de que no se haya inicializado

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Devuelve una instancia del tooltip de Bootstrap

Eventos

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

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // hacer algo...
})

tooltip.hide()