Popovers te an ni

A tlangpuiin

Popover plugin hman huna hriat tur awmte:

• Popovers te hian positioning atan 3rd party library Popper an ring tlat a ni. Poppers a thawh 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 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.

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-toggleattribute 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: 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.

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

focusUser-in toggle element aia element dang a click leh hunah popovers chu dismiss turin trigger hmang ang che .

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

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

Function hman dan nenpopperConfig

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

Thiltih dan tur

lantir

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 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.popoverthilthleng 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.popoveror hidden.bs.popoverevent 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 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 initialized 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

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})