Salta à u cuntenutu principale Salta à a navigazione di documenti
in English

Tooltips

Documentazione è esempi per aghjunghje tooltips Bootstrap persunalizati cù CSS è JavaScript utilizendu CSS3 per animazioni è data-bs-attributi per u almacenamentu di titulu lucale.

Panoramica

Cose da sapè quandu utilizate u plugin tooltip:

  • Tooltips s'appoghjanu nantu à a libreria di terzu Popper per u posizionamentu. Duvete include popper.min.js prima di bootstrap.js o utilizate bootstrap.bundle.min.js/ bootstrap.bundle.jschì cuntene Popper per chì i tooltips funzionanu!
  • I Tooltips sò opt-in per ragioni di rendiment, cusì duvete inizializzalli voi stessu .
  • Tooltips cù tituli di lunghezza zero ùn sò mai affissati.
  • Specificate container: 'body'per evità prublemi di rende in cumpunenti più cumplessi (cum'è i nostri gruppi di input, gruppi di buttone, etc.).
  • Triggering tooltips nantu à elementi nascosti ùn funziona micca.
  • Tooltips per .disabledo disabledelementi deve esse attivatu nantu à un elementu wrapper.
  • Quandu s'hè attivatu da i ligami ipertesi chì spannu parechje linee, i tooltips seranu centrati. Aduprate white-space: nowrap;nantu à u vostru <a>s per evità stu cumpurtamentu.
  • Tooltips deve esse ammucciatu prima chì i so elementi currispondenti sò stati eliminati da u DOM.
  • Tooltips ponu esse attivati ​​grazia à un elementu in un DOM ombra.
Per automaticamente, stu cumpunente usa u sanitizer di cuntenutu integratu, chì sguassate qualsiasi elementi HTML chì ùn sò micca esplicitamente permessi. Vede a sezione di disinfettante in a nostra documentazione JavaScript per più dettagli.
L'effettu di l'animazione di stu cumpunente dipende da a prefers-reduced-motionmedia query. Vede a sezione di movimentu ridottu di a nostra documentazione d'accessibilità .

Avete tuttu ciò? Grande, vedemu cumu travaglianu cù qualchi esempi.

Esempiu: Attivà i tooltips in ogni locu

Una manera di inizializà tutti i tooltips in una pagina seria di selezziunate per u so data-bs-toggleattributu:

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

Esempii

Passa sopra i ligami sottu per vede tooltips:

Testu di piazzamentu per dimustrà alcuni ligami in linea cù tooltips. Questu hè avà solu filler, micca assassinu. Cuntinutu piazzatu quì solu per imite a prisenza di u testu veru . È tuttu ciò solu per dà un'idea di cumu si parevanu i tooltips quandu sò usati in situazioni di u mondu reale. Allora spergu chì avete avà vistu cumu questi tooltips nantu à i ligami ponu travaglià in pratica, una volta chì l'utilizate in u vostru situ o prughjettu.

Passa sopra i buttoni quì sottu per vede e quattru direzzione di tooltips: cima, destra, fondu è manca. L'indicazioni sò specchiate quandu si usa 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>

È cù HTML persunalizatu aghjuntu:

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

Cù 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;

Usu

U plugin di tooltip genera cuntenutu è marcatu nantu à a dumanda, è di manera predeterminata mette tooltips dopu u so elementu trigger.

Trigger u tooltip via JavaScript:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
Overflow autoèscroll

A pusizione di Tooltip prova di cambià automaticamente quandu un cuntainer parentoverflow: autoo overflow: scrollpiace u nostru .table-responsive, ma mantene sempre a pusizione di u locu originale. Per risolve questu, stabilisce l' boundaryopzione (per u modificatore flip usendu l' popperConfigopzione) à qualsiasi HTMLElement per annullà u valore predeterminatu 'clippingParents', cum'è document.body:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

Marcatura

U marcatu necessariu per un tooltip hè solu un dataattributu è titlenantu à l'elementu HTML chì vulete avè un tooltip. U marcatu generatu di un tooltip hè piuttostu simplice, ancu s'ellu ci vole una pusizioni (per difettu, stabilitu topda u plugin).

Fà chì i tooltips funzionanu per l'utilizatori di u teclatu è di a tecnulugia di assistenza

Duvete solu aghjunghje tooltips à l'elementi HTML chì sò tradizionalmente focalizati da u teclatu è interattivi (cum'è ligami o cuntrolli di forma). Ancu se l'elementi HTML arbitrarii (cum'è <span>s) ponu esse focalizzati aghjustendu l' tabindex="0"attributu, questu aghjunghjenu tabulazione potenzialmente fastidiosa è confusa nantu à elementi non interattivi per l'utilizatori di u teclatu, è a maiò parte di e tecnulugii d'assistenza attualmente ùn anu micca annunzià u tooltip in questa situazione. Inoltre, ùn fiate micca solu hovercum'è u trigger per u vostru tooltip, postu chì questu renderà i vostri tooltips impussibili di attivà per l'utilizatori di u teclatu.

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

