Popovers eziyitibwa Popovers

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.

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.

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

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

Okukozesa function nepopperConfig

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

Enkola

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

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

Ebibaddewo

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