Tooltips
Documentazione è esempi per aghjunghje tooltips Bootstrap persunalizati cù CSS è JavaScript utilizendu CSS3 per animazioni è attributi di dati per u almacenamentu di u titulu lucale.
Panoramica
Cose da sapè quandu si usa 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.js
chì cuntene Popper per chì i tooltips funzionanu! - Se custruite u nostru JavaScript da a fonte, hè necessariu
util.js
. - I Tooltips sò opt-in per ragioni di rendiment, cusì duvete inizializzalli da 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
.disabled
odisabled
elementi 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.
prefers-reduced-motion
media 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-toggle
attributu:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
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.
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
È cù HTML persunalizatu aghjuntu:
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
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:
$('#example').tooltip(options)
Overflow auto
èscroll
A pusizione di Tooltip prova di cambià automaticamente quandu un cuntainer parent hà overflow: auto
o overflow: scroll
piace u nostru .table-responsive
, ma mantene sempre a pusizione di u locu originale. Per risolve, stabilisce l' boundary
opzione à qualcosa altru ch'è u valore predeterminatu 'scrollParent'
, cum'è 'window'
:
$('#example').tooltip({ boundary: 'window' })
Marcatura
U marcatu necessariu per un tooltip hè solu un data
attributu è title
nantu à 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 top
da 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 è interattivi (cum'è ligami o cuntrolli di forma). Ancu se l'elementi HTML arbitrarii (cum'è <span>
s) ponu esse focalizzati aghjunghjendu 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 tecnulugie d'assistenza ùn anu micca annunzià l'utillita in questa situazione. Inoltre, ùn fiate micca solu hover
cum'è 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-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="arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
Elementi disabilitati
L'elementi cù l' disabled
attributu ù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 focusable da u teclatu usendu tabindex="0"
, è annullà l' pointer-events
elementu disattivatu.
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" 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-
, cum'è in data-animation=""
.
sanitize
,
sanitizeFn
è
whiteList
ùn ponu micca esse furnite cù l'attributi di dati.
Nome | Tipu | Default | Descrizzione |
---|---|---|---|
animazione | booleanu | veru | Applica una transizione di dissolvenza CSS à u tooltip |
cuntainer | stringa | elementu | falsu | falsu | Appendi u tooltip à un elementu specificu. Esempiu: |
ritardu | 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è: |
html | booleanu | falsu | Permette HTML in u tooltip. Se veru, e tag HTML in u tooltip's Aduprate u testu s'è vo site preoccupatu per l'attacchi XSS. |
piazzamentu | stringa | funzione | 'top' | Cumu pusà u tooltip - auto | cima | fondu | manca | diritta. Quandu una funzione hè aduprata per determinà a pusizione, hè chjamata cù u nodu DOM di tooltip cum'è u so primu argumentu è l'elementu triggering node DOM cum'è u sicondu. U |
selettore | stringa | falsu | falsu | 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 aghjuntu dinamicamente ( jQuery.on supportu). Vede questu è un esempiu informativu . |
mudellu | stringa | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
HTML di basa à aduprà quandu crea u tooltip. U tooltip
L'elementu wrapper più esterno deve avè a |
titulu | stringa | elementu | funzione | '' | Valore di u titulu predeterminatu se Se una funzione hè datu, serà chjamata cù u so |
trigger | stringa | "focus" | Cumu hè attivatu u tooltip - cliccate | sopra | focus | manuale. Pudete passà parechje triggers; separali cù un spaziu.
|
offset | numeru | stringa | funzione | 0 | Offset di u tooltip relative à u so scopu. Quandu una funzione hè aduprata per determinà l'offset, hè chjamatu cù un ughjettu chì cuntene a data offset cum'è u so primu argumentu. A funzione deve rinvià un oggettu cù a listessa struttura. L'elementu triggering node DOM hè passatu cum'è u sicondu argumentu. Per più infurmazione, fate riferimentu à i documenti offset di Popper . |
fallbackPiazzamentu | stringa | array | 'flip' | Permette di specificà quale pusizioni Popper utilizerà in fallback. Per più infurmazione, fate riferimentu à i documenti di cumpurtamentu di Popper |
Classe persunalizata | 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: Pudete ancu passà una funzione chì deve rinvià una sola stringa chì cuntene nomi di classi supplementari. |
cunfini | stringa | elementu | 'scrollParent' | Limite di limitazione di overflow di u tooltip. Accetta i valori di 'viewport' , 'window' , 'scrollParent' , o un riferimentu HTMLElement (solu JavaScript). Per più infurmazione, riferite à Popper's preventOverflow docs . |
sanitizà | booleanu | veru | Attivà o disattivà a sanitizazione. Se attivatu 'template' è 'title' l'opzioni seranu sanitizzati. Vede a sezione di disinfettante in a nostra documentazione JavaScript . |
lista bianca | ughjettu | Valore predeterminatu | Ughjettu chì cuntene attributi permessi è tags |
sanitize Fn | null | funzione | nulla | Quì pudete furnisce a vostra propria funzione di sanitizazione. Questu pò esse utile se preferite aduprà una biblioteca dedicata per fà a sanitizazione. |
popperConfig | null | ughjettu | nulla | Per cambià a configurazione Popper predeterminata di Bootstrap, vede a cunfigurazione di 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.
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 .
$().tooltip(options)
Attacca un gestore di tooltip à una cullizzioni di elementi.
.tooltip('show')
Revela u tooltip di l'elementu. Ritorna à u chjamante prima chì u tooltip hè statu veramente mostratu (vale à dì prima chì l' shown.bs.tooltip
avvenimentu si faci). Questu hè cunsideratu un attivazione "manuale" di u tooltip. Tooltips cù tituli di lunghezza zero ùn sò mai affissati.
$('#element').tooltip('show')
.tooltip('hide')
Nasconde u tooltip di un elementu. Ritorna à u chjamante prima chì a tooltip hè stata oculata (vale à dì prima chì l' hidden.bs.tooltip
avvenimentu si faci). Questu hè cunsideratu un attivazione "manuale" di u tooltip.
$('#element').tooltip('hide')
.tooltip('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.tooltip
o hidden.bs.tooltip
si faci). Questu hè cunsideratu un attivazione "manuale" di u tooltip.
$('#element').tooltip('toggle')
.tooltip('dispose')
Oculta è distrugge u tooltip di un elementu. Tooltips chì utilizanu a delegazione (chì sò creati cù l' selector
opzione ) ùn ponu micca esse distrutte individualmente nantu à elementi di trigger discendenti.
$('#element').tooltip('dispose')
.tooltip('enable')
Dà un tooltip d'elementu a capacità di esse mostratu. Tooltips sò attivati per automaticamente.
$('#element').tooltip('enable')
.tooltip('disable')
Elimina a capacità per esse mostratu u tooltip di un elementu. U tooltip pò esse mostratu solu s'ellu hè riattivatu.
$('#element').tooltip('disable')
.tooltip('toggleEnabled')
Commuta a capacità per chì u tooltip di un elementu sia mostratu o ammucciatu.
$('#element').tooltip('toggleEnabled')
.tooltip('update')
Aghjurnate a pusizione di u tooltip di un elementu.
$('#element').tooltip('update')
Avvenimenti
Tipu d'avvenimentu | Descrizzione |
---|---|
mostra.bs.tooltip | Questu avvenimentu spara immediatamente quandu u show metudu di istanza hè chjamatu. |
mostratu.bs.tooltip | Questu avvenimentu hè sparatu quandu u tooltip hè statu resu visibile à l'utilizatore (aspetterà chì e transizioni CSS finiscinu). |
nascondere.bs.tooltip | Questu avvenimentu hè sparatu immediatamente quandu u hide metudu 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). |
inseritu.bs.tooltip | Questu avvenimentu hè sparatu dopu l' show.bs.tooltip avvenimentu quandu u mudellu di tooltip hè statu aghjuntu à u DOM. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})