Popovers (Popovers) ye

Kuma bɛɛ lajɛlen

Fɛn minnu ka kan ka dɔn ni i bɛ baara kɛ ni popover plugin ye:

• Popovers bɛ u jigi da mɔgɔ sabanan ka gafemarayɔrɔ Popper kan jɔyɔrɔko la. Aw ka kan ka popper.min.js don ka kɔn bootstrap.js, walima ka baara kɛ ni dɔ ye bootstrap.bundle.min.jsmin kɔnɔ Popper bɛ yen.
• Popovers bɛ popover plugin de wajibiya i n’a fɔ dependency.
• Popovers ye opt-in ye baarakɛcogo kunw na, o la aw yɛrɛ ka kan k’u daminɛ .
• Zero-janya titleni contentnafaw tɛna popover jira abada.
• A jira container: 'body'walasa ka i yɛrɛ tanga ɲɛfɔli gɛlɛyaw ma yɔrɔw la minnu ka gɛlɛn kosɛbɛ (i n’a fɔ an ka donnakow kuluw, butɔni kuluw, a ɲɔgɔnnaw).
• Popovers (popovers) daminɛni fɛn dogolenw kan, o tɛna baara kɛ.
• Popovers for .disabledwalima disabledelements ka kan ka daminɛ wrapper element kan.
• Ni a bɛ daminɛ ka bɔ jɛgɛw la minnu bɛ siri tigɛli caman na, popovers bɛna kɛ cɛmancɛ la jɛgɛw bɛɛ bonya bɛɛ cɛ. Aw .text-nowrapbɛ baara kɛ ni aw ka <a>s ye walasa ka aw yɛrɛ tanga nin kɛcogo in ma.
• Popovers ka kan ka dogo sani u bɛnkanw ka bɔ DOM kɔnɔ.
• Popovers bɛ se ka daminɛ k’a sababu kɛ fɛn dɔ ye min bɛ DOM biɲɛ dɔ kɔnɔ.

Aw bɛ to ka kalan kɛ walasa ka a dɔn popoverw bɛ baara kɛ cogo min na ni misali dɔw ye.

Misaliw

A bɛ se ka popovers (popovers) kɛ

I n’a fɔ a fɔra cogo min na sanfɛ, aw ka kan ka popoverw daminɛ sani u ka se ka baara kɛ ni u ye. Popover bɛɛ daminɛcogo dɔ ɲɛ dɔ kan o ye k’u sugandi u ka data-bs-togglefɛnɲɛnɛma fɛ, i n’a fɔ nin cogo la:

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

Demo en direct

An bɛ baara Kɛ ni JavaScript ye min ni sanfɛla yɔrɔ in bɛ Taa ɲɔgɔn fɛ walasa ka nin popover ɲɛnama in jira. Titlew bɛ sigi via data-bs-titleani farikolo kɔnɔkow bɛ sigi via 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>

Sira naani

Sugandili naani bɛ yen: sanfɛ, kinin fɛ, duguma ani numan fɛ. Ladilikanw bɛ jira ni Bootstrap ye RTL kɔnɔ. A’ ye a sigi data-bs-placementwalasa ka sira caman Changer.

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

Laadacontainer

Ni i ye cogoya dɔw Sɔrɔ bangebaga-yɔrɔ dɔ kan minnu bɛ popover dɔ bali, i b’a fɛ ka ladamu dɔ Jira containerwalasa popover ka HTML ka Bɔ o element ‘kɔnɔ o nɔ na. O bɛ kɛ jaabi tabali la, donta kuluw ani o ɲɔgɔnnaw na.

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

Ko wɛrɛ min na i b'a fɛ ka laada jɛlen dɔ sigi sen kan o containerye popovers ye modal dialogue kɔnɔ , walasa ka a dɔn ko popover yɛrɛ bɛ fara modal kan. O nafa ka bon kɛrɛnkɛrɛnnenya la popoverw ma minnu kɔnɔ fɛnw bɛ ɲɔgɔn sɔrɔ – modal dialogues bɛna focus minɛ, o la fo ni popover ye modal denmisɛn yɔrɔ ye, baarakɛlaw tɛna se ka focus walima ka baara kɛ ni o interactive elements ye.

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