L'elementi cù l' disabledattributu ùn sò micca interattivi, vale à dì chì l'utilizatori ùn ponu micca focalizà, passanu o cliccà per attivà un tooltip (o popover). Cum'è una soluzione alternativa, vi vulete attivà u tooltip da un wrapper <div>o <span>, idealmente fattu focalizatu da u teclatu cù 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

L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-bs-, cum'è in data-bs-animation="". Assicuratevi di cambià u tipu di casu di u nome di l'opzione da camelCase à kebab-case quandu passanu l'opzioni via attributi di dati. Per esempiu, invece d'utilizà data-bs-customClass="beautifier", utilizate data-bs-custom-class="beautifier".

Nota chì, per ragioni di sicurità, l' opzioni sanitize, sanitizeFn, è allowListùn ponu esse furnite cù l'attributi di dati.
Nome Tipu Default Descrizzione
animation booleanu true Applica una transizione di dissolvenza CSS à u tooltip
container stringa | elementu | falsu false

Appendi u tooltip à un elementu specificu. Esempiu container: 'body':. Questa opzione hè particularmente utile in quantu vi permette di pusà u tooltip in u flussu di u documentu vicinu à l'elementu di attivazione - chì impedisce chì u tooltip flote luntanu da l'elementu di attivazione durante un ridimensionamentu di a finestra.

delay numeru | ughjettu 0

Ritarda di mostra è nasconde u tooltip (ms) - ùn hè micca applicatu à u tipu di trigger manuale

Se un numeru hè furnitu, u ritardu hè appiicatu à tramindui nascondere / mostra

A struttura di l'ughjettu hè:delay: { "show": 500, "hide": 100 }

html booleanu false

Permette HTML in u tooltip.

Se veru, e tag HTML in u tooltip's titleseranu resi in u tooltip. Se false, innerTexta pruprietà serà aduprata per inserisce u cuntenutu in u DOM.

Aduprate u testu s'è vo site preoccupatu per l'attacchi XSS.

placement stringa | funzione 'top'

Cumu pusà u tooltip - auto | cima | fondu | manca | diritta.
Quandu autohè specificatu, reorienterà dinamicamente u tooltip.

Quandu una funzione hè aduprata per determinà u piazzamentu, hè chjamatu cù u nodu DOM di tooltip cum'è u so primu argumentu è l'elementu triggering DOM node cum'è u so secondu. U thiscuntestu hè stabilitu à l'istanza tooltip.

selector stringa | falsu false Se un selettore hè furnitu, l'uggetti tooltip seranu delegati à i miri specificati. In pratica, questu hè adupratu ancu per applicà cunsiglii di strumenti à elementi DOM aghjunti dinamicamente ( jQuery.onsupportu). Vede questu è un esempiu informativu .
template stringa '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

HTML di basa à aduprà quandu crea u tooltip.

U tooltip titlesarà injectatu in u .tooltip-inner.

.tooltip-arrowdiventerà a freccia di u tooltip.

L'elementu wrapper più esterno deve avè a .tooltipclassa è role="tooltip".

title stringa | elementu | funzione ''

Valore di u titulu predeterminatu se titlel'attributu ùn hè micca presente.

Se una funzione hè datu, serà chjamata cù u so thisriferimentu stabilitu à l'elementu chì u tooltip hè attaccatu.

trigger stringa 'hover focus'

Cumu hè attivatu u tooltip - cliccate | sopra | focus | manuale. Pudete passà parechje triggers; separali cù un spaziu.

'manual'indica chì u tooltip serà attivatu programaticamente via i metudi .show(), .hide()è ; .toggle()stu valore ùn pò esse cumminatu cù qualsiasi altru trigger.

'hover'da u so propiu risultatu in tooltips chì ùn ponu micca esse attivati ​​via u teclatu, è deve esse usatu solu se i metudi alternativi per trasmette a listessa infurmazione per l'utilizatori di u teclatu sò prisenti.

fallbackPlacements array ['top', 'right', 'bottom', 'left'] Definite i piazzamenti fallback fornendu una lista di piazzamenti in array (in ordine di preferenza). Per più infurmazione, fate riferimentu à i documenti di cumpurtamentu di Popper
boundary stringa | elementu 'clippingParents' Limite di limitazione di overflow di u tooltip (applica solu à u modificatore preventOverflow di Popper). Per automaticamente hè 'clippingParents'è pò accettà una riferenza HTMLElement (via JavaScript solu). Per più infurmazione, fate riferimentu à i docs detectOverflow di Popper .
customClass stringa | funzione ''

Aghjunghjite classi à u tooltip quandu si mostra. Nota chì queste classi seranu aghjunte in più di qualsiasi classi specificate in u mudellu. Per aghjunghje parechje classi, siparalli cù spazii: 'class-1 class-2'.

Pudete ancu passà una funzione chì deve rinvià una sola stringa chì cuntene nomi di classi supplementari.

