Información sobre herramientas

Visión general

Cosas que debe saber al usar el complemento de información sobre herramientas:

• La información sobre herramientas se basa en la biblioteca Popper de terceros para el posicionamiento. Debe incluir popper.min.js antes de bootstrap.js o usar bootstrap.bundle.min.js/ bootstrap.bundle.jsque contiene Popper para que funcione la información sobre herramientas.
• La información sobre herramientas está habilitada por motivos de rendimiento, por lo que debe inicializarla usted mismo .
• La información sobre herramientas con títulos de longitud cero nunca se muestra.
• Especifique container: 'body'para evitar problemas de representación en componentes más complejos (como nuestros grupos de entrada, grupos de botones, etc.).
• La activación de información sobre herramientas en elementos ocultos no funcionará.
• La información sobre herramientas para los elementos .disabledo disableddebe activarse en un elemento contenedor.
• Cuando se activa desde hipervínculos que abarcan varias líneas, la información sobre herramientas se centrará. Úselo white-space: nowrap;en su <a>s para evitar este comportamiento.
• La información sobre herramientas debe ocultarse antes de que sus elementos correspondientes se eliminen del DOM.
• La información sobre herramientas se puede activar gracias a un elemento dentro de un DOM de sombra.

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

Ejemplo: habilite la información sobre herramientas en todas partes

Una forma de inicializar toda la información sobre herramientas en una página sería seleccionarla por su data-bs-toggleatributo:

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

Ejemplos

Pase el cursor sobre los enlaces a continuación para ver información sobre herramientas:

Pase el cursor sobre los botones a continuación para ver las cuatro direcciones de información sobre herramientas: arriba, derecha, abajo e izquierda. 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 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 agregado:

<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:

Hablar con descaro a

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 información sobre herramientas genera contenido y marcado a pedido y, de forma predeterminada, coloca información sobre herramientas después de su elemento desencadenante.

Active la información sobre herramientas 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 // or document.querySelector('#boundary')
})

Margen

El marcado requerido para una información sobre herramientas es solo un dataatributo y titleen el elemento HTML que desea tener una información sobre herramientas. El marcado generado de una información sobre herramientas es bastante simple, aunque requiere una posición (de forma predeterminada, establecida toppor el complemento).

<!-- 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 disabledatributo no son interactivos, lo que significa que los usuarios no pueden enfocarlos, desplazarlos o hacer clic en ellos para activar una información sobre herramientas (o una ventana emergente). Como solución alternativa, querrá activar la información sobre herramientas desde un contenedor <div>o <span>, idealmente, se puede enfocar con el 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 a través de atributos de datos o JavaScript. Para los atributos de datos, agregue el nombre de la opción a data-bs-, como en data-bs-animation="". Asegúrese 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", use data-bs-custom-class="beautifier".

Uso de la función conpopperConfig

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

Métodos

mostrar

Revela la información sobre herramientas de un elemento. Vuelve a la persona que llama antes de que se muestre la información sobre herramientas (es decir, antes de shown.bs.tooltipque ocurra el evento). Esto se considera una activación "manual" de la información sobre herramientas. La información sobre herramientas con títulos de longitud cero nunca se muestra.

tooltip.show()

ocultar

Oculta la información sobre herramientas de un elemento. Vuelve a la persona que llama antes de que la información sobre herramientas se haya ocultado (es decir, antes de hidden.bs.tooltipque ocurra el evento). Esto se considera una activación "manual" de la información sobre herramientas.

tooltip.hide()

palanca

Alterna la información sobre herramientas de un elemento. Vuelve a la persona que llama antes de que se muestre u oculte la información sobre herramientas (es decir, antes de que ocurra el evento shown.bs.tooltipo ). hidden.bs.tooltipEsto se considera una activación "manual" de la información sobre herramientas.

tooltip.toggle()

disponer

Oculta y destruye la información sobre herramientas de un elemento (elimina los datos almacenados en el elemento DOM). La información sobre herramientas que utiliza la delegación (que se crea con la selectoropción ) no se puede destruir individualmente en los elementos desencadenantes descendientes.

tooltip.dispose()

habilitar

Le da a la información sobre herramientas de un elemento la capacidad de mostrarse. La información sobre herramientas está habilitada de forma predeterminada.

tooltip.enable()

deshabilitar

Elimina la capacidad de mostrar la información sobre herramientas de un elemento. La información sobre herramientas solo se podrá mostrar si se vuelve a habilitar.

tooltip.disable()

alternar Habilitado

Alterna la capacidad de mostrar u ocultar la información sobre herramientas de un elemento.

tooltip.toggleEnabled()

actualizar

Actualiza la posición de la información sobre herramientas de un elemento.

tooltip.update()

obtener Instancia

Método estático que le permite obtener la instancia de información sobre herramientas asociada con un elemento DOM

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

getOrCreateInstance

Método estático que le permite obtener la instancia de información sobre herramientas asociada 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) // 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()