Laada popovers

aw bɛ se ka popoverw cogoya ladilan ni CSS fɛn caman sɛgɛsɛgɛli ye . An bɛ ladamu-kalanso dɔ sigi sen kan ni data-bs-custom-class="custom-popover"walasa k’an ka ladamu cogoya scope ani ka baara kɛ n’a ye walasa ka sigida CSS fɛn caman sɛgɛsɛgɛli kɛ.

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

Dismiss kan nata digi

Baara kɛ ni focustrigger ye walasa ka popovers (popovers) bɔ kɛnɛ kan baarakɛla ka fɛn wɛrɛ digilen na min tɛ toggle element ye.

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

Eleman minnu bɛ se ka baara kɛ

Fɛn minnu bɛ ni fɛn ye disabled, olu tɛ ɲɔgɔndan ye, o kɔrɔ ye ko baarakɛlaw tɛ Se k’u jɔ walima k’u digi walasa ka popover (walima baarakɛminɛnw) dɔ Daminɛ. O cogo la, i b’a fɛ ka popover daminɛ ka bɔ wrapper <div>walima <span>, ideally made keyboard-focusable using tabindex="0".

Popover triggers disabled (popover triggers) la, i bɛ se fana k’a fɛ data-bs-trigger="hover focus"walasa popover ka jira i n’a fɔ teliya yecogo jaabi i ka baarakɛlaw ye i n’a fɔ u tɛ se ka a jira ko u bɛna fɛn dɔ digi disabled element kan.

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

Yɛlɛma-yɛlɛmaw

Bootstrap ka CSS fɛn caman sɛgɛsɛgɛli fɛɛrɛ dɔ ye min bɛ ka wuli, popovers bɛ baara kɛ sisan ni sigida CSS fɛn caman sɛgɛsɛgɛli ye on .popoverfor for enhanced real-time customization. Nafa minnu bɛ CSS fɛn caman sɛgɛsɛgɛli la, olu bɛ sigi Sass fɛ, o la Sass ka ladamuni bɛ dɛmɛ hali bi, o fana.

  --#{$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);
  

Sass bεε bε bεn

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

Baarakɛcogo

Popovers baara kɛ JavaScript fɛ:

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

Sugandili minnu bɛ kɛ

I n’a fɔ sugandiliw bɛ se ka tɛmɛ data attributes walima JavaScript fɛ, i bɛ se ka sugandi tɔgɔ dɔ fara data-bs-, i n’a fɔ a bɛ cogo min na data-bs-animation="{value}". Aw ye aw jija ka sugandili tɔgɔ ka case suguya Changer ka bɔ “ camelCase ” la ka kɛ “ kebab-case ” ye ni aw bɛ sugandiliw tɛmɛ data attributes fɛ. Misali la, baara kɛ data-bs-custom-class="beautifier"ni data-bs-customClass="beautifier".

Kabini Bootstrap 5.2.0, yɔrɔw bɛɛ bɛ dɛmɛ don kunnafoni- falen-falen-yɔrɔ-ko -kɛcogodata-bs-config dɔ la min bɛ se ka yɔrɔw labɛncogo nɔgɔmanw bila i n’a fɔ JSON sɛrɛ. Ni fɛn dɔ bɛ data-bs-config='{"delay":0, "title":123}'ni ni data-bs-title="456"fɛnw ye, nafa laban titlebɛna kɛ 456ani kunnafoni danfaralenw bɛna nafaw wuli minnu dira data-bs-config. O tɛmɛnen 'kɔ, kunnafoni-falen-falen-minɛn minnu bɛ yen olu bɛ Se ka JSON nafaw Ladon i n'a fɔ data-bs-delay='{"show":0,"hide":150}'.

Baara kɛ ni baarakɛcogo ye nipopperConfig

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

Fɛɛrɛw

// 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'
})

Ko minnu kɛra

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