sanitize booleanu true Attivà o disattivà a sanitizazione. Se attivatu 'template'è 'title'l'opzioni seranu sanitizzati. Vede a sezione di disinfettante in a nostra documentazione JavaScript .
allowList ughjettu Valore predeterminatu Ughjettu chì cuntene attributi permessi è tags
sanitizeFn null | funzione null Quì pudete furnisce a vostra propria funzione di sanitizazione. Questu pò esse utile se preferite aduprà una biblioteca dedicata per fà a sanitizazione.
offset array | stringa | funzione [0, 0]

Offset di u tooltip relative à u so scopu. Pudete passà una stringa in attributi di dati cù valori separati da virgola cum'è:data-bs-offset="10,20"

Quandu una funzione hè aduprata per determinà l'offset, hè chjamatu cù un oggettu chì cuntene a pusizione di popper, a riferenza è u popper rects cum'è u so primu argumentu. L'elementu triggering node DOM hè passatu cum'è u sicondu argumentu. A funzione deve rinvià un array cù dui numeri: .[skidding, distance]

Per più infurmazione, fate riferimentu à i documenti offset di Popper .

popperConfig null | ughjettu | funzione null

Per cambià a configurazione Popper predeterminata di Bootstrap, vede a cunfigurazione di Popper .

Quandu una funzione hè aduprata per creà a cunfigurazione Popper, hè chjamata cù un ughjettu chì cuntene a cunfigurazione Popper predeterminata di Bootstrap. Vi aiuta à aduprà è unisce u predeterminatu cù a vostra propria cunfigurazione. A funzione deve rinvià un oggettu di cunfigurazione per Popper.

Attributi di dati per tooltips individuali

L'opzioni per i tooltips individuali ponu esse specificati in alternativa attraversu l'usu di l'attributi di dati, cum'è spiegatu sopra.

Utilizà a funzione cùpopperConfig

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

I metudi

Metudi asincroni è transizioni

Tutti i metudi API sò asincroni è cumincianu una transizione . Ritornanu à u chjamante appena a transizione hè iniziata, ma prima chì finisce . Inoltre, un metudu chjamatu nantu à un cumpunente di transizione serà ignoratu .

Vede a nostra documentazione JavaScript per più infurmazione .

mostra

Revela u tooltip di l'elementu. Ritorna à u chjamante prima chì u tooltip hè statu veramente mostratu (vale à dì prima chì l' shown.bs.tooltipavvenimentu si faci). Questu hè cunsideratu un attivazione "manuale" di u tooltip. Tooltips cù tituli di lunghezza zero ùn sò mai affissati.

tooltip.show()

ammuccià

Nasconde u tooltip di un elementu. Ritorna à u chjamante prima chì a tooltip hè stata oculata (vale à dì prima chì l' hidden.bs.tooltipavvenimentu si faci). Questu hè cunsideratu un attivazione "manuale" di u tooltip.

tooltip.hide()

toggle

Commuta u tooltip di un elementu. Ritorna à u chjamante prima chì u tooltip hè statu veramente mostratu o oculatu (vale à dì prima chì l' avvenimentu shown.bs.tooltipo hidden.bs.tooltipsi faci). Questu hè cunsideratu un attivazione "manuale" di u tooltip.

tooltip.toggle()

disposti

Oculta è distrugge u tooltip di un elementu (Elimina i dati almacenati nantu à l'elementu DOM). Tooltips chì utilizanu a delegazione (chì sò creati cù l' selectoropzione ) ùn ponu micca esse distrutte individualmente nantu à elementi di trigger discendenti.

tooltip.dispose()

attivà

Dà un tooltip d'elementu a capacità di esse mostratu. Tooltips sò attivati ​​per automaticamente.

tooltip.enable()

disattivà

Elimina a capacità per esse mostratu u tooltip di un elementu. U tooltip pò esse mostratu solu s'ellu hè riattivatu.

tooltip.disable()

toggleEnabled

Commuta a capacità per chì u tooltip di un elementu sia mostratu o ammucciatu.

tooltip.toggleEnabled()

aghjurnamentu

Aghjurnate a pusizione di u tooltip di un elementu.

tooltip.update()

getInstance

Metudu staticu chì vi permette di uttene l'istanza tooltip assuciata à un elementu DOM

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

getOrCreateInstance

Metudu staticu chì vi permette di uttene l'istanza di tooltip assuciata à un elementu DOM, o creà un novu in casu ùn hè micca inizializatu

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

Avvenimenti

Tipu di avvenimentu Descrizzione
show.bs.tooltip Questu avvenimentu spara immediatamente quandu u showmetudu di istanza hè chjamatu.
shown.bs.tooltip Questu avvenimentu hè sparatu quandu u tooltip hè statu resu visibile à l'utilizatore (aspetterà chì e transizioni CSS finiscinu).
hide.bs.tooltip Questu avvenimentu hè sparatu immediatamente quandu u hidemetudu di istanza hè statu chjamatu.
hidden.bs.tooltip Questu avvenimentu hè sparatu quandu u tooltip hà finitu di esse oculatu da l'utilizatore (aspetterà chì e transizioni CSS finiscinu).
inserted.bs.tooltip Questu avvenimentu hè sparatu dopu l' show.bs.tooltipavvenimentu quandu u mudellu di tooltip hè statu aghjuntu à u DOM.
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()