Preskoči na glavni sadržaj Preskoči na navigaciju dokumenata
in English

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 Popper biblioteku treće strane za pozicioniranje. Morate uključiti popper.min.js prije bootstrap.js ili koristiti bootstrap.bundle.min.js/ bootstrap.bundle.jskoji sadrži Popper da bi popovers radili!
  • Popovers zahtijevaju dodatak za opis alata kao ovisnost.
  • 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 .text-nowrapna 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.
  • Popovers se mogu pokrenuti zahvaljujući elementu unutar DOM-a u sjeni.
Prema zadanim postavkama, ova komponenta koristi ugrađenu dezinfekciju sadržaja, koja uklanja sve HTML elemente koji nisu eksplicitno dozvoljeni. Za više detalja pogledajte odjeljak za dezinfekciju u našoj JavaScript dokumentaciji .
Efekt animacije ove komponente ovisi o prefers-reduced-motionmedijskom upitu. Pogledajte odjeljak o smanjenom pokretu u našoj dokumentaciji o pristupačnosti .

Nastavite čitati kako biste vidjeli kako iskočnici rade 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-bs-toggleatributu:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Primjer: Korištenje containeropcije

Kada imate neke stilove na roditeljskom elementu koji ometaju iskačući prikaz, htjet ćete navesti prilagođeni containertako da se HTML iskačućeg elementa umjesto toga pojavljuje unutar tog elementa.

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

Primjer

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-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. Uputstva se preslikavaju kada koristite Bootstrap u RTL-u.

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

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  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, poželećete da pokrenete iskačući prozor iz omotača <div>ili <span>, idealno napravljenog za fokusiranje na tastaturi koristeći tabindex="0".

Za onemogućene okidače iskačućeg prikaza, možda ćete više voljeti data-bs-trigger="hover focus"da se iskačući prikaz prikaže kao neposredna vizualna povratna informacija vašim korisnicima jer možda ne očekuju da će kliknuti na onemogućeni element.

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Sass

Varijable

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

Upotreba

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

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

Omogućavanje rada iskakanja za korisnike tastature i pomoćne tehnologije

Da biste omogućili korisnicima tastature da aktiviraju vaše skočne prozore, trebali biste ih dodati samo u HTML elemente koji su tradicionalno fokusirani na tipkovnicu i interaktivni (kao što su veze ili kontrole obrasca). Iako se proizvoljni HTML elementi (kao što je <span>s) mogu fokusirati dodavanjem tabindex="0"atributa, ovo će dodati potencijalno dosadne i zbunjujuće tab stope na neinteraktivnim elementima za korisnike tastature, a većina pomoćnih tehnologija trenutno ne najavljuje sadržaj skočnog prozora u ovoj situaciji . Osim toga, nemojte se oslanjati samo na hoverokidač za vaše iskačuće poruke, jer će to onemogućiti njihovo pokretanje za korisnike tipkovnice.

Iako možete umetnuti bogat, strukturiran HTML u skočne prozore pomoću htmlopcije, toplo preporučujemo da izbjegavate dodavanje prevelike količine sadržaja. Način na koji iskačući oglasi trenutno funkcionišu je da, kada se jednom prikažu, njihov sadržaj je vezan za element okidača sa aria-describedbyatributom. Kao rezultat toga, cjelokupni sadržaj popovera bit će najavljen korisnicima pomoćne tehnologije kao jedan dugi, neprekinuti stream.

Osim toga, iako je moguće uključiti interaktivne kontrole (kao što su elementi obrasca ili veze) u vaš skočni prozor (dodavanjem ovih elemenata u allowListdozvoljene atribute i oznake), imajte na umu da trenutno skočni prozor ne upravlja redoslijedom fokusa na tastaturi. Kada korisnik tastature otvori skočni prozor, fokus ostaje na elementu okidača, a kako iskakanje obično ne slijedi odmah iza okidača u strukturi dokumenta, ne postoji garancija da će se pomicanje naprijed/pritisakTABće premjestiti korisnika tastature u sam skočni prozor. Ukratko, jednostavno dodavanje interaktivnih kontrola u skočni prozor će vjerovatno učiniti ove kontrole nedostižnim/neupotrebljivim za korisnike tastature i pomoćne tehnologije, ili će u najmanju ruku stvoriti nelogičan opći redoslijed fokusa. U ovim slučajevima, razmislite o korištenju modalnog dijaloga.

Opcije

Opcije se mogu proslijediti putem atributa podataka ili JavaScripta. Za atribute podataka, dodajte naziv opcije u data-bs-, kao u data-bs-animation="". Obavezno promijenite tip slučaja naziva opcije iz camelCase u kebab-case kada prenosite opcije preko atributa podataka. Na primjer, umjesto korištenja data-bs-customClass="beautifier", koristite data-bs-custom-class="beautifier".

