Buuka ku bigambo ebikulu Buuka ku docs navigation
in English

Popovers eziyitibwa Popovers

Ebiwandiiko n’ebyokulabirako eby’okugattako Bootstrap popovers, nga ezo ezisangibwa mu iOS, ku elementi yonna ku mukutu gwo.

Okulaba okutwalira awamu

Ebintu by’olina okumanya ng’okozesa popover plugin:

  • Popovers beesigamye ku 3rd party library Popper okusobola okuteeka mu kifo. Olina okussaamu popper.min.js nga tonnaba bootstrap.js oba kozesa bootstrap.bundle.min.js/ bootstrap.bundle.jserimu Popper okusobola popovers okukola!
  • Popovers zeetaaga plugin ya tooltip nga okwesigamizibwa.
  • Popovers are opt-in for performance reasons, kale olina okuzitandika ggwe kennyini .
  • Zero-length titlene contentvalues ​​tezijja kulaga popover.
  • Laga container: 'body'okwewala ebizibu by'okulaga mu bitundu ebizibu ennyo (nga ebibinja byaffe eby'okuyingiza, ebibinja bya button, n'ebirala).
  • Okusitula popovers ku elements ezikwekebwa tekijja kukola.
  • Popovers for .disabledoba disabledelements zirina okutandikibwa ku elementi y'okuzinga.
  • Bwe zisitulwa okuva ku nnanga ezizinga ku layini eziwera, popovers zijja kuba wakati wakati w’obugazi bw’ennanga okutwalira awamu. Kozesa .text-nowrapku <a>s yo okwewala enneeyisa eno.
  • Popovers zirina okukwekebwa nga elements zazo ezikwatagana tezinnaggyibwa mu DOM.
  • Popovers zisobola okutandika okwebaza elementi munda mu shadow DOM.
Nga bwekiba, ekitundu kino kikozesa ekizimbiddwamu ekirongoosa ebirimu, ekiggyamu ebintu byonna ebya HTML ebitakkirizibwa mu bulambulukufu. Laba ekitundu kya sanitizer mu biwandiiko byaffe ebya JavaScript okumanya ebisingawo.
Ekikolwa kya animation eky'ekitundu kino kyesigamye ku prefers-reduced-motionkubuuza kw'emikutu. Laba ekitundu ky'ekiteeso ekikendeezeddwa mu biwandiiko byaffe eby'okutuuka ku bantu .

Sigala ng’osoma olabe engeri popovers gye zikolamu n’ebyokulabirako ebimu.

Okugeza: Ssobozesa popovers buli wamu

Engeri emu ey'okutandikawo popovers zonna ku lupapula yandibadde okuzilonda okusinziira ku data-bs-toggleattribute yazo:

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

Okugeza: Okukozesa containereky’okulonda

Bw'oba n'emisono egimu ku elementi omuzadde ezitaataaganya popover, ojja kwagala okulaga custom containerHTML ya popover esobole okulabika munda mu elementi eyo mu kifo ky'ekyo.

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

Eky'okulabirako

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

Endagiriro nnya

Enkola nnya ziriwo: waggulu, ku ddyo, wansi, ne kkono nga zikwatagana. Endagiriro ziraga endabirwamu nga okozesa Bootstrap mu RTL.

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

Goba ku click okuddako

Kozesa focusekiziyiza okugoba popovers ku kunyiga kw'omukozesa okuddako ku elementi ey'enjawulo okusinga toggle element.

Markup eyenjawulo yeetaagibwa ku kugobwa-ku-ku-ku-ku-dako-okunyiga

Okusobola enneeyisa entuufu eya cross-browser ne cross-platform, olina okukozesa <a>tag, so si tag <button>, era era olina okussaamu tabindexattribute.

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

Ebintu ebilema

Elements ezirina disabledattribute tezikwatagana, ekitegeeza nti abakozesa tebasobola hover oba okuzinyiga okutandika popover (oba tooltip). Nga workaround, ojja kwagala okutandika popover okuva mu wrapper <div>oba <span>, ekisinga obulungi ekoleddwa keyboard-focusable nga okozesa tabindex="0".

Ku biziyiza popover ebilema, oyinza data-bs-trigger="hover focus"n’okwagala popover esobole okulabika ng’okuddamu okw’amangu eri abakozesa bo nga bwe bayinza obutasuubira kunyiga ku kintu ekilema.

<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 nga bwe kiri

