Suxestións sobre ferramentas

Visión xeral

Cousas que debes saber ao usar o complemento de información sobre ferramentas:

• As informacións sobre ferramentas dependen da biblioteca de terceiros Popper para o posicionamento. Debes incluír popper.min.js antes de bootstrap.js ou usar bootstrap.bundle.min.js/ bootstrap.bundle.jsque contén Popper para que funcionen as informacións sobre ferramentas.
• As informacións sobre ferramentas están activadas por motivos de rendemento, polo que debes inicialalas ti mesmo .
• Os consellos de ferramentas con títulos de lonxitude cero nunca se amosan.
• Especifique container: 'body'para evitar problemas de renderizado en compoñentes máis complexos (como os nosos grupos de entrada, grupos de botóns, etc.).
• Non funcionará activar consellos sobre elementos ocultos.
• As informacións sobre ferramentas para .disabledou disabledelementos deben activarse nun elemento de envoltura.
• Cando se activa desde hipervínculos que abranguen varias liñas, centraranse as suxestións sobre ferramentas. Use white-space: nowrap;no seu <a>s para evitar este comportamento.
• As informacións sobre ferramentas deben ocultarse antes de que se eliminen do DOM os seus elementos correspondentes.
• As informacións sobre ferramentas pódense activar grazas a un elemento dentro dun DOM en sombra.

Tes todo iso? Xenial, vexamos como funcionan con algúns exemplos.

Exemplo: activa as informacións sobre ferramentas en todas partes

Unha forma de inicializar todas as suxestións dunha páxina sería seleccionalas polo seu data-bs-toggleatributo:

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

Exemplos

Pasa o cursor polas seguintes ligazóns para ver consellos:

Pasa o cursor sobre os botóns de abaixo para ver as catro indicacións das ferramentas: arriba, dereita, inferior e esquerda. As indicacións replícanse cando 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>

E con HTML personalizado engadido:

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

Cun 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

O complemento de información sobre ferramentas xera contido e marcas baixo demanda e, por defecto, coloca as informacións sobre ferramentas despois do seu elemento de activación.

Activa a información sobre ferramentas mediante 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')
})

Marcado

O marcado necesario para unha información sobre ferramentas é só un dataatributo e titleno elemento HTML desexa ter unha información sobre ferramentas. O marcado xerado dunha información sobre ferramentas é bastante sinxelo, aínda que require unha posición (por defecto, definida toppolo 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 desactivados

Os elementos co disabledatributo non son interactivos, o que significa que os usuarios non poden enfocar, pasar o rato ou facer clic neles para activar unha información (ou popover). Como solución alternativa, quererá activar a información sobre ferramentas desde un envoltorio <div>ou <span>, idealmente enfocado ao 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>

Opcións

As opcións pódense pasar a través de atributos de datos ou JavaScript. Para os atributos de datos, engada o nome da opción a data-bs-, como en data-bs-animation="". Asegúrate de cambiar o tipo de maiúsculas e minúsculas do nome da opción de camelCase a kebab-case ao pasar as opcións a través dos atributos de datos. Por exemplo, en lugar de usar data-bs-customClass="beautifier", use data-bs-custom-class="beautifier".

Usando a función conpopperConfig

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

Métodos

mostrar

Revela a información sobre ferramentas dun elemento. Volve ao interlocutor antes de que se amosase a información sobre ferramentas (é dicir, antes de shown.bs.tooltipque se produza o evento). Isto considérase unha activación "manual" da información sobre ferramentas. Os consellos de ferramentas con títulos de lonxitude cero nunca se amosan.

tooltip.show()

ocultar

Oculta a información sobre ferramentas dun elemento. Volve ao interlocutor antes de que se ocultase a información sobre ferramentas (é dicir, antes de hidden.bs.tooltipque se produza o evento). Isto considérase unha activación "manual" da información sobre ferramentas.

tooltip.hide()

alternar

Alterna a información sobre ferramentas dun elemento. Volve ao interlocutor antes de que se amosase ou ocultase a información sobre ferramentas (é dicir, antes de que se produza o evento shown.bs.tooltipou ). hidden.bs.tooltipIsto considérase unha activación "manual" da información sobre ferramentas.

tooltip.toggle()

dispor

Oculta e destrúe a información sobre ferramentas dun elemento (Elimina os datos almacenados no elemento DOM). As informacións sobre ferramentas que usan a delegación (que se crean mediante a selectoropción ) non se poden destruír individualmente nos elementos desencadeantes descendentes.

tooltip.dispose()

habilitar

Dá a información sobre ferramentas dun elemento a posibilidade de mostrarse. As informacións sobre ferramentas están activadas por defecto.

tooltip.enable()

desactivar

Elimina a posibilidade de mostrar a información sobre ferramentas dun elemento. A información sobre ferramentas só se poderá mostrar se se volve activar.

tooltip.disable()

alternar Activado

Alterna a posibilidade de mostrar ou ocultar a información sobre ferramentas dun elemento.

tooltip.toggleEnabled()

actualizar

Actualiza a posición da información sobre ferramentas dun elemento.

tooltip.update()

getInstance

Método estático que lle permite obter a instancia de información sobre ferramentas asociada a 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 che permite obter a instancia de información sobre ferramentas asociada a un elemento DOM ou crear unha nova no caso de que non se inicializou

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()