Imajte na umu da se iz sigurnosnih razloga opcije sanitize, sanitizeFni allowListne mogu dostaviti korištenjem atributa podataka.
Ime Tip Default Opis
animation boolean true Primijenite CSS fade prijelaz na skočni prozor
container 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.

content string | element | funkcija ''

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

Ako je data funkcija, ona će biti pozvana sa svojom thisreferencom postavljenom na element za koji je skočni prozor povezan.

delay 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, innerTextsvojstvo će se koristiti za umetanje sadržaja u DOM. Koristite tekst ako ste zabrinuti zbog XSS napada.
placement string | funkcija 'right'

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.

selector 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 .
template string '<div class="popover" role="tooltip"><div class="popover-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.

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

Najudaljeniji element omotača trebao bi imati .popoverklasu.

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

trigger string 'click' Kako se popover pokreće - kliknite | lebdjeti | fokus | priručnik. Možete proslijediti više okidača; odvojite ih razmakom. manualne može se kombinovati ni sa jednim drugim okidačem.
fallbackPlacements niz ['top', 'right', 'bottom', 'left'] Definirajte rezervne položaje pružanjem liste plasmana u nizu (po redoslijedu želje). Za više informacija pogledajte Popperove dokumente o ponašanju
boundary string | element 'clippingParents' Granica ograničenja preklapanja iskakanja (odnosi se samo na Popperov modifikator preventOverflow). Podrazumevano je 'clippingParents'i može prihvatiti referencu HTMLElementa (samo putem JavaScripta). Za više informacija pogledajte Popper's detectOverflow dokumente .
customClass string | funkcija ''

Dodajte klase u skočni prozor kada se prikaže. Imajte na umu da će ove klase biti dodane kao dodatak svim klasama navedenim u predlošku. Da dodate više klasa, razdvojite ih razmacima: 'class-1 class-2'.

Također možete proslijediti funkciju koja bi trebala vratiti jedan string koji sadrži dodatna imena klasa.

sanitize boolean true Omogućite ili onemogućite dezinfekciju. Ako je aktivirano 'template', 'content'i 'title'opcije će biti sanirane. Pogledajte odjeljak za dezinfekciju u našoj JavaScript dokumentaciji .
allowList objekt Zadana vrijednost Objekt koji sadrži dozvoljene atribute i oznake
sanitizeFn null | funkcija null Ovdje možete ponuditi vlastitu funkciju dezinfekcije. Ovo može biti korisno ako više volite koristiti namjensku biblioteku za dezinfekciju.
offset niz | string | funkcija [0, 8]

Pomak skočnog prikaza u odnosu na cilj. Možete proslijediti niz u atributima podataka sa vrijednostima odvojenim zarezima kao što su:data-bs-offset="10,20"

Kada se funkcija koristi za određivanje pomaka, ona se poziva s objektom koji sadrži popper položaj, referencu i popper rects kao prvi argument. Okidač elementa DOM čvor se prosljeđuje kao drugi argument. Funkcija mora vratiti niz sa dva broja: .[skidding, distance]

Za više informacija pogledajte Popperove ofset dokumente .

popperConfig null | objekt | funkcija null

Da biste promijenili Bootstrap-ovu zadanu Popper konfiguraciju, pogledajte Popperovu konfiguraciju .

Kada se funkcija koristi za kreiranje Popper konfiguracije, ona se poziva sa objektom koji sadrži Bootstrap-ovu zadanu Popper konfiguraciju. Pomaže vam da koristite i spojite zadanu s vlastitom konfiguracijom. Funkcija mora vratiti konfiguracijski objekt za Popper.

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.

Korištenje funkcije sapopperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

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 .

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 naslov i sadržaj nulte dužine nikada se ne prikazuju.

myPopover.show()

sakriti

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.

myPopover.hide()

preklopiti

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 se dogodi događaj shown.bs.popoverili ). hidden.bs.popoverOvo se smatra "ručnim" pokretanjem iskačućeg prozora.

myPopover.toggle()

dispose

Sakriva i uništava skočni prozor elementa (Uklanja pohranjene podatke na DOM elementu). 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.

myPopover.dispose()

omogućiti

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

myPopover.enable()

onemogućiti

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

myPopover.disable()

toggleEnabled

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

myPopover.toggleEnabled()

ažurirati

Ažurira poziciju iskačućeg elementa.

myPopover.update()

getInstance

Statička metoda koja vam omogućava da dobijete instancu iskačućih stranica koja je povezana sa DOM elementom

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance

Statička metoda koja vam omogućava da dobijete popover instancu povezanu s DOM elementom ili kreirate novu u slučaju da nije inicijalizirana

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

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 (sačekaće 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.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})