Popovers
Documentazione è esempi per aghjunghje popovers Bootstrap, cum'è quelli chì si trovanu in iOS, à qualsiasi elementu in u vostru situ.
Panoramica
Cose da sapè quandu si usa u plugin popover:
- Popovers s'appoghjanu nantu à a biblioteca di u 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 popovers funzionanu! - Popovers necessitanu u plugin tooltip cum'è una dipendenza.
- I popovers sò opt-in per ragioni di rendiment, cusì duvete inizializzalli voi stessu .
- A lunghezza zero
title
ècontent
i valori ùn mostraranu mai un popover. - Specificate
container: 'body'
per evità prublemi di rende in cumpunenti più cumplessi (cum'è i nostri gruppi di input, gruppi di buttone, etc.). - Triggering popovers nantu à elementi nascosti ùn funziona micca.
- Popovers per
.disabled
odisabled
elementi deve esse attivati nantu à un elementu wrapper. - Quandu sò attivati da ancore chì si avvolgenu in parechje linee, i popovers seranu centrati trà a larghezza generale di l'ancore. Aduprate
.text-nowrap
nantu à u vostru<a>
s per evità stu cumpurtamentu. - Popovers deve esse ammucciatu prima chì i so elementi currispondenti sò stati eliminati da u DOM.
- Popovers 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à .
Continua a leghje per vede cumu i popovers funzionanu cù alcuni esempi.
Esempiu: Attivate popovers in ogni locu
Una manera di inizializà tutti i popovers in una pagina seria di selezziunà per u so data-bs-toggle
attributu:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
Esempiu: Utilizà l' container
opzione
Quandu avete qualchi stili nantu à un elementu parent chì interferiscenu cù un popover, vi vulete specificà un persunalizatu container
per chì l'HTML di u popover apparisce in quellu elementu invece.
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
Esempiu
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
Quattru direzzione
Quattru opzioni sò dispunibuli: in cima, a diritta, in fondu è a manca allinata. L'indicazioni sò specchiate quandu si usa Bootstrap in RTL.
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
Popover on left
</button>
Licenziate nantu à u prossimu clic
Aduprate u focus
trigger per scaccià i popovers nantu à u prossimu clic di l'utilizatori di un elementu sfarente da l'elementu di toggle.
Marcatura specifica necessaria per dismiss-on-next-click
Per un cumpurtamentu propiu cross-browser è cross-platform, duvete aduprà l' <a>
etichetta, micca l' <button>
etichetta, è ancu deve include un tabindex
attributu.
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
trigger: 'focus'
})
Elementi disabilitati
L'elementi cù l' disabled
attributu ùn sò micca interattivi, vale à dì chì l'utilizatori ùn ponu micca sopra o cliccà per attivà un popover (o tooltip). Cum'è una soluzione alternativa, vi vulete attivà u popover da un wrapper <div>
o <span>
, idealmente fattu focalizatu da u teclatu cù tabindex="0"
.
Per attivatori di popover disattivati, pudete ancu preferite data-bs-trigger="hover focus"
cusì chì u popover apparisce cum'è feedback visuale immediatu à i vostri utilizatori perchè ùn anu micca aspittà di cliccà nantu à un elementu disabilitatu.
<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
Sass
Variabili
$popover-font-size: $font-size-sm;
$popover-bg: $white;
$popover-max-width: 276px;
$popover-border-width: $border-width;
$popover-border-color: rgba($black, .2);
$popover-border-radius: $border-radius-lg;
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow: $box-shadow;
$popover-header-bg: shade-color($popover-bg, 6%);
$popover-header-color: $headings-color;
$popover-header-padding-y: .5rem;
$popover-header-padding-x: $spacer;
$popover-body-color: $body-color;
$popover-body-padding-y: $spacer;
$popover-body-padding-x: $spacer;
$popover-arrow-width: 1rem;
$popover-arrow-height: .5rem;
$popover-arrow-color: $popover-bg;
$popover-arrow-outer-color: fade-in($popover-border-color, .05);
Usu
Attivate popovers via JavaScript:
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
Fà chì i popovers funzionanu per l'utilizatori di tastiera è di tecnulugia di assistenza
Per permettà à l'utilizatori di u teclatu per attivà i vostri popovers, duvete aghjunghje solu à elementi HTML chì sò tradiziunali focalizzati in u teclatu è 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 annunziatu u cuntenutu di popover in questa situazione. . Inoltre, ùn fiate micca solu hover
cum'è u trigger per i vostri popovers, postu chì questu li farà impussibili per l'utilizatori di u teclatu.
Mentre pudete inserisce HTML riccu è strutturatu in popovers cù l' html
opzione, ricumandemu fermamente chì evità di aghjunghje una quantità eccessiva di cuntenutu. U modu chì i popovers travaglianu attualmente hè chì, una volta affissatu, u so cuntenutu hè ligatu à l'elementu di trigger cù l' aria-describedby
attributu. In u risultatu, l'interu cuntenutu di u popover serà annunziatu à l'utilizatori di a tecnulugia di assistenza cum'è un flussu longu è ininterrottu.
Inoltre, mentre hè pussibule ancu include cuntrolli interattivi (cum'è elementi di forma o ligami) in u vostru popover (aghjunghjendu questi elementi à l' allowList
attributi è e tag permessi), sia cuscenti chì attualmente u popover ùn gestisce micca l'ordine di focus di u teclatu. Quandu un utilizatore di u teclatu apre un popover, l'enfasi resta nantu à l'elementu di attivazione, è cum'è u popover ùn seguita micca immediatamente u trigger in a struttura di u documentu, ùn ci hè micca garanzia chì avanzà / pressendu.TABmoverà un utilizatore di tastiera in u popover stessu. In breve, solu aghjunghje cuntrolli interattivi à un popover hè prubabile di rende questi cuntrolli inaccessibili / inutilizabili per l'utilizatori di u teclatu è l'utilizatori di tecnulugii d'assistenza, o almenu facenu un ordine di focu generale illogicu. In questi casi, cunzidira à utilizà un dialogu modale invece.
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"
.
sanitize
,
sanitizeFn
, è
allowList
ùn ponu esse furnite cù l'attributi di dati.
Nome | Tipu | Default | Descrizzione |
---|---|---|---|
animation |
booleanu | true |
Applica una transizione di fade CSS à u popover |
container |
stringa | elementu | falsu | false |
Appendi u popover à un elementu specificu. Esempiu |
content |
stringa | elementu | funzione | '' |
Valore di cuntenutu predeterminatu se Se una funzione hè datu, serà chjamata cù u so |
delay |
numeru | ughjettu | 0 |
Ritarda di mostra è nasconde u popover (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 | false |
Inserite HTML in u popover. Se false, innerText a pruprietà serà aduprata per inserisce u cuntenutu in u DOM. Aduprate u testu s'è vo site preoccupatu per l'attacchi XSS. |
placement |
stringa | funzione | 'right' |
Cumu pusà u popover - auto | cima | fondu | manca | diritta. Quandu una funzione hè aduprata per determinà a piazza, hè chjamata cù u popover DOM node cum'è u so primu argumentu è l'elementu triggering DOM node cum'è u so secondu. U |
selector |
stringa | falsu | false |
Se un selettore hè furnitu, l'uggetti popover seranu delegati à i miri specificati. In pratica, questu hè utilizatu per attivà u cuntenutu HTML dinamicu per avè popovers aghjuntu. Vede questu è un esempiu informativu . |
template |
stringa | '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Base HTML per aduprà quandu crea u popover. U popover U popover
L'elementu wrapper più esterno deve avè a |
title |
stringa | elementu | funzione | '' |
Valore di u titulu predeterminatu se Se una funzione hè datu, serà chjamata cù u so |
trigger |
stringa | 'click' |
Cume popover hè attivatu - cliccate | sopra | focus | manuale. Pudete passà parechje triggers; separali cù un spaziu. manual ùn pò esse cumminatu cù qualsiasi altru trigger. |
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 popover (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 popover 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. |
sanitize |
booleanu | true |
Attivà o disattivà a sanitizazione. Se attivatu 'template' , 'content' è 'title' l'opzioni seranu sanitizate. 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, 8] |
Offset di u popover relative à u so scopu. Pudete passà una stringa in attributi di dati cù valori separati da virgola cum'è: 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: . 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 popovers individuali
L'opzioni per popovers individuali ponu esse specificati in alternativa per l'usu di l'attributi di dati, cum'è spiegatu sopra.
Utilizà a funzione cùpopperConfig
var popover = new bootstrap.Popover(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 popover di un elementu. Ritorna à u chjamante prima chì u popover hè statu veramente mostratu (vale à dì prima chì l' shown.bs.popover
avvenimentu si faci). Questu hè cunsideratu un attivazione "manuale" di u popover. Popovers chì u titulu è u cuntenutu sò tutti dui di lunghezza zero ùn sò mai affissati.
myPopover.show()
ammuccià
Nasconde u popover di un elementu. Ritorna à u chjamante prima chì u popover sia statu oculatu (vale à dì prima chì l' hidden.bs.popover
avvenimentu si faci). Questu hè cunsideratu un attivazione "manuale" di u popover.
myPopover.hide()
toggle
Commuta u popover di un elementu. Ritorna à u chjamante prima chì u popover sia statu veramente mostratu o oculatu (vale à dì prima chì l' avvenimentu shown.bs.popover
o hidden.bs.popover
si faci). Questu hè cunsideratu un attivazione "manuale" di u popover.
myPopover.toggle()
disposti
Oculta è distrugge u popover di un elementu (Elimina i dati almacenati nantu à l'elementu DOM). Popovers chì utilizanu a delegazione (chì sò creati cù l' selector
opzione ) ùn ponu micca esse distrutte individualmente nantu à elementi di trigger discendenti.
myPopover.dispose()
attivà
Dà a popover di un elementu a capacità di esse mostrata. I popovers sò attivati per difettu.
myPopover.enable()
disattivà
Elimina l'abilità di mostra un popover di l'elementu. U popover pò esse mostratu solu s'ellu hè riattivatu.
myPopover.disable()
toggleEnabled
Commuta a capacità per a popover di un elementu per esse mostrata o oculta.
myPopover.toggleEnabled()
aghjurnamentu
Aghjurnate a pusizione di popover di un elementu.
myPopover.update()
getInstance
Metudu staticu chì permette di ottene l'istanza popover assuciata à un elementu DOM
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
getOrCreateInstance
Metudu staticu chì vi permette di ottene l'istanza popover assuciata à un elementu DOM, o creà un novu in casu ùn hè micca inizializatu
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
Avvenimenti
Tipu di avvenimentu | Descrizzione |
---|---|
mostra.bs.popover | Questu avvenimentu spara immediatamente quandu u show metudu di istanza hè chjamatu. |
mostratu.bs.popover | Questu avvenimentu hè sparatu quandu u popover hè statu resu visibile à l'utilizatore (aspetterà chì e transizioni CSS finiscinu). |
nascondere.bs.popover | Questu avvenimentu hè sparatu immediatamente quandu u hide metudu di istanza hè statu chjamatu. |
hidden.bs.popover | Questu avvenimentu hè sparatu quandu u popover hà finitu di esse oculatu da l'utilizatore (aspetterà chì e transizioni CSS finiscinu). |
inseritu.bs.popover | Questu avvenimentu hè sparatu dopu l' show.bs.popover avvenimentu quandu u mudellu popover hè statu aghjuntu à u DOM. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})