Source

Popovers

Documentație și exemple pentru adăugarea popover-urilor Bootstrap, cum ar fi cele găsite în iOS, la orice element de pe site-ul dvs.

Prezentare generală

Lucruri de știut când utilizați pluginul popover:

  • Popovers se bazează pe biblioteca terță parte Popper.js pentru poziționare. Trebuie să includeți popper.min.js înainte de bootstrap.js sau să utilizați bootstrap.bundle.min.js/ bootstrap.bundle.jscare conține Popper.js pentru ca popover-urile să funcționeze!
  • Popover-urile necesită pluginul tooltip ca dependență.
  • Dacă construiți JavaScript din sursă, este nevoieutil.js de .
  • Popover-urile sunt opt-in din motive de performanță, așa că trebuie să le inițializați singur .
  • Lungimea zero titleși contentvalorile nu vor afișa niciodată un popover.
  • Specificați container: 'body'pentru a evita problemele de randare în componente mai complexe (cum ar fi grupurile noastre de intrare, grupurile de butoane etc.).
  • Declanșarea popover-urilor pe elemente ascunse nu va funcționa.
  • Popover-urile pentru .disabledsau disabledelemente trebuie să fie declanșate pe un element wrapper.
  • Când sunt declanșate de la ancore care se înfășoară pe mai multe linii, popover-urile vor fi centrate între lățimea totală a ancorelor. Folosește -l white-space: nowrap;pe tine <a>pentru a evita acest comportament.
  • Popover-urile trebuie ascunse înainte ca elementele lor corespunzătoare să fie eliminate din DOM.

Continuați să citiți pentru a vedea cum funcționează popover-urile cu câteva exemple.

Exemplu: activați popover-urile peste tot

O modalitate de a inițializa toate popover-urile dintr-o pagină ar fi să le selectați după data-toggleatributul lor:

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

Exemplu: Utilizarea containeropțiunii

Când aveți unele stiluri pe un element părinte care interferează cu un popover, veți dori să specificați o personalizare container, astfel încât HTML-ul popover-ului să apară în acel element.

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

Exemplu

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

Patru direcții

Sunt disponibile patru opțiuni: aliniat sus, dreapta, jos și stânga.

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

Închideți la următorul clic

Utilizați focusdeclanșatorul pentru a închide popover-urile la următorul clic al utilizatorului asupra unui alt element decât elementul de comutare.

Este necesar un marcaj specific pentru respingerea la clicul următor

Pentru un comportament adecvat între browsere și platforme, trebuie să utilizați <a>eticheta, nu eticheta <button>și, de asemenea, trebuie să includeți un tabindexatribut.

Popover dezactivat 
<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'
})

Elemente dezactivate

Elementele cu disabledatributul nu sunt interactive, ceea ce înseamnă că utilizatorii nu pot trece cu mouse-ul sau nu pot face clic pe ele pentru a declanșa un popover (sau un sfat instrument). Ca o soluție, veți dori să declanșați popover-ul dintr-un înveliș <div>sau <span>să înlocuiți pointer-eventselementul dezactivat.

Pentru declanșatoarele popover dezactivate, este posibil să preferați, data-trigger="hover"de asemenea, ca popoverul să apară ca feedback vizual imediat pentru utilizatorii dvs., deoarece aceștia nu se așteaptă să facă clic pe un element dezactivat.

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

Utilizare

Activați popover-urile prin JavaScript:

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

Opțiuni

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atributele datelor, adăugați numele opțiunii la data-, ca în data-animation="".

Nume Tip Mod implicit Descriere
animaţie boolean Adevărat Aplicați o tranziție de estompare CSS la popover
recipient șir | element | fals fals

Adaugă popover-ul la un anumit element. Exemplu: container: 'body'. Această opțiune este deosebit de utilă prin faptul că vă permite să poziționați popover-ul în fluxul documentului lângă elementul de declanșare - ceea ce va împiedica popover-ul să plutească departe de elementul de declanșare în timpul redimensionării ferestrei.
conţinut șir | element | funcţie ''

Valoarea implicită a conținutului dacă data-contentatributul nu este prezent.

Dacă este dată o funcție, aceasta va fi apelată cu thisreferința setată la elementul la care este atașat popover-ul.
întârziere număr | obiect 0

Întârziere afișarea și ascunderea popover-ului (ms) - nu se aplică tipului de declanșare manuală

Dacă este furnizat un număr, se aplică întârziere atât pentru ascunde/afișare

Structura obiectului este:delay: { "show": 500, "hide": 100 }
html boolean fals Inserați HTML în popover. Dacă este fals, textmetoda jQuery va fi folosită pentru a insera conținut în DOM. Folosiți text dacă vă îngrijorează atacurile XSS.
plasare șir | funcţie 'dreapta'

Cum să poziționați popover-ul - automat | sus | jos | stânga | dreapta.
Când autoeste specificat, va reorienta în mod dinamic popover-ul.

