Popovers jedhaman

Haala Waliigalaa

Wantoota yeroo popover plugin fayyadamtan beekuu qabdan:

• Popovers ejjennoodhaaf mana kitaabaa qaama 3ffaa Popper irratti hirkatu. Poppers akka hojjetuuf bootstrap.js dura popper.min.js dabaluu qabda ykn bootstrap.bundle.min.js/ bootstrap.bundle.jskan Popper of keessaa qabu fayyadamuu qabda!
• Popovers akka hirkattummaatti tooltip 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.

Fakkeenya: Popovers bakka hundatti dandeessisi

data-bs-toggleKaraan tokko fuula tokko irratti popovers hunda jalqabsiisuu danda'an amaloota isaaniitiin filachuu ta'a :

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Fakkeenya: containerFilannoo fayyadamuu

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 .

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

Fakkeenya

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

Kallattii afur

Filannoon afur ni jiru: gubbaa, mirgaa, jalaa, fi bitaa qindaa'e. Kallattiiwwan yeroo Bootstrap RTL keessatti fayyadamtu calaqqisiifama.

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

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

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>

Sass jedhama

Jijjiiramoota

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

Fayyadama

Popovers karaa JavaScript dandeessisi:

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

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-bs-, akkuma keessatti dabali data-bs-animation="". Yeroo filannoowwan karaa amaloota deetaa dabarsitu akaakuu keesii maqaa filannoo camelCase irraa gara kebab-case jijjiiruu mirkaneessi. Fakkeenyaaf, fayyadamuu mannaa data-bs-customClass="beautifier", fayyadami data-bs-custom-class="beautifier".

Faankishinii waliin fayyadamuupopperConfig

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

Malawwan

agarsiisuu

Poopover elementii tokkoo mul'isa. Poopover qabatamaan osoo hin agarsiifamiin dura (jechuunis shown.bs.popovertaatee osoo hin uumamin dura) gara waamichaatti deebi'a. Kun akka “harkaan” popover kakaasutti ilaalama. Popovers mata duree fi qabiyyeen isaanii lamaan isaanii dheerina zeeroo ta'an gonkumaa hin agarsiifaman.

myPopover.show()

dhoksuu

Poopover elementii tokkoo dhoksa. Osoo popover qabatamaan hin dhokatin (jechuun osoo hidden.bs.popovertaatee hin uumamin dura) gara waamichaatti deebi'a. Kun akka “harkaan” popover kakaasutti ilaalama.

myPopover.hide()

toggle jechuudha

Poopover elementii tokkoo jijjiira. Osoo popover qabatamaan hin agarsiifamin ykn hin dhokatiin dura gara waamichaatti deebi'a (jechuunis osoo taatee shown.bs.popoverykn hin uumamin dura hidden.bs.popover). Kun akka “harkaan” popover kakaasutti ilaalama.

myPopover.toggle()

gatuu

Poopover elementii dhoksaa fi balleessa (Deetaa elementii DOM irratti kuufame ni haqa). Popovers kanneen delegation fayyadaman ( kanneen selectorfilannoo fayyadamuun uumaman ) elementoota kaka'umsa sanyii irratti dhuunfaan balleessuu hin danda'an.

myPopover.dispose()

dandeessisuu

Poopover elementii tokkoo dandeettii agarsiifamuu kenna. Popovers durtiidhan dandeessifama.

myPopover.enable()

akka hin hojjenne gochuu

Dandeettii popover elementii tokkoo agarsiisuuf qabu ni haqa. Popover agarsiisuu kan danda'u yoo irra deebi'amee dandeessifame qofa.

myPopover.disable()

toggleDandeessifame

Dandeettii popover elementii akka agarsiifamu ykn dhokfamuuf jijjiira.

myPopover.toggleEnabled()

odeeffannoo dhiyeenyaa

Ejjennoo popover elementii tokkoo fooyyessa.

myPopover.update()

Fakkeenya argadhu

Mala istaatiksii kan fakkeenya popover elementii DOM waliin walqabate argachuuf si dandeessisu

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

Fakkeenya argadhuYknUumi

Mala static kan fakkeenya popover elementii DOM waliin walqabate argachuuf si dandeessisu, ykn yoo hin jalqabne haaraa uumuuf si dandeessisu

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

Taateewwan

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