Source

Popovers te an ni

Documentation leh iOS-a hmuh ang chi Bootstrap popovers te chu i site-a element eng pawha dah belh dan tur entirnan.

A tlangpuiin

Popover plugin hman huna hriat tur awmte:

  • Popovers te hian positioning atan 3rd party library Popper.js an ring tlat a ni. Popper.min.js hi bootstrap.js hmain i dah tel tur a ni emaw, Popper.js awmna bootstrap.bundle.min.js/ hmang bootstrap.bundle.jstur a ni a, chu chuan popovers a thawh theih nan!
  • Popovers hian tooltip plugin hi dependency atan a mamawh a ni.
  • Kan JavaScript hi source atanga i siam a nih chuanutil.js .
  • Popovers hi performance avanga opt-in a nih avangin nangmah ngeiin i initialize tur a ni .
  • Zero-length titleleh contentvalue 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 .disabledor disabledelements 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-nowrapi 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.

He component hian animation effect hi prefers-reduced-motionmedia 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-toggleattribute hmanga thlan hi a ni ang:

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

Entirnan: containerOption hmangin

Popover tibuaitu parent element-a style thenkhat i neih chuan, containerchu element chhungah chuan popover-a HTML chu a lang zawk theih nan custom i dah duh ang.

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

Entirna

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

Kawng pali

Option pali a awm a, chunglam, dinglam, hnuai lam, leh veilam aligned te an ni.

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

A hnuaia click leh hunah dismiss rawh

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

Dismissible popover a ni 
<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'
})

Elements tihtawp a ni

Attribute nei element te disabledhi interactive an ni lo va, chu chu user te chuan popover (or tooltip) trigger turin hover emaw click emaw an ti thei lo tihna a ni. Workaround atan chuan wrapper atanga popover kha trigger <div>emaw , on the disabled element <span>override emaw i duh ang.pointer-events

Disabled popover triggers tan chuan i duh zawk thei bawk a, chutiang bawkin popover chu i hmangtute hnenah disabled element clickdata-trigger="hover" an beisei loh avangin visual feedback nghal ang maia lang turin i duh thei bawk.

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

Hman dan tur

JavaScript hmangin popovers te chu enable rawh:

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

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-, data-animation="".

Hming Lampang Hlawhchhamna Hrilhfiahna
animation tih a ni boolean a ni dik Popover ah hian CSS fade transition hmangin apply rawh
container a ni string | element | diklo diklo

Popover chu element bik pakhatah a append thin. Entirnan: container: 'body'. He option hi a bik takin a tangkai hle a, triggering element bulah document flow-ah popover chu dah theih a ni - chu chuan window resize laiin popover chu triggering element atanga hla takah a float loh nan a veng ang.
lungawi string | element | thiltih '' tih a ni.

data-contentAttribute a awm loh chuan default content value a ni.

Function pek a nih chuan a thisreference set chu popover attached element-ah dahin a ko ang.
titlai number | thil 0 a ni

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:delay: { "show": 500, "hide": 100 }
html tih a ni boolean a ni diklo Popover ah chuan HTML kha dah lut rawh. False a nih chuan jQuery-a textmethod hmangin DOM-ah content dah a ni ang. XSS attack i ngaihtuah chuan text hmang rawh.
dahna tur hmun a ni string | thiltih 'dik'

Popover dah dan tur - auto | chunglam | hnuai lam | veilam | dik.
A autotarlan hunah chuan popover chu dynamically reorient a ni ang.

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 thispopover instance ah dah a ni.
selector a ni string | diklo diklo 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 theihna turin hman a ni. Hei hi leh entîrna thu hriat theihna en rawh .
template a ni hrui '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Popover siam huna hman tur HTML base rawh.

Popover's titlechu inject a ni ang a, .popover-header.

Popover's contentchu inject a ni ang a, .popover-body.

.arrowpopover-a arrow a lo ni ta a ni.

Wrapper element pawn lam ber chuan .popoverclass a nei tur a ni.
nihna string | element | thiltih '' tih a ni.

titleAttribute a awm loh chuan title value default a ni.

Function pek a nih chuan a thisreference set chu popover attached element-ah dahin a ko ang.
ti per hrui 'click' a ti a. Popover a tihchhuah dan - | hover rawh | focus | kuta thawh. Trigger tam tak i pass thei a; space hmangin then hran rawh. manualtrigger dang nen pawh a inzawm thei lo.
offset a ni number | hrui 0 a ni Popover chu a target nena khaikhin chuan offset a ni. Hriat belh duh chuan Popper.js-a offset docs en rawh.
fallbackPlacement tih a ni string | array a ni 'vai' Fallback-ah Popper hian eng position nge a hman dawn tih tarlan phalsak rawh. Hriat belh duh chuan Popper.js-a behavior docs en rawh
ramri a ni string | thil bul 'scrollParent' tih a ni. Overflow constraint ramri chu popover a ni. 'viewport', 'window', 'scrollParent', emaw HTMLElement reference (JavaScript chauh) value te a pawm . Hriat belh duh chuan Popper.js-a preventOverflow docs en rawh.

Mimal popovers te tan data attribute te

Popover pakhat zel atana duhthlan tur chu a danglamna chu data attribute hmanga tarlan theih a ni a, a chunga kan sawi tawh ang khan.

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 .

Hriat belh duh chuan kan JavaScript documentation en rawh .

$().popover(options)

Element collection pakhat atan popovers a initialize thin.

.popover('show')

Element pakhat popover a nihzia a pholang. Popover a lan tak tak hmain (chu chu shown.bs.popoverevent a thlen hmain) caller hnenah a kir leh thin. Hei hi popover “manual” triggering anga ngaih a ni. Popovers title leh content pahnih zero-length a nih chuan a lang ngai lo.

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

.popover('hide')

Element pakhat popover a thup. Popover chu thup tak tak a nih hmain (chu chu hidden.bs.popoverthilthleng a thlen hma) call tu hnenah a kir leh thin. Hei hi popover “manual” triggering anga ngaih a ni.

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

.popover('toggle')

Element pakhat popover a toggle thin. Popover a lan tak tak emaw a thup hma emaw (chu chu shown.bs.popoveror hidden.bs.popoverevent a thlen hma) caller hnenah a kir leh thin. Hei hi popover “manual” triggering anga ngaih a ni.

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

.popover('dispose')

Element pakhat popover chu a thup a, a tichhe vek bawk. Delegation hmanga siam Popovers ( option hmanga siamselector ) te chu descendant trigger element-ah pakhat zel tihchhiat theih a ni lo.

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

.popover('enable')

Element pakhat popover chu a lantir theihna a pe. Popovers hi default in enable a ni.

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

.popover('disable')

Element pakhat popover lantir theihna tur a paih chhuak. Popover hi re-enable a nih chauhvin a lantir theih dawn a ni.

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

.popover('toggleEnabled')

Element pakhat popover lantir emaw thup emaw theihna tur a toggles.

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

.popover('update')

Element pakhat popover awmna hmun a update thin.

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

Thil thlengte

Thil thleng chi hrang hrang Hrilhfiahna
show.bs.popover tih hi a ni showHe 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 hideHe 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.popoverHe event hi DOM-a popover template dah a nih hunah event zawhah fired a ni. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})