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 bootstrap.jsou usar un bootstrap.bundle.min.jsque conteña Popper.
• 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 renderización 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, imos ver como funcionan con algúns exemplos.

Exemplos

Activar as informacións sobre ferramentas

Como se mencionou anteriormente, debes inicializar as informacións sobre ferramentas antes de poder utilizalas. Unha forma de inicializar todas as suxestións dunha páxina sería seleccionalas polo seu data-bs-toggleatributo, así:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Suxestións sobre ligazóns

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

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</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="The last tip!">your own</a> site or project.
</p>

Suxestións de ferramentas personalizadas

Pode personalizar a aparencia das suxestións mediante variables CSS . Establecemos unha clase personalizada con data-bs-custom-class="custom-tooltip"para definir o noso aspecto personalizado e usámola para anular unha variable CSS local.

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<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.">
  Custom tooltip
</button>

Direccións

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" data-bs-title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-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" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Cun SVG:

CSS

Variables

Como parte do enfoque de variables CSS en evolución de Bootstrap, as informacións sobre ferramentas agora usan variables CSS locais activadas .tooltippara mellorar a personalización en tempo real. Os valores para as variables CSS establécense a través de Sass, polo que a personalización de Sass tamén se admite.

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

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

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:

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

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" data-bs-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" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Opcións

Como as opcións se poden pasar a través de atributos de datos ou JavaScript, pode engadir un nome de opción a data-bs-, como en data-bs-animation="{value}". 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, use data-bs-custom-class="beautifier"no canto de data-bs-customClass="beautifier".

A partir de Bootstrap 5.2.0, todos os compoñentes admiten un atributo de datos reservados experimentaisdata-bs-config que pode albergar unha configuración sinxela de compoñentes como cadea JSON. Cando un elemento ten data-bs-config='{"delay":0, "title":123}'e data-bs-title="456"atributos, o titlevalor final será 456e os atributos de datos separados anularán os valores indicados en data-bs-config. Ademais, os atributos de datos existentes poden albergar valores JSON como data-bs-delay='{"show":0,"hide":150}'.

Usando a función conpopperConfig

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

Métodos

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

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

Eventos

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

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

tooltip.hide()