Source

Popovers

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

Pregled

Stvari koje trebate znati kada koristite dodatak za popover:

  • Popovers se oslanjaju na biblioteku treće strane Popper.js za pozicioniranje. Morate uključiti popper.min.js prije bootstrap.js ili koristiti bootstrap.bundle.min.js/ bootstrap.bundle.jskoji sadrži Popper.js da bi popovers radili!
  • Popovers zahtijevaju dodatak za opis alata kao ovisnost.
  • Ako gradite naš JavaScript iz izvora, on zahtijevautil.js .
  • Popovers su uključeni iz razloga performansi, tako da ih morate sami inicijalizirati .
  • Nulta dužina titlei contentvrijednosti nikada neće prikazati iskakanje.
  • Navedite container: 'body'kako biste izbjegli probleme s prikazivanjem u složenijim komponentama (kao što su naše grupe za unos, grupe dugmadi, itd.).
  • Pokretanje iskačućih prikaza na skrivenim elementima neće raditi.
  • Skočni prikazi za .disabledili disabledelemente moraju se pokrenuti na elementu omotača.
  • Kada se aktiviraju iz sidra koja se premotaju preko više linija, iskačući prikazi će biti centrirani između ukupne širine sidra. Koristite white-space: nowrap;na vašem <a>s da biste izbjegli ovo ponašanje.
  • Popovers moraju biti skriveni prije nego što se njihovi odgovarajući elementi uklone iz DOM-a.

Nastavite čitati kako biste vidjeli kako iskočnici funkcioniraju s nekim primjerima.

Primjer: Omogućite iskačuće prikaze svuda

Jedan od načina da se inicijaliziraju svi skočni prozori 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 roditeljskom elementu koji ometaju iskačući prikaz, htjet ćete specificirati prilagođeni containertako da se HTML iskačućeg elementa umjesto toga 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 pravca

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>

Odbacite sljedećim klikom

Upotrijebite focusokidač da odbacite iskačuće prikaze pri sljedećem kliku korisnika na element koji se razlikuje od elementa za prebacivanje.

Posebne oznake potrebne za odbacivanje pri sljedećem kliku

Za pravilno ponašanje među pretraživačima i platformama, morate koristiti <a>oznaku, a ne oznaku <button>, a također morate uključiti tabindexatribut.

Odbaciti popover 
<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 preći pokazivačem miša ili kliknuti na njih da bi pokrenuli skočni prozor (ili opis alata). Kao zaobilazno rešenje, želećete da pokrenete iskačući prozor iz omotača <div>ili <span>i poništite pointer-eventson disabled element.

Za onemogućene okidače iskačućeg prikaza, možda ćete više voljeti data-trigger="hover"da se iskačući prikaz prikaže 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>

Upotreba

Omogućite iskačuće prikaze putem JavaScripta:

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

Opcije

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

Ime Tip Default Opis
animacija boolean tačno Primijenite CSS fade prijelaz na skočni prozor
kontejner string | element | false false

Dodaje skočni prozor određenom elementu. Primjer: container: 'body'. Ova opcija je posebno korisna po tome što vam omogućava da pozicionirate iskačući deo u toku dokumenta u blizini pokretačkog elementa - što će sprečiti da iskačući deo odlebdi od elementa za okidanje tokom promene veličine prozora.
sadržaj string | element | funkcija ''

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

Ako je data funkcija, ona će biti pozvana sa svojom thisreferencom postavljenom na element za koji je skočni prozor povezan.
kašnjenje broj | objekt 0

Kašnjenje prikazivanja i sakrivanja iskakanja (ms) - ne odnosi se na tip ručnog okidača

Ako je naveden broj, kašnjenje se primjenjuje i na sakrivanje/prikaži

Struktura objekta je:delay: { "show": 500, "hide": 100 }
html boolean false Umetnite HTML u skočni prozor. Ako je netačno, jQuery textmetoda će se koristiti za umetanje sadržaja u DOM. Koristite tekst ako ste zabrinuti zbog XSS napada.
plasman string | funkcija 'tačno'

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

Kada se funkcija koristi za određivanje položaja, ona se poziva sa DOM čvorom koji se pojavljuje kao prvim argumentom i pokretačkim elementom DOM čvorom kao drugim. Kontekst thisje postavljen na instancu skočnog prikaza.
selektor string | false false Ako je osiguran selektor, iskačući objekti će biti delegirani navedenim ciljevima. U praksi, ovo se koristi za omogućavanje dodavanja iskačućih sadržaja dinamičkom HTML sadržaju. Pogledajte ovo i informativni primjer .
šablon string '<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 prilikom kreiranja skočnog prozora.

