Source

Popovers

Dokumentacija i primjeri za dodavanje Bootstrap skočnih prozora, poput onih koji se nalaze u iOS-u, bilo kojem elementu na vašoj web-lokaciji.

Pregled

Stvari koje treba znati kada koristite popover dodatak:

  • Popovers se za pozicioniranje oslanjaju na biblioteku treće strane Popper.js . Morate uključiti popper.min.js prije bootstrap.js ili koristiti bootstrap.bundle.min.js/ bootstrap.bundle.jskoji sadrži Popper.js kako bi popoveri radili!
  • Popovi zahtijevaju plugin tooltip kao ovisnost.
  • Ako gradite naš JavaScript iz izvora, to zahtijevautil.js .
  • Popoveri su opt-in zbog performansi, pa ih morate sami pokrenuti .
  • Nulta duljina titlei contentvrijednosti nikada neće prikazati skočni prikaz.
  • Navedite container: 'body'kako biste izbjegli probleme s generiranjem u složenijim komponentama (poput naših ulaznih grupa, grupa gumba itd.).
  • Pokretanje skočnih prozora na skrivenim elementima neće raditi.
  • Skočni prozori za elemente .disabledili disabledmoraju se pokrenuti na elementu omotača.
  • Kada se pokreću iz sidrišta koja se prelamaju preko više linija, skočni prozori bit će centrirani između ukupne širine sidrišta. Koristite white-space: nowrap;na svom <a>s kako biste izbjegli ovakvo ponašanje.
  • Skočni prozori moraju biti skriveni prije nego što se njihovi odgovarajući elementi uklone iz DOM-a.

Nastavite čitati da vidite kako skočni prozori funkcioniraju s nekim primjerima.

Primjer: Omogućite skočne prozore posvuda

Jedan od načina da inicijalizirate sve skočne prozore na stranici bio bi da ih odaberete prema njihovom data-toggleatributu:

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

Primjer: Korištenje containeropcije

Kada imate neke stilove na nadređenom elementu koji ometaju skočni prozor, trebali biste navesti prilagođeni containertako da se HTML skočnog prozora pojavljuje unutar tog elementa.

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

Primjer

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

Četiri smjera

Dostupne su četiri opcije: gore, desno, dolje i lijevo poravnato.

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

Odbaci pri sljedećem kliku

Upotrijebite focusokidač za odbacivanje skočnih prozora pri sljedećem korisnikovom kliku na element različit od preklopnog elementa.

Za odbacivanje pri sljedećem kliku potrebna je posebna oznaka

Za ispravno ponašanje između preglednika i platformi, morate koristiti <a>oznaku, a ne oznaku <button>, a također morate uključiti tabindexatribut.

Popover koji se može odbaciti 
<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'
})

Onemogućeni elementi

Elementi s disabledatributom nisu interaktivni, što znači da korisnici ne mogu lebdjeti pokazivačem ili kliknuti na njih da bi pokrenuli skočni prozor (ili opis). Kao zaobilazno rješenje, htjet ćete pokrenuti skočni prozor iz omotača <div>ili <span>nadjačati pointer-eventselement na onemogućenom elementu.

Za onemogućene okidače skočnog prozora možda biste radije željeli data-trigger="hover"da se skočni prozor pojavi kao neposredna vizualna povratna informacija vašim korisnicima jer možda neće očekivati ​​da će kliknuti na onemogućeni element.

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

Korištenje

Omogući skočne prozore putem JavaScripta:

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

Mogućnosti

Opcije se mogu proslijediti putem atributa podataka ili JavaScripta. Za atribute podataka dodajte naziv opcije u data-, kao u data-animation="".

Ime Tip Zadano Opis
animacija Booleov pravi Primijenite CSS fade prijelaz na skočni prozor
spremnik niz | element | lažno lažno

Dodaje skočni prozor određenom elementu. Primjer: container: 'body'. Ova je opcija posebno korisna jer vam omogućuje postavljanje skočnog prozora u tok dokumenta blizu elementa koji pokreće - što će spriječiti da skočni prozor odlebdi od elementa koji pokreće tijekom promjene veličine prozora.
sadržaj niz | element | funkcija ''

Zadana vrijednost sadržaja ako data-contentatribut nije prisutan.

Ako je dana funkcija, bit će pozvana s thisreferencom postavljenom na element na koji je popover priložen.
odgoditi broj | objekt 0

Odgoda prikazivanja i skrivanja skočnog prozora (ms) - ne odnosi se na vrstu ručnog okidača

Ako je naveden broj, odgoda se primjenjuje na skrivanje/prikazivanje

Struktura objekta je:delay: { "show": 500, "hide": 100 }
html Booleov lažno Umetnite HTML u skočni prozor. Ako je false, jQueryjeva textmetoda koristit će se za umetanje sadržaja u DOM. Upotrijebite tekst ako ste zabrinuti zbog XSS napada.
plasman niz | funkcija 'pravo'