Enkyukakyuka ezikyukakyuka

$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);

Enkozesa

Ssobozesa popovers nga oyita mu JavaScript:

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

Okufuula popovers okukola eri abakozesa keyboard ne tekinologiya ayamba

Okukkiriza abakozesa keyboard okukola popovers zo, olina okuzigattako ku bintu bya HTML byokka ebitera okussa essira ku keyboard era ebikwatagana (nga links oba form controls). Newankubadde nga ebintu bya HTML ebitali bituufu (nga <span>s) bisobola okufuulibwa ebiteekeddwako essira nga kwongerako tabindex="0"ekintu, kino kijja kwongerako okuyimirira kwa tabu okuyinza okunyiiza era okutabula ku bintu ebitali bikwatagana eri abakozesa kiiboodi, era tekinologiya asinga okuyamba mu kiseera kino talangirira biri mu popover mu mbeera eno . Okugatta ku ekyo, teweesigama ku yokka hovernga trigger for your popovers, kuba kino kijja kuzifuula ezitasobokera ddala trigger eri abakozesa keyboard.

Wadde nga osobola okuyingiza HTML omugagga, etegekeddwa mu popovers htmln’enkola, tukukubiriza nnyo okwewala okwongerako omuwendo ogusukkiridde ogw’ebirimu. Engeri popovers gye zikolamu mu kiseera kino eri nti, bwe zimala okulagibwa, ebirimu byazo bisibiddwa ku trigger element ne aria-describedbyattribute. N’ekyavaamu, byonna ebirimu mu popover bijja kulangirirwa eri abakozesa tekinologiya ayamba ng’omugga gumu omuwanvu, ogutasalako.

Okugatta ku ekyo, wadde nga kisoboka n’okussaamu ebifuga ebikwatagana (nga ebintu bya ffoomu oba enkolagana) mu popover yo (ng’ogattako ebintu bino ku allowListby’ebintu ebikkirizibwa ne tags), kimanye nti mu kiseera kino popover teddukanya nsengeka ya keyboard focus. Omukozesa wa keyboard bw’aggulawo popover, essira lisigala ku kintu ekivaako, era nga popover bwetera obutagoberera mangu trigger mu nsengeka y’ekiwandiiko, tewali bukakafu nti okugenda mu maaso/okunyigaTABejja kutambuza omukozesa wa keyboard mu popover yennyini. Mu bufunze, okumala okugattako ebifuga ebikwatagana ku popover kiyinza okufuula ebifuga bino obutatuukirirwa/obutakozesebwa eri abakozesa kiiboodi n’abakozesa tekinologiya ayamba, oba waakiri okukola ekiragiro ky’okussa essira okutwalira awamu ekitali kya nsonga. Mu mbeera zino, lowooza ku kukozesa emboozi ya modal mu kifo ky’ekyo.

Eby’okulondako

Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-bs-, nga mu data-bs-animation="". Kakasa nti okyusa ekika kya case eky'erinnya ly'okulonda okuva ku camelCase okudda ku kebab-case ng'oyisa eby'okulonda ng'oyita mu data attributes. Okugeza, mu kifo ky’okukozesa data-bs-customClass="beautifier", kozesa data-bs-custom-class="beautifier".

Weetegereze nti olw'ensonga z'obukuumi sanitize, sanitizeFn, allowListn'eby'okulonda tebisobola kuweebwa nga okozesa ebikwata ku data.
Erinnya Okuwandiika Okukosamu Okunnyonnyola
animation boolean true Kozesa enkyukakyuka ya CSS fade ku popover
container olunyiriri | elementi | -kyaamu false

Agattako popover ku elementi eyeetongodde. Okugeza: container: 'body'. Enkola eno ya mugaso nnyo mu ngeri nti ekusobozesa okuteeka popover mu kutambula kw'ekiwandiiko okumpi n'ekintu ekiziyiza - ekijja okulemesa popover okulengejja okuva ku kintu ekiziyiza mu kiseera ky'okukyusa obunene bw'eddirisa.

content olunyiriri | elementi | enkola ''

Omuwendo gw'ebirimu ogusookerwako singa data-bs-contentekintu tekibaawo.

Singa omulimu guweebwa, gujja kuyitibwa nga thisreference yaayo eteekeddwa ku elementi popover gy’eyungiddwako.

delay ennamba | ekintu 0

Okulwawo okulaga n'okukweka popover (ms) - tekikwata ku kika kya manual trigger