Când o funcție este utilizată pentru a determina plasarea, aceasta este apelată cu nodul popover DOM ca prim argument și elementul de declanșare nodul DOM ca al doilea. Contextul thiseste setat la instanța popover.
selector șir | fals fals Dacă este furnizat un selector, obiectele popover vor fi delegate țintelor specificate. În practică, aceasta este folosită pentru a permite conținutului HTML dinamic să fie adăugate popovers. Vedeți acesta și un exemplu informativ .
șablon şir '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

HTML de bază de utilizat la crearea popover-ului.

Popover-urile titlevor fi injectate în .popover-header.

Popover-urile contentvor fi injectate în .popover-body.

.arrowva deveni săgeata popover-ului.

Elementul de înveliș exterior ar trebui să aibă .popoverclasa.
titlu șir | element | funcţie ''

Valoarea implicită a titlului dacă titleatributul nu este prezent.

Dacă este dată o funcție, aceasta va fi apelată cu thisreferința setată la elementul la care este atașat popover-ul.
declanșatorul şir 'clic' Cum se declanșează popoverul - faceți clic pe | hover | focus | manual. Puteți trece mai multe declanșatoare; separați-le cu un spațiu. `manual` nu poate fi combinat cu niciun alt declanșator.
decalaj număr | şir 0 Deplasarea popover-ului în raport cu ținta sa. Pentru mai multe informații, consultați documentele offset ale Popper.js .
plasare de rezervă șir | matrice „întoarce” Permiteți să specificați ce poziție va folosi Popper în cazul de rezervă. Pentru mai multe informații, consultați documentele de comportament ale Popper.js
limite șir | element 'scrollParent' Limita constrângerii de depășire a popover-ului. Acceptă valorile 'viewport', 'window', 'scrollParent', sau o referință HTMLElement (numai JavaScript). Pentru mai multe informații, consultați documentele preventOverflow ale Popper.js .

Atribute de date pentru popovers individuale

Opțiunile pentru popover-uri individuale pot fi specificate alternativ prin utilizarea atributelor de date, așa cum s-a explicat mai sus.

Metode

Metode și tranziții asincrone

Toate metodele API sunt asincrone și încep o tranziție . Ei revin la apelant imediat ce tranziția este începută, dar înainte ca aceasta să se încheie . În plus, un apel de metodă pentru o componentă de tranziție va fi ignorat .

Consultați documentația noastră JavaScript pentru mai multe informații.

$().popover(options)

Inițializează popover-urile pentru o colecție de elemente.

.popover('show')

Dezvăluie popover-ul unui element. Revine la apelant înainte ca popover-ul să fie afișat efectiv (adică înainte de apariția shown.bs.popoverevenimentului). Aceasta este considerată o declanșare „manuală” a popover-ului. Popover-urile al căror titlu și conținut sunt de lungime zero nu sunt niciodată afișate.

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

.popover('hide')

Ascunde popover-ul unui element. Se întoarce la apelant înainte ca popover-ul să fi fost efectiv ascuns (adică înainte de apariția hidden.bs.popoverevenimentului). Aceasta este considerată o declanșare „manuală” a popover-ului.

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

.popover('toggle')

Comută popover-ul unui element. Revine la apelant înainte ca popover-ul să fi fost efectiv afișat sau ascuns (adică înainte ca evenimentul shown.bs.popoversau să hidden.bs.popoverapară). Aceasta este considerată o declanșare „manuală” a popover-ului.

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

.popover('dispose')

Ascunde și distruge popover-ul unui element. Popover-urile care folosesc delegarea (care sunt create folosind opțiunea selector) nu pot fi distruse individual pe elementele de declanșare descendente.

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

.popover('enable')

Oferă popover-ului unui element posibilitatea de a fi afișat. Popover-urile sunt activate în mod implicit.

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

.popover('disable')

Elimină posibilitatea ca popover-ul unui element să fie afișat. Popover-ul va putea fi afișat numai dacă este reactivat.

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

.popover('toggleEnabled')

Comută posibilitatea ca popover-ul unui element să fie afișat sau ascuns.

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

.popover('update')

Actualizează poziția popover-ului unui element.

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

Evenimente

Tip de eveniment Descriere
show.bs.popover Acest eveniment se declanșează imediat când showeste apelată metoda instanței.
arătat.bs.popover Acest eveniment este declanșat atunci când popover-ul a fost făcut vizibil pentru utilizator (va aștepta finalizarea tranzițiilor CSS).
ascunde.bs.popover Acest eveniment este declanșat imediat când hidemetoda instanței a fost apelată.
ascuns.bs.popover Acest eveniment este declanșat când popover-ul a terminat de a fi ascuns utilizatorului (va aștepta finalizarea tranzițiilor CSS).
introdus.bs.popover Acest eveniment este declanșat după show.bs.popovereveniment când șablonul popover a fost adăugat la DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})