Kako postaviti popover - automatski | vrh | dno | lijevo | pravo.
Kada autoje navedeno, dinamički će preusmjeriti skočni prozor.

Kada se funkcija koristi za određivanje položaja, poziva se s skočnim DOM čvorom kao prvim argumentom i DOM čvorom pokretačkog elementa kao drugim. Kontekst thisje postavljen na skočnu instancu.
selektor niz | lažno lažno Ako je selektor osiguran, skočni objekti bit će delegirani navedenim ciljevima. U praksi se ovo koristi za omogućavanje dodavanja skočnih prozora za dinamički HTML sadržaj. Pogledajte ovo i informativan primjer .
šablona niz '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Osnovni HTML za korištenje pri stvaranju skočnog prozora.

Popover titleće se ubrizgati u .popover-header.

Popover contentće se ubrizgati u .popover-body.

.arrowpostat će popoverova strijela.

Najudaljeniji element omotača trebao bi imati .popoverklasu.
titula niz | element | funkcija ''

Zadana vrijednost naslova ako titleatribut nije prisutan.

Ako je dana funkcija, bit će pozvana s thisreferencom postavljenom na element na koji je popover priložen.
okidač niz 'klik' Kako se pokreće popover - kliknite | lebdjeti | fokus | priručnik. Možete proći više okidača; odvojite ih razmakom. `ručno` se ne može kombinirati ni s jednim drugim okidačem.
pomaknuti broj | niz 0 Pomak popover-a u odnosu na cilj. Za više informacija pogledajte Popper.js offset dokumente .
zamjenaPlacement niz | niz 'okrenuti' Omogućuje određivanje pozicije koju će Popper koristiti pri povratku. Za više informacija pogledajte dokumente o ponašanju Popper.js
granica niz | element 'scrollParent' Granica ograničenja prelijevanja skočnog prozora. Prihvaća vrijednosti 'viewport', 'window', 'scrollParent'ili HTMLElement reference (samo JavaScript). Za više informacija pogledajte Popper.js's preventOverflow dokumente .

Atributi podataka za pojedinačne skočne prozore

Opcije za pojedinačne skočne prozore mogu se alternativno specificirati upotrebom atributa podataka, kao što je gore objašnjeno.

Metode

Asinkrone metode i prijelazi

Sve API metode su asinkrone i pokreću prijelaz . Vraćaju se pozivatelju čim prijelaz započne, ali prije nego što završi . Osim toga, poziv metode na prijelaznoj komponenti bit će zanemaren .

Pogledajte našu JavaScript dokumentaciju za više informacija.

$().popover(options)

Inicijalizira skočne prozore za zbirku elemenata.

.popover('show')

Otkriva popover elementa. Vraća se pozivatelju prije nego što se popover stvarno prikaže (tj. prije nego što se shown.bs.popoverdogađaj dogodi). Ovo se smatra "ručnim" pokretanjem popover-a. Skočni prozori čiji su i naslov i sadržaj nulte duljine nikad se ne prikazuju.

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

.popover('hide')

Skriva skočni prozor elementa. Vraća se pozivatelju prije nego što je popover zapravo skriven (tj. prije nego što se hidden.bs.popoverdogađaj dogodi). Ovo se smatra "ručnim" pokretanjem popover-a.

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

.popover('toggle')

Isključuje skočni prozor elementa. Vraća se pozivatelju prije nego što se popover stvarno prikaže ili sakrije (tj. prije nego što se dogodi događaj shown.bs.popoverili ). hidden.bs.popoverOvo se smatra "ručnim" pokretanjem popover-a.

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

.popover('dispose')

Skriva i uništava popover elementa. Popoveri koji koriste delegiranje (koji se stvaraju pomoću opcije selector) ne mogu se pojedinačno uništiti na okidačkim elementima potomcima.

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

.popover('enable')

Daje mogućnost prikazivanja skočnog prozora elementa. Skočni prozori omogućeni su prema zadanim postavkama.

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

.popover('disable')

Uklanja mogućnost prikazivanja skočnog prozora elementa. Popover će se moći prikazati samo ako je ponovno omogućen.

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

.popover('toggleEnabled')

Isključuje mogućnost prikazivanja ili sakrivanja skočnog prozora elementa.

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

.popover('update')

Ažurira položaj skočnog prozora elementa.

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

Događaji

Vrsta događaja Opis
pokazati.bs.popover Ovaj događaj aktivira se odmah kada showse pozove metoda instance.
prikazano.bs.popover Ovaj se događaj pokreće kada je popover vidljiv korisniku (pričekat će se da se CSS prijelazi završe).
sakriti.bs.popover Ovaj se događaj aktivira odmah nakon hidepozivanja metode instance.
skriven.bs.popover Ovaj se događaj pokreće kada popover više nije skriven od korisnika (pričekat će se da se dovrše CSS prijelazi).
umetnuto.bs.popover Ovaj se događaj pokreće nakon show.bs.popoverdogađaja kada je skočni predložak dodan u DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})