Popovers jedhaman

Haala Waliigalaa

Wantoota yeroo popover plugin fayyadamtan beekuu qabdan:

• Popovers ejjennoodhaaf mana kitaabaa qaama sadaffaa Popper irratti hirkatu. Popper.min.js dura dabaluu qabda bootstrap.js, ykn tokko bootstrap.bundle.min.jskan Popper of keessaa qabu fayyadamuu qabda.
• Popovers akka hirkattummaatti popover plugin barbaadu.
• Popovers sababa raawwii hojiitiin opt-in waan ta'aniif ofii keetii jalqabuu qabda .
• Zeeroo-dheerina titlefi contentgatiiwwan gonkumaa popover hin agarsiisan.
• container: 'body'Qaamolee walxaxaa ta'an keessatti (akka gareewwan galtee keenyaa, gareewwan qaree fi kkf) keessatti rakkoolee agarsiisuu akka hin uumamneef ifteessi .
• Elementiiwwan dhokatan irratti popovers kakaasuun hin hojjetu.
• Popovers for .disabledykn disabledelementoota elementii marfataa irratti kakaafamuu qabu.
• Yeroo anchors sarara hedduu qaxxaamuran irraa kakaafamu, popovers bal'ina waliigalaa anchors' gidduutti giddugaleessa ta'a. Amala kana irraa of eeguuf s .text-nowrapkee irratti fayyadami .<a>
• Popovers osoo elementoonni isaanii walgitan DOM keessaa hin baafamin dura dhokfamuu qabu.
• Popovers galata elementii shadow DOM keessa jiruun kakaafamuu danda'a.

Fakkeenyota tokko tokkoon popovers akkamitti akka hojjetan ilaaluuf dubbisuu itti fufi.

Fakkeenyaaf

Popovers dandeessisi

Akkuma armaan olitti ibsame, popovers osoo itti hin fayyadamiin dura jalqabuu qabda. Karaan tokko fuula tokko irratti popovers hunda jalqabsiisuu danda'an amaloota isaaniitiin filachuu ta'a data-bs-toggle, akkas:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Deemoo kallattiin

Live popover armaan gadii agarsiisuuf JavaScript kan cuquliisa armaan olii wajjin wal fakkaatu fayyadamna. Mata dureewwan karaa data-bs-titlefi qabiyyeen qaamaa karaa data-bs-content.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Kallattii afur

Filannoon afur ni jiru: gubbaa, mirgaa, jalaa fi bitaa. Kallattiiwwan yeroo Bootstrap RTL keessatti fayyadamtu calaqqisiifama. data-bs-placementKallattii jijjiiruuf saagi .

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

Aadaacontainer

containerYeroo akkaataawwan tokko tokko qaama warraa irratti kanneen popover gidduu seenan qabdu, akka HTML popover'n bakka isaa qaama sana keessaa mul'atutti amala ifteessuu barbaadda . Kunis gabatee deebii kennanii, gareewwan galtee fi kan kana fakkaatan keessatti baay'inaan mul'ata.

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

Haalli biraa bakka ati amala ifa ta'e saaguu barbaaddu containerpopovers inside a modal dialog , popover mataan isaa modal irratti akka dabalame mirkaneessuuf. Kun keessumaa popovers elementoota walqunnamtii of keessaa qabaniif barbaachisaa dha – qaaqa moodaalii xiyyeeffannoo kiyyootti ni qabata, kanaaf popover elementii mucaa moodaalichaa yoo ta'e malee, fayyadamtoonni elementoota walqunnamtii kana xiyyeeffachuu ykn kakaasuu hin danda'an.

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

Popovers aadaa

Jijjiiramoota CSS fayyadamuun mul'ata popovers dhuunfachuu dandeessa . Mul'ata amala keenyaa bal'isuuf gita amala waliin data-bs-custom-class="custom-popover"saagnee jijjiiramoota CSS naannoo tokko tokko irra darbuuf itti fayyadamna.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</button>

Cuqaasuu itti aanu irratti hojii irraa ari'i

Cuqaasuu itti aanu fayyadamaa focusqaama adda ta'e qaama jijjiirraa irraa popovers kuffisuuf kaka'umsa fayyadami.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

const popover = new bootstrap.Popover('.popover-dismiss', {
  trigger: 'focus'
})

Qaamolee hanqifaman

Qaamonni disabledamaloota qaban wal-qunnamsiisoo miti, jechuun fayyadamtoonni popover (ykn tooltip) kakaasuuf hover ykn cuqaasuu hin danda'an. Akka furmaataatti, popover marfata irraa kakaasuu barbaadda <div>, <span>ideally made keyboard-focusable using tabindex="0".

Kakaasitoota popover hanqifamaniif, akkasumas data-bs-trigger="hover focus"akka popover fayyadamtoota keetiif yaada mul'ataa battalumatti mul'atu filachuu dandeessa sababiin isaas isaan qaama hanqifame irratti cuqaasuu hin eegne.

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

CSS jedhamuun beekama

Jijjiiramoota

Akka qaama dhiyaannaa jijjiiramoota CSS Bootstrap guddachaa jiranitti, popovers amma jijjiiramoota CSS naannoo on fayyadama .popoveryeroo dhugaa dhuunfachiisaa fooyya'eef. Gatiin jijjiiramoota CSS karaa Sass qindaa'u, kanaafuu dhuunfachiisuun Sass ammallee ni deeggarama, akkasumas.

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

Jijjiiramoota Sass

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$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;

Fayyadama

Popovers karaa JavaScript dandeessisi:

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

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu waan danda'uuf, maqaa filannoo gara data-bs-, akka keessatti dabaluu dandeessa data-bs-animation="{value}". Yeroo filannoowwan karaa amaloota deetaa dabarsitu akaakuu keesii maqaa filannoo “ camelCase ” irraa gara “ kebab-case ” jijjiiruu kee mirkaneessi. Fakkeenyaaf, data-bs-custom-class="beautifier"bakka data-bs-customClass="beautifier".

Bootstrap 5.2.0 irraa eegalee, qaamolee hundi amaloota deetaa yaaliidata-bs-config eegame kan qindeessaa qaama salphaa akka tarree JSON qabachuu danda'u deeggaru. Yeroo qaamni tokko amaloota data-bs-config='{"delay":0, "title":123}'fi qabu data-bs-title="456", gatii dhumaa titleta'a 456fi amaloonni deetaa adda addaa gatiiwwan irratti kennaman irra darbu data-bs-config. Dabalataan, amaloonni deetaa jiran gatiiwwan JSON akka data-bs-delay='{"show":0,"hide":150}'.

Faankishinii waliin fayyadamuupopperConfig

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

Malawwan

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

Taateewwan

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