Source

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 utilizate u plugin tooltip:

  • Tooltips s'appoghjanu nantu à a libreria di terzu Popper.js per u posizionamentu. Duvete include popper.min.js prima di bootstrap.js o utilizate bootstrap.bundle.min.js/ bootstrap.bundle.jschì cuntene Popper.js per chì i tooltips funzionanu!
  • Se custruite u nostru JavaScript da a fonte, hè necessariuutil.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 .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.

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

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Esempii

Passa sopra i ligami sottu per vede tooltips:

Pantaloni stretti u prossimu livellu keffiyeh chì probabilmente ùn avete micca intesu parlà di elli. Photo Booth barba raw denim letterpress vegan messenger bag stumptown. Seitan da a tavola à a tavola, i vestiti americani americani di quinoa 8-bit fixie fixie di Mcsweeney anu un chambray di vinile Terry Richardson. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. Un artighjanu veramente ironicu qualunque keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim cafè d'origine unica virali.

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: autoo overflow: scrollpiace u nostru .table-responsive, ma mantene sempre a pusizione di u locu originale. Per risolve, stabilisce l' boundaryopzione à qualcosa altru ch'è u valore predeterminatu 'scrollParent', cum'è 'window':

$('#example').tooltip({ boundary: 'window' })

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 è 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 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-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' 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 focusable da u teclatu usendu tabindex="0", è annullà l' pointer-eventselementu 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="".

Nota chì, per ragioni di sicurezza, l' opzioni 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: 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.
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è:delay: { "show": 500, "hide": 100 }
html booleanu falsu

Permette HTML in u tooltip.

Se hè vera, e tag HTML in u tooltip titleseranu resi in u tooltip. Se falsu, u textmetudu di jQuery serà utilizatu per inserisce u cuntenutu in u DOM.

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 autohè specificatu, reorienterà dinamicamente u tooltip.

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 thiscuntestu hè stabilitu à l'istanza tooltip.
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 aghjunti dinamicamente ( jQuery.onsupportu). 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 titlesarà injectatu in u .tooltip-inner.

.arrowdiventerà a freccia di u tooltip.

L'elementu wrapper più esterno deve avè a .tooltipclassa è role="tooltip".
titulu 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 "focus"

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

'manual'indica chì u tooltip serà attivatu per prugrammazione via i metudi .tooltip('show'), .tooltip('hide')è ; .tooltip('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.
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, riferite à i documenti offset di Popper.js .
fallbackPiazzamentu stringa | array 'flip' Permette di specificà quale pusizioni Popper utilizerà in fallback. Per più infurmazione, riferite à i documenti di cumpurtamentu di Popper.js
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.js's preventOverflow docs .
sanitizà booleanu veru Attivà o disattivà a sanitizazione. Se attivatu 'template'è 'title'l'opzioni seranu sanitizzati.
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 cunfigurazione Popper.js predeterminata di Bootstrap, vede a cunfigurazione di Popper.js

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.tooltipavvenimentu 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.tooltipavvenimentu 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.tooltipo hidden.bs.tooltipsi 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' selectoropzione ) ù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 difettu.

$('#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 showmetudu 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 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).
inseritu.bs.tooltip Questu avvenimentu hè sparatu dopu l' show.bs.tooltipavvenimentu quandu u mudellu di tooltip hè statu aghjuntu à u DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})