Singa ennamba eweebwa, okulwawo kukozesebwa ku byombi okukweka/okulaga

Ensengeka y’ekintu eri nti:delay: { "show": 500, "hide": 100 }

html boolean false Teeka HTML mu popover. Bwe kiba kya bulimba, innerTexteby'obugagga bijja kukozesebwa okuyingiza ebirimu mu DOM. Kozesa ebiwandiiko bw'oba weeraliikirira obulumbaganyi bwa XSS.
placement olunyiriri | enkola 'right'

Engeri y'okuteeka popover - auto | waggulu | wansi | ku kkono | kituufu.
Bwe autokinaalagibwa, kijja kuddamu okulungamya popover mu ngeri ey’amaanyi.

Omulimu bwe gukozesebwa okuzuula ekifo, guyitibwa nga popover DOM node nga ensonga yaayo esooka ate triggering element DOM node nga eyookubiri. Ensonga thiseteekeddwa ku popover instance.

selector olunyiriri | -kyaamu false Singa omusunsula aweebwa, ebintu bya popover bijja kuweebwa ebigendererwa ebiragiddwa. Mu nkola, kino kikozesebwa okusobozesa ebirimu bya HTML ebikyukakyuka okuba ne popovers ezigattibwako. Laba kino n'ekyokulabirako ekirimu amawulire .
template akaguwa '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Base HTML okukozesa nga okola popover.

Popover's titleegenda kufuyirwa mu .popover-header.

Popover's contentegenda kufuyirwa mu .popover-body.

.popover-arrowejja kufuuka akasaale ka popover.

Ekintu eky’okuzinga ekisinga ebweru kirina okuba .popovern’ekibiina.

title olunyiriri | elementi | enkola ''

Omuwendo gw'omutwe ogusookerwako singa titleekintu tekibaawo.

Singa omulimu guweebwa, gujja kuyitibwa nga thisreference yaayo eteekeddwa ku elementi popover gy’eyungiddwako.

trigger akaguwa 'click' Engeri popover gy'etandika - nyweza | hover | okussa essira | maniyo. Oyinza okuyisa ebizibu ebiwerako; zaawule n’ekifo. manualtesobola kugattibwa wamu na kiziyiza kirala kyonna.
fallbackPlacements ensengekera ['top', 'right', 'bottom', 'left'] Lambulula ebifo eby'okudda emabega ng'owa olukalala lw'ebifo mu nsengeka (mu nsengeka y'okwegomba). Okumanya ebisingawo laba Popper's behavior docs
boundary olunyiriri | ekintu 'clippingParents' Ensalo y'okuziyiza okujjula eya popover (ekola ku Popper's preventOverflow modifier yokka). Nga bwekiba 'clippingParents'era esobola okukkiriza HTMLElement reference (nga eyita mu JavaScript yokka). Okumanya ebisingawo laba Popper's detectOverflow docs .
customClass olunyiriri | enkola ''

Okwongerako classes ku popover nga eragiddwa. Weetegereze nti kiraasi zino zijja kwongerwako nga kwotadde ne kiraasi zonna eziragiddwa mu kifaananyi. Okwongerako kiraasi eziwera, zaawule n’ebifo: 'class-1 class-2'.

Osobola n'okuyisa omulimu ogulina okuzzaayo olunyiriri lumu olulimu amannya ga kiraasi ag'enjawulo.

sanitize boolean true Ssobozesa oba okulemesa okuyonja. If activated 'template', 'content'era 'title'options zijja kulongoosebwa. Laba ekitundu kya sanitizer mu biwandiiko byaffe ebya JavaScript .
allowList ekintu Omuwendo ogusookerwako Ekintu ekirimu ebifaananyi ebikkirizibwa ne tags
sanitizeFn null | enkola null Wano osobola okugabira omulimu gwo ogwa sanitize. Kino kiyinza okuba eky’omugaso singa oba oyagala okukozesa etterekero ly’ebitabo eryetongodde okukola sanitization.
offset ensengekera | olunyiriri | enkola [0, 8]

Offset ya popover okusinziira ku target yaayo. Osobola okuyisa olunyiriri mu data attributes nga zirina emiwendo egyawuddwamu comma nga:data-bs-offset="10,20"

Omulimu bwe gukozesebwa okuzuula offset, guyitibwa n’ekintu ekirimu popper placement, reference, ne popper rects nga argument yaayo esooka. Ekintu ekivaako DOM node kiyisibwa nga ensonga eyokubiri. Omulimu gulina okuzzaayo ensengekera erimu ennamba bbiri: .[skidding, distance]

Okumanya ebisingawo laba Popper's offset docs .

popperConfig null | ekintu | enkola null

Okukyusa ensengeka ya Popper eya Bootstrap esookerwako, laba ensengeka ya Popper .

Omulimu bwe gukozesebwa okukola ensengeka ya Popper, guyitibwa n'ekintu ekirimu ensengeka ya Popper eya Bootstrap eya bulijjo. Kikuyamba okukozesa n'okugatta ekisookerwako n'ensengeka yo. Omulimu gulina okuzzaayo ekintu eky'okusengeka ekya Popper.

Ebikwata ku data ku popovers ssekinnoomu

Enkola za popovers ssekinnoomu zisobola mu ngeri endala okulagibwa okuyita mu kukozesa data attributes, nga bwe kinnyonnyoddwa waggulu.

Okukozesa function nepopperConfig

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

Enkola

Enkola ezitakwatagana n’enkyukakyuka

Enkola zonna eza API tezikwatagana era zitandika enkyukakyuka . Zidda eri oyo akubye amangu ddala ng'enkyukakyuka etandise naye nga tennaggwaako . Okugatta ku ekyo, okuyita enkola ku kitundu ekikyukakyuka kujja kubuusibwa amaaso .

Laba ebiwandiiko byaffe ebya JavaScript okumanya ebisingawo .

okulaga

Abikkula popover ya elementi. Edda eri oyo akubira nga popover tennalagibwa ddala (kwe kugamba nga shown.bs.popoverekintu tekinnabaawo). Kino kitwalibwa nga “manual” triggering of the popover. Popovers omutwe gwazo n’ebirimu byombi bya zero-length tebiragibwangako.

myPopover.show()

okweekweeka

Akweka popover ya elementi. Edda eri oyo akubira nga popover tennakwekebwa ddala (kwe kugamba nga hidden.bs.popoverekintu tekinnabaawo). Kino kitwalibwa nga “manual” triggering of the popover.

myPopover.hide()

okukyusakyusa

Ekyusakyusa popover ya elementi. Edda eri oyo akubira nga popover tennalagibwa oba okukwekebwa ddala (kwe kugamba nga shown.bs.popoveroba hidden.bs.popoverekintu tekinnabaawo). Kino kitwalibwa nga “manual” triggering of the popover.

myPopover.toggle()

okusuula

Ekweka n'okusaanyaawo popover ya elementi (Eggyawo data eterekeddwa ku elementi ya DOM). Popovers ezikozesa delegation (ezitondebwa nga tukozesa option )selector teziyinza kuzikirizibwa kinnoomu ku descendant trigger elements.

myPopover.dispose()

okuyinzisa

Awa popover ya elementi obusobozi okulagibwa. Popovers zikozesebwa nga bwe kibadde.

myPopover.enable()

okulemala

Eggyawo obusobozi bwa elementi's popover okulagibwa. Popover ejja kusobola okulagibwa singa eddamu okusobozesa.

myPopover.disable()

toggleEsobozeseddwa

Toggles obusobozi bwa element's popover okulagibwa oba okukwekebwa.

myPopover.toggleEnabled()

okututegeza

Ezza obuggya ekifo kya popover ya elementi.

myPopover.update()

getEkyokulabirako

Enkola ya static ekusobozesa okufuna popover instance ekwatagana ne DOM element

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

getObaTondawoEkifaananyi

Enkola ya static ekusobozesa okufuna popover instance ekwatagana ne DOM element, oba okukola empya singa kiba nga tekitandikibwawo

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

Ebibaddewo

Ekika ky’ekintu ekibaawo Okunnyonnyola
show.bs.obwavu Ekintu kino kikuba amangu ddala nga showenkola ya instance eyitiddwa.
alagiddwa.bs.obwavu Ekintu kino kigobwa nga popover ekoleddwa okulabika eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa).
okukweka.bs.obwavu Ekintu kino kikubwa amangu ddala nga hideenkola ya instance eyitiddwa.
okukwekebwa.bs.obwavu Ekintu kino kigobwa nga popover emaze okukwekebwa okuva eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa).
eyingiziddwa.bs.obwavu Omukolo guno gugobwa oluvannyuma show.bs.popoverlw'omukolo nga popover template eyongezeddwa ku DOM.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})