Popover's titleće biti ubrizgan u .popover-header.

Popover's contentće biti ubrizgan u .popover-body.

.arrowće postati iskačuća strelica.

Najudaljeniji element omotača trebao bi imati .popoverklasu.
naslov string | element | funkcija ''

Zadana vrijednost naslova ako titleatribut nije prisutan.

Ako je data funkcija, ona će biti pozvana sa svojom thisreferencom postavljenom na element za koji je skočni prozor povezan.
okidač string 'klik' Kako se popover pokreće - kliknite | lebdjeti | fokus | priručnik. Možete proslijediti više okidača; odvojite ih razmakom. `manual` se ne može kombinovati ni sa jednim drugim okidačem.
offset broj | string 0 Pomak skočnog prikaza u odnosu na cilj. Za više informacija pogledajte offset dokumente Popper.js .
backbackPlacement string | niz 'okreni' Dozvolite da odredite koju će poziciju Popper koristiti na rezervnom. Za više informacija pogledajte dokumente o ponašanju Popper.js
granica string | element 'scrollParent' Granica ograničenja preljeva skočnog prozora. Prihvata vrijednosti 'viewport', 'window', 'scrollParent', ili reference HTMLElementa (samo JavaScript). Za više informacija pogledajte PrevenOverflow dokumente Popper.js .

Atributi podataka za pojedinačne iskačuće

Opcije za pojedinačne iskačuće opcije mogu se alternativno specificirati korištenjem atributa podataka, kao što je objašnjeno gore.

Metode

Asinhrone metode i prijelazi

Sve API metode su asinhrone i pokreću tranziciju . Oni se vraćaju pozivaocu čim prijelaz započne, ali prije nego što se završi . Osim toga, poziv metode na prelaznu komponentu će biti zanemaren .

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

$().popover(options)

Inicijalizira skočne prozore za kolekciju elemenata.

.popover('show')

Otkriva iskakanje elementa. Vraća se pozivaocu prije nego što je iskačući dio stvarno prikazan (tj. prije nego što se shown.bs.popoverdogađaj dogodi). Ovo se smatra "ručnim" pokretanjem iskačućeg prozora. Skočni prozori čiji su i naslov i sadržaj nulte dužine se nikada ne prikazuju.

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

.popover('hide')

Sakriva skočni prozor elementa. Vraća se pozivaocu prije nego što je iskačući dio stvarno skriven (tj. prije nego što se hidden.bs.popoverdogađaj dogodi). Ovo se smatra "ručnim" pokretanjem iskačućeg prozora.

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

.popover('toggle')

Prebacuje iskačući prozor elementa. Vraća se pozivaocu prije nego što je iskačući dio zapravo prikazan ili skriven (tj. prije nego što se dogodi događaj shown.bs.popoverili ). hidden.bs.popoverOvo se smatra "ručnim" pokretanjem iskačućeg prozora.

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

.popover('dispose')

Sakriva i uništava iskačući prikaz elementa. Skočni prozori koji koriste delegiranje (koji se kreiraju pomoću opcije selector) ne mogu se pojedinačno uništiti na elementima okidača potomaka.

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

.popover('enable')

Daje mogućnost prikaza skočnog prikaza elementa. Popovers su podrazumevano omogućeni.

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

.popover('disable')

Uklanja mogućnost da se iskačući prozor elementa prikaže. Popover će se moći prikazati samo ako je ponovo omogućen.

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

.popover('toggleEnabled')

Prebacuje mogućnost da se skočni prozor elementa prikaže ili sakrije.

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

.popover('update')

Ažurira poziciju iskačućeg elementa.

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

Događaji

Vrsta događaja Opis
show.bs.popover Ovaj događaj se aktivira odmah kada showse pozove metoda instance.
prikazano.bs.popover Ovaj događaj se pokreće kada skočni prozor postane vidljiv korisniku (će sačekati da se CSS tranzicije dovrše).
hide.bs.popover Ovaj događaj se pokreće odmah kada se hidepozove metoda instance.
hidden.bs.popover Ovaj događaj se pokreće kada skočni prozor završi sa sakrivanjem od korisnika (će sačekati da se CSS tranzicije dovrše).
inserted.bs.popover Ovaj događaj se pokreće nakon show.bs.popoverdogađaja kada je predložak iskakanja dodan u DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})