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

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.jschì 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è contenti 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 .disabledo disabledelementi 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-nowrapnantu à 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.
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à .

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

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Esempiu: Utilizà l' containeropzione

Quandu avete qualchi stili nantu à un elementu parent chì interferiscenu cù un popover, vi vulete specificà un persunalizatu containerper 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 focustrigger 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 tabindexattributu.

<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' disabledattributu ù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 hovercum'è 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' htmlopzione, 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-describedbyattributu. 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' allowListattributi è 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".

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 fade CSS à u popover
container stringa | elementu | falsu false

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

content stringa | elementu | funzione ''

Valore di cuntenutu predeterminatu se data-bs-contentl'attributu ùn hè micca presente.

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

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è:delay: { "show": 500, "hide": 100 }

html booleanu false Inserite HTML in u popover. 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 'right'

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

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 thiscuntestu hè stabilitu à l'istanza popover.

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 titleserà injectatu in u .popover-header.

U popover contentserà injectatu in u .popover-body.

.popover-arrowdiventerà a freccia di u popover.

L'elementu wrapper più esterno deve avè a .popoverclassa.

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 popover hè attaccatu.

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: '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', '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'è: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 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.popoveravvenimentu 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.popoveravvenimentu 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.popovero hidden.bs.popoversi 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' selectoropzione ) ù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 showmetudu 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 hidemetudu 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.popoveravvenimentu quandu u mudellu popover hè statu aghjuntu à u DOM.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})