Suggerimenti

Panoramica

Cose da sapere quando si utilizza il plug-in tooltip:

• Le descrizioni comandi si basano sulla libreria di terze parti Popper per il posizionamento. Devi includere popper.min.js prima di bootstrap.js o utilizzare bootstrap.bundle.min.js/ bootstrap.bundle.jsche contiene Popper affinché i suggerimenti funzionino!
• Le descrizioni comandi sono attivabili per motivi di prestazioni, quindi devi inizializzarle tu stesso .
• Le descrizioni comandi con titoli di lunghezza zero non vengono mai visualizzate.
• Specificare container: 'body'per evitare problemi di rendering in componenti più complessi (come i nostri gruppi di input, gruppi di pulsanti, ecc.).
• L'attivazione dei suggerimenti sugli elementi nascosti non funzionerà.
• I suggerimenti per gli elementi .disabledo disableddevono essere attivati ​​su un elemento wrapper.
• Quando vengono attivati ​​da collegamenti ipertestuali che si estendono su più righe, i suggerimenti vengono centrati. Usa white-space: nowrap;sui tuoi <a>messaggi di posta elettronica per evitare questo comportamento.
• I suggerimenti devono essere nascosti prima che gli elementi corrispondenti siano stati rimossi dal DOM.
• I tooltip possono essere attivati ​​grazie a un elemento all'interno di un DOM ombra.

Hai tutto questo? Ottimo, vediamo come funzionano con alcuni esempi.

Esempio: abilita i suggerimenti ovunque

Un modo per inizializzare tutti i suggerimenti su una pagina sarebbe selezionarli in base al loro data-bs-toggleattributo:

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

Esempi

Passa il mouse sui link sottostanti per vedere i suggerimenti:

Passa il mouse sopra i pulsanti sottostanti per vedere le quattro direzioni dei suggerimenti: in alto, a destra, in basso e a sinistra. Le direzioni vengono rispecchiate quando si utilizza Bootstrap in 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 l'aggiunta di HTML personalizzato:

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

Sass

Variabili

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

Utilizzo

Il plug-in tooltip genera contenuto e markup su richiesta e, per impostazione predefinita, posiziona i suggerimenti dopo il loro elemento di attivazione.

Attiva il suggerimento tramite 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')
})

Marcatura

Il markup richiesto per un suggerimento è solo un dataattributo e titlesull'elemento HTML desideri avere un suggerimento. Il markup generato di un tooltip è piuttosto semplice, sebbene richieda una posizione (per impostazione predefinita, impostata topdal plug-in).

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

Elementi disabilitati

Gli elementi con l' disabledattributo non sono interattivi, il che significa che gli utenti non possono concentrarsi, passare il mouse o fare clic su di essi per attivare una descrizione comando (o popover). Come soluzione alternativa, ti consigliamo di attivare il suggerimento da un wrapper <div>o <span>, idealmente reso attivabile dalla tastiera utilizzando 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>

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-bs-, come in data-bs-animation="". Assicurati di cambiare il tipo di caso del nome dell'opzione da camelCase a kebab-case quando passi le opzioni tramite attributi di dati. Ad esempio, invece di usare data-bs-customClass="beautifier", usa data-bs-custom-class="beautifier".

Utilizzo della funzione conpopperConfig

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

Metodi

mostrare

Rivela il suggerimento di un elemento. Ritorna al chiamante prima che il suggerimento sia stato effettivamente mostrato (cioè prima shown.bs.tooltipche si verifichi l'evento). Questo è considerato un'attivazione "manuale" del suggerimento. Le descrizioni comandi con titoli di lunghezza zero non vengono mai visualizzate.

tooltip.show()

nascondere

Nasconde la descrizione comando di un elemento. Ritorna al chiamante prima che il suggerimento sia stato effettivamente nascosto (cioè prima hidden.bs.tooltipche si verifichi l'evento). Questo è considerato un'attivazione "manuale" del suggerimento.

tooltip.hide()

alternare

Attiva o disattiva la descrizione comando di un elemento. Ritorna al chiamante prima che il suggerimento sia stato effettivamente mostrato o nascosto (cioè prima che si verifichi l' evento shown.bs.tooltipo hidden.bs.tooltip). Questo è considerato un'attivazione "manuale" del suggerimento.

tooltip.toggle()

smaltire

Nasconde e distrugge il suggerimento di un elemento (rimuove i dati memorizzati sull'elemento DOM). Le descrizioni comandi che utilizzano la delega (che vengono create utilizzando l' selectoropzione ) non possono essere distrutte individualmente sugli elementi trigger discendenti.

tooltip.dispose()

abilitare

Dà alla descrizione comando di un elemento la possibilità di essere mostrata. Le descrizioni comandi sono abilitate per impostazione predefinita.

tooltip.enable()

disattivare

Rimuove la possibilità di mostrare la descrizione comando di un elemento. La descrizione comando potrà essere visualizzata solo se riattivata.

tooltip.disable()

attiva/disattiva

Attiva o disattiva la possibilità di mostrare o nascondere la descrizione comando di un elemento.

tooltip.toggleEnabled()

aggiornare

Aggiorna la posizione della descrizione comando di un elemento.

tooltip.update()

getInstance

Metodo statico che consente di ottenere l'istanza della descrizione comando associata a un elemento DOM

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

getOrCreateInstance

Metodo statico che ti consente di ottenere l'istanza della descrizione comando associata a un elemento DOM o di crearne una nuova nel caso non sia stata inizializzata

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

Eventi

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

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

tooltip.hide()