Consells d'eines

Visió general

Coses a saber quan s'utilitza el connector d'informació eines:

• Els tooltips es basen en la biblioteca de tercers Popper per al posicionament. Heu d'incloure popper.min.js abans de bootstrap.js o utilitzar bootstrap.bundle.min.js/ bootstrap.bundle.jsque conté Popper per tal que els consells d'eines funcionin!
• Els consells sobre eines estan activats per raons de rendiment, de manera que els heu d'inicialitzar vosaltres mateixos .
• Els consells sobre eines amb títols de longitud zero no es mostren mai.
• Especifiqueu container: 'body'per evitar problemes de renderització en components més complexos (com els nostres grups d'entrada, grups de botons, etc.).
• No funcionarà l'activació de suggeriments sobre elements ocults.
• Els consells sobre eines per a elements .disabledo disableds'han d'activar en un element d'embolcall.
• Quan s'activa des d'hiperenllaços que abasten diverses línies, els consells sobre eines es centraran. Utilitzeu white-space: nowrap;-lo <a>per evitar aquest comportament.
• Els consells sobre eines s'han d'amagar abans que els seus elements corresponents s'hagin eliminat del DOM.
• Els tooltips es poden activar gràcies a un element dins d'un DOM ombra.

Tens tot això? Genial, anem a veure com funcionen amb alguns exemples.

Exemple: activeu els consells d'eines a tot arreu

Una manera d'iniciar tots els consells d'eines d'una pàgina seria seleccionar-los pel seu data-bs-toggleatribut:

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

Exemples

Passeu el cursor per sobre dels enllaços següents per veure els consells sobre eines:

Passeu el cursor per sobre dels botons de sota per veure les quatre indicacions d'eines: superior, dreta, inferior i esquerra. Les indicacions es reflecteixen quan s'utilitza Bootstrap a 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>

I amb HTML personalitzat afegit:

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

Amb un SVG:

Sass

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

Ús

El connector d'informació sobre eines genera contingut i marques sota demanda i, per defecte, col·loca els consells sobre eines després del seu element activador.

Activa la informació sobre eines mitjançant 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')
})

Marcatge

L'etiquetatge necessari per a una informació sobre eines és només un dataatribut i titlea l'element HTML voleu tenir una informació sobre eines. El marcatge generat d'una informació sobre eines és bastant senzill, tot i que requereix una posició (per defecte, establerta toppel connector).

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

Elements inhabilitats

Els elements amb l' disabledatribut no són interactius, és a dir, els usuaris no poden centrar-hi, passar el cursor o fer-hi clic per activar una informació emergent (o una finestra emergent). Com a solució alternativa, voldreu activar la informació sobre eines des d'un embolcall <div>o <span>, idealment enfocat al teclat amb 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>

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-bs-, com a data-bs-animation="". Assegureu-vos de canviar el tipus de cas del nom de l'opció de camelCase a kebab-case quan passeu les opcions mitjançant atributs de dades. Per exemple, en comptes d'utilitzar data-bs-customClass="beautifier", utilitzeu data-bs-custom-class="beautifier".

S'utilitza la funció ambpopperConfig

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

Mètodes

espectacle

Revela la informació sobre eines d'un element. Torna a la persona que truca abans que s'hagi mostrat realment la informació sobre eines (és a dir, abans shown.bs.tooltipque es produeixi l'esdeveniment). Això es considera una activació "manual" de la informació sobre eines. Els consells sobre eines amb títols de longitud zero no es mostren mai.

tooltip.show()

amagar

Amaga la informació sobre eines d'un element. Torna a la persona que truca abans que la informació sobre eines s'hagi amagat (és a dir, abans hidden.bs.tooltipque es produeixi l'esdeveniment). Això es considera una activació "manual" de la informació sobre eines.

tooltip.hide()

alternar

Commuta la informació sobre eines d'un element. Torna a la persona que truca abans que s'hagi mostrat o amagat la informació sobre eines (és a dir, abans que es produeixi l'esdeveniment shown.bs.tooltipo ). hidden.bs.tooltipAixò es considera una activació "manual" de la informació sobre eines.

tooltip.toggle()

disposar

Amaga i destrueix la informació sobre eines d'un element (elimina les dades emmagatzemades a l'element DOM). Els consells sobre eines que utilitzen la delegació (que es creen amb l' selectoropció ) no es poden destruir individualment en elements activadors descendents.

tooltip.dispose()

habilitar

Ofereix la possibilitat de mostrar la informació sobre eines d'un element. Els consells sobre eines estan activats de manera predeterminada.

tooltip.enable()

desactivar

Elimina la possibilitat que es mostri la informació sobre eines d'un element. La informació sobre eines només es podrà mostrar si es torna a activar.

tooltip.disable()

toggleEnabled

Activa o desactiva la possibilitat de mostrar o amagar la informació sobre eines d'un element.

tooltip.toggleEnabled()

actualitzar

Actualitza la posició de la informació sobre eines d'un element.

tooltip.update()

getInstance

Mètode estàtic que us permet obtenir la instància d'informació eines associada a un element DOM

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

getOrCreateInstance

Mètode estàtic que us permet obtenir la instància d'informació eines associada a un element DOM o crear-ne una de nova en cas que no s'hagi inicialitzat

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

Esdeveniments

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

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

tooltip.hide()