Source

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 libreria di u 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 popovers funzionanu!
  • Popovers necessitanu u plugin tooltip cum'è una dipendenza.
  • Se custruite u nostru JavaScript da a fonte, hè necessariuutil.js .
  • 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.

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 selezziunate per u so data-toggleattributu:

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

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.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Esempiu

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-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.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  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.

Popover dismissibile 
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
  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, vi vulete attivà u popover da un wrapper <div>o <span>annullà l' pointer-eventselementu disattivatu.

Per attivatori di popover disattivati, pudete ancu preferite data-trigger="hover"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" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Usu

Attivate popovers via JavaScript:

$('#example').popover(options)

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="".

Nome Tipu Default Descrizzione
animazione booleanu veru Applica una transizione di fade CSS à u popover
cuntainer stringa | elementu | falsu falsu

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.
cuntenutu stringa | elementu | funzione ''

Valore di cuntenutu predeterminatu se data-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.
ritardu 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 falsu Inserite HTML in u popover. 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 'diritta'

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.
selettore stringa | falsu falsu 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 .
mudellu stringa '<div class="popover" role="tooltip"><div class="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.

.arrowdiventerà a freccia di u popover.

L'elementu wrapper più esterno deve avè a .popoverclassa.
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 popover hè attaccatu.
trigger stringa 'cliccate' 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.
offset numeru | stringa 0 Offset di u popover relative à u so scopu. Per più infurmazione riferite à Popper.js's offset docs .
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 popover. Accetta i valori di 'viewport', 'window', 'scrollParent', o un riferimentu HTMLElement (solu JavaScript). Per più infurmazione riferite à Popper.js's preventOverflow docs .

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.

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.

$().popover(options)

Inizializza popovers per una cullizzioni di elementi.

.popover('show')

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. I popovers chì u titulu è u cuntenutu sò di lunghezza zero ùn sò mai affissati.

$('#element').popover('show')

.popover('hide')

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.

$('#element').popover('hide')

.popover('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.

$('#element').popover('toggle')

.popover('dispose')

Oculta è distrugge u popover di un elementu. Popovers chì utilizanu a delegazione (chì sò creati cù l' selectoropzione ) ùn ponu micca esse distrutte individualmente nantu à elementi di trigger discendenti.

$('#element').popover('dispose')

.popover('enable')

Dà a popover di un elementu a capacità di esse mostrata. I popovers sò attivati ​​per difettu.

$('#element').popover('enable')

.popover('disable')

Elimina l'abilità di mostra un popover di l'elementu. U popover pò esse mostratu solu s'ellu hè riattivatu.

$('#element').popover('disable')

.popover('toggleEnabled')

Commuta a capacità per a popover di un elementu per esse mostrata o oculta.

$('#element').popover('toggleEnabled')

.popover('update')

Aghjurnate a pusizione di popover di un elementu.

$('#element').popover('update')

Avvenimenti

Tipu d'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. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})