Popovers te an ni
Documentation leh Bootstrap popovers, iOS-a hmuh ang chi, i site-a element eng pawha dah belh dan tur.
A tlangpuiin
Popover plugin hman huna hriat tur awmte:
- Popovers te hian positioning atan 3rd party library Popper an ring tlat a ni. Poppers te hnathawh theih nan bootstrap.js hmain popper.min.js i dah hmasa tur a ni emaw, Popper awmna
bootstrap.bundle.min.js
/ hmang tur a ni!bootstrap.bundle.js
- Popovers hian tooltip plugin hi dependency atan a mamawh a ni.
- Popovers hi performance avanga opt-in a nih avangin nangmah ngeiin i initialize tur a ni .
- Zero-length
title
lehcontent
value te hian popover a lantir ngai lovang. container: 'body'
Component complex zawk (kan input group, button group, etc)-a rendering problem awm loh nan specify rawh .- Hidden elements-a popovers trigger hian hna a thawk dawn lo.
- Popovers for
.disabled
ordisabled
elements te chu wrapper element ah trigger tur a ni. - Line hrang hranga wrap anchor atanga trigger a nih chuan popovers te chu anchor zawng zawng zau zawng inkar ah centered a ni ang. Hetiang thiltih hi pumpelh nan
.text-nowrap
i s hmangin hmang rawh .<a>
- Popovers te hi DOM atanga an element inmil te lakchhuah a nih hmain thup a ngai a ni.
- Shadow DOM chhunga element awm vangin popovers a trigger thei a ni.
prefers-reduced-motion
media query ah a innghat a ni. Kan accessibility documentation a reduced motion tih hi en la
.
Entirna thenkhat nen popovers te hnathawh dan hriat duh chuan chhiar chhunzawm zel ang che.
Entirnan: Hmun tinah popovers enable rawh
Page pakhata popover zawng zawng initialize dan pakhat chu an data-bs-toggle
attribute hmanga thlan hi a ni ang:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
Entirnan: container
Option hmangin
Popover tibuaitu parent element-a style thenkhat i neih chuan, container
chu element chhungah chuan popover-a HTML chu a lang zawk theih nan custom i dah duh ang.
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
Entirna
<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>
Kawng pali
Option pali a awm a, chunglam, dinglam, hnuai lam, leh veilam aligned te an ni. RTL a Bootstrap hman hian directions a mirror thin.
<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>
A hnuaia click leh hunah dismiss rawh
focus
User-in toggle element aia element dang a click leh hunah popovers chu dismiss turin trigger hmang ang che .
Dismiss-on-next-click atan markup bik a ngai
Cross-browser leh cross-platform behavior dik tak neih theih nan tag ni lovin tag i hmang tur a ni <a>
a , attribute <button>
pawh i dah tel tur a ni.tabindex
<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'
})
Elements tihtawp a ni
Attribute nei element te disabled
hi interactive an ni lo a, chu chu user te chuan popover (or tooltip) trigger turin hover emaw click emaw an ti thei lo tihna a ni. <div>
Workaround angin, wrapper emaw <span>
, ideally made keyboard-focusable hmanga siam popover atanga trigger i duh ang tabindex="0"
.
Disabled popover triggers tan chuan i duh zawk thei bawk a, chutiang bawkin popover chu i hmangtute hnenah disabled element clickdata-bs-trigger="hover focus"
an beisei loh avangin visual feedback nghal ang maia lang turin i duh thei bawk.
<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 a ni
Variables te pawh a awm
$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);
Hman dan tur
JavaScript hmangin popovers te chu enable rawh:
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
Keyboard leh assistive technology hmangtute tan popovers hnathawh tir
Keyboard hmangtute’n i popovers an activate theih nan, HTML elements, hmanlai keyboard-focusable leh interactive (link emaw form control ang chi)-ah chauh i dah tur a ni. Attribute dah belh hian arbitrary HTML elements ( <span>
s ang chi) chu focusable-a siam theih ni mah se tabindex="0"
, hei hian keyboard hmangtute tan non-interactive element-a tab stop tibuaitu leh buaithlak tak tak a dah belh dawn a, tunah hian assistive technology tam zawk chuan hetiang dinhmunah hian popover-a thu awmte hi an puang lo . hover
Tin, i popovers te tan trigger atan chauh rinchhan suh , hei hian keyboard hmangtute tan trigger theih loh a siam dawn avangin.
Popovers-ah hian html
option hmangin rich, structured HTML i dah thei a, mahse, content tam lutuk dah loh turin kan fuih tak zet che a ni. Tuna popovers hnathawh dan chu, vawi khat a lan hnuah, an content chu aria-describedby
attribute nei trigger element nen an inzawm tlat a ni. Chumi avang chuan popover-a thu awm zawng zawng chu assistive technology hmangtute hnenah stream rei tak, tihtawp loh pakhat anga puan a ni ang.
Tin, i popover-ah hian interactive controls (form elements emaw links ang chi) te pawh telh theih a nih laiin (heng elements te hi allowList
of allowed attributes leh tags-ah te dah belhin), tunah chuan popover hian keyboard focus order a enkawl lo tih hre reng ang che. Keyboard hmangtuin popover a hawn chuan triggering element-ah focus a awm reng a, popover hian document structure-a trigger a zawm nghal loh tlangpui avangin hmalam pan/pressing tih theihna tur guarantee a awm loTABkeyboard hmangtu pakhat chu popover chhungah ngei a hruai lut ang. A tawi zawngin, popover-a interactive controls dah mai mai chuan heng control-te hi keyboard hmangtu leh assistive technology hmangtute tan chuan thlen theih loh/hman theih loh a nih a rinawm a, a tlem berah chuan overall focus order chu a dik lo hle mai thei bawk. Heng hunah hian modal dialog hman ai chuan ngaihtuah zawk ang che.
Thil thlan theih a ni
Options chu data attribute emaw JavaScript hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-bs-
, data-bs-animation=""
. Data attribute hmanga options pass dawnin option hming case type chu camelCase atanga kebab-case ah thlak ngei ngei tur a ni. Entirnan, , hmang data-bs-customClass="beautifier"
lovin data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, leh
allowList
option te hi data attribute hmangin supply theih a ni lo tih hre reng ang che.
Hming | Lampang | Hlawhchhamna | Hrilhfiahna |
---|---|---|---|
animation |
boolean a ni | true |
Popover ah hian CSS fade transition hmangin apply rawh |
container |
string | element | diklo | false |
Popover chu element bik pakhatah a append thin. Entirnan: |
content |
string | element | thiltih | '' |
Function pek a nih chuan a |
delay |
number | thil | 0 |
Popover (ms) entir leh thup hun sawn hlat - manual trigger type-ah a huam lo Number supply a nih chuan hide/show pahnih ah delay a awm vek a ni Thil awm dan tur chu: |
html |
boolean a ni | false |
Popover ah chuan HTML kha dah lut rawh. False a nih chuan innerText property hmangin DOM ah content dah a ni ang. XSS attack i ngaihtuah chuan text hmang rawh. |
placement |
string | thiltih | 'right' |
Popover dah dan tur - auto | chunglam | hnuai lam | veilam | dik. Function pakhat hmanga placement hriat chian a nih chuan popover DOM node chu a argument hmasa ber atan leh triggering element DOM node chu a pahnihna atan hmangin koh a ni. Context chu |
selector |
string | diklo | false |
Selector pek a nih chuan popover objects chu target tarlan te hnenah delegate a ni ang. A taka hman chuan hei hi dynamic HTML content-a popovers dah belh theihna turin hman a ni. Hei hi leh entîrna thu hriat theihna en rawh . |
template |
hrui | '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Popover siam huna hman tur HTML base rawh. Popover's Popover's
Wrapper element pawn lam ber chuan |
title |
string | element | thiltih | '' |
Function pek a nih chuan a |
trigger |
hrui | 'click' |
Popover a tihchhuah dan - | hover rawh | focus | kuta thawh. Trigger tam tak i pass thei a; space hmangin then hran rawh. manual trigger dang nen pawh a inzawm thei lo. |
fallbackPlacements |
array a ni | ['top', 'right', 'bottom', 'left'] |
Fallback placement te chu array-a placement list (a duh dan angin) pein define rawh. Hriat belh duh chuan Popper-a behavior docs en rawh |
boundary |
string | thil bul | 'clippingParents' |
Popper-a overflow constraint boundary (Popper-a preventOverflow modifier-ah chauh hman tur a ni). Default-ah chuan 'clippingParents' HTMLElement reference a ni a, a pawm thei bawk (JavaScript hmang chauh). Hriat belh duh chuan Popper-a detectOverflow docs en rawh. |
customClass |
string | thiltih | '' |
Popover a lan hunah class te dah belh rawh. Template-a class tarlan zawng zawng bakah heng class te hi dah belh a ni ang tih hre reng ang che. Class tam tak dah belh tur chuan space hmangin then rawh: Class hming dang awmna string pakhata rawn pe chhuak tur function pawh i pass thei bawk. |
sanitize |
boolean a ni | true |
Sanitization hi enable emaw disable emaw theih a ni. Activated a nih chuan 'template' , 'content' leh 'title' options te chu sanitized a ni ang. Kan JavaScript documentation a sanitizer tih hi en la . |
allowList |
thil | Default value a ni | Object ah chuan attribute leh tag phalsak te a awm |
sanitizeFn |
null | thiltih | null |
Hetah hian mahni sanitize function i supply thei ang. Sanitization tih nan library bik hman i duh chuan hei hi a tangkai thei hle. |
offset |
array | string | thiltih | [0, 8] |
Popover chu a target nena khaikhin chuan offset a ni. Data attribute-ah hian comma separated value hmangin string i pass thei ang: Offset hriat nan function hman a nih chuan a argument hmasa ber atan popper placement, reference leh popper rects te awmna object hmangin koh a ni. Triggering element DOM node chu argument pahnihna atan pass a ni. Function hian number pahnih nei array a rawn pe chhuak tur a ni: . Hriat belh duh chuan Popper-a offset docs en rawh. |
popperConfig |
null | thil awmze nei | thiltih | null |
Bootstrap-a Popper config default thlak tur chuan Popper-a configuration en rawh . Popper configuration siamna atana function hman a nih chuan Bootstrap-a default Popper configuration awmna object hmangin koh a ni. Default chu i configuration nen hman leh merge turin a pui che a ni. Function hian Popper tan configuration object a rawn pe chhuak tur a ni. |
Mimal popovers te tan data attribute te
Mimal popover-te tana duhthlan tur chu a dangin data attribute hmanga tarlan theih a ni a, a chunga kan sawi tawh ang khan.
Function hman dan nenpopperConfig
var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Thiltih dan tur
Asynchronous method leh inthlak danglamna te
API method zawng zawng hi asynchronous a ni a , transition a tan vek a ni . Transition an tan veleh mahse a tawp hmain call tu hnenah an kir leh thin . Chu bakah, transitioning component-a method call chu ngaihthah a ni ang .
lantir
Element pakhat popover a nihzia a pholang. Popover a lan tak tak hmain (chu chu shown.bs.popover
event a thlen hmain) caller hnenah a kir leh thin. Hei hi popover “manual” triggering anga ngaih a ni. Popovers title leh content zero-length pahnih nei te chu an lang ngai lo.
myPopover.show()
biru
Element pakhat popover a thup. Popover chu thup tak tak a nih hmain (chu chu hidden.bs.popover
thilthleng a thlen hma) call tu hnenah a kir leh thin. Hei hi popover “manual” triggering anga ngaih a ni.
myPopover.hide()
toggle a ni
Element pakhat popover a toggle thin. Popover a lan tak tak emaw a thup hma emaw (chu chu shown.bs.popover
or hidden.bs.popover
event a thlen hma) caller hnenah a kir leh thin. Hei hi popover “manual” triggering anga ngaih a ni.
myPopover.toggle()
paih chhuak rawh
Element pakhat popover chu a thup a, a tichhe bawk (DOM element-a data dahkhawmte a paih chhuak). Delegation hmanga siam Popovers ( option hmanga siamselector
) te chu descendant trigger element-ah pakhat zel tihchhiat theih a ni lo.
myPopover.dispose()
theih tir
Element pakhat popover chu a lantir theihna a pe. Popovers hi default in enable a ni.
myPopover.enable()
ramtuileilo
Element pakhat popover lantir theihna tur a paih chhuak. Popover hi re-enable a nih chauhvin a lantir theih dawn a ni.
myPopover.disable()
toggleEnabled a ni
Element pakhat popover lantir emaw thup emaw theihna tur a toggles.
myPopover.toggleEnabled()
tharlam
Element pakhat popover awmna hmun a update thin.
myPopover.update()
GetInstance tih hi a ni
Static method hmanga DOM element nena inzawm popover instance hmuh theihna tur
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
GetOrCreateInstance tih theih a ni
Static method hmangin DOM element nena inzawm popover instance chu i hmu thei a, a nih loh leh initialised a nih loh chuan a thar siam theih a ni bawk
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
Thil thlengte
Event chi hrang hrang | Hrilhfiahna |
---|---|
show.bs.popover tih hi a ni | show He event hi instance method kan koh chuan a fire nghal vek a ni. |
a lantir.bs.popover | He event hi popover chu user hmuh theiha siam a nih hunah fire a ni (CSS transitions zawh hun a nghak ang). |
thup.bs.popover tih hi a ni | hide He event hi instance method koh a nih chuan a fire nghal a ni. |
thup.bs.retheihna | He event hi popover chu user hnen atanga thup a nih zawh chuan fired a ni (CSS transitions zawh hun a nghak ang). |
a rawn dah lut.bs.popover | show.bs.popover He event hi DOM-a popover template dah a nih hunah event zawhah fired a ni. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})