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.
• 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.
• Popovers ponu esse attivati ​​grazia à un elementu in un DOM ombra.

Continua a leghje per vede cumu i popovers funzionanu cù alcuni esempi.

Esempiu: Habilita 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="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-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.

<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

Abilita popovers via JavaScript:

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

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

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

I metudi

$().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. Popovers chì u titulu è u cuntenutu sò tutti dui 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 oculata.

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

.popover('update')

Aghjurnate a pusizione di popover di un elementu.

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

Avvenimenti

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})