Popovers ƒe amewo

Kpɔɖeŋunyagbɔgblɔ

Nusiwo wòle be nànya ne èle popover ƒe kpeɖeŋutɔa zãm:

• Popovers ɖoa ŋu ɖe 3rd party agbalẽdzraɖoƒe Popper ŋu ​​hena ɖoƒeɖoɖo. Ele be nàde popper.min.js hafi bootstrap.js alo nàzã bootstrap.bundle.min.js/ bootstrap.bundle.jssi me Popper le hafi popovers nawɔ dɔ!
• Popovers hiã tooltip plugin abe nusi dzi woanɔ te ɖo ene.
• Popovers nye opt-in le dɔwɔwɔ ƒe susuwo ta, eyata ele be wò ŋutɔ nàdze wo gɔme .
• Zero-didime titlekple contentasixɔxɔwo maɖe popover afia gbeɖe o.
• Tsɔe container: 'body'be nàƒo asa na gbegɔmeɖeɖe ƒe kuxiwo le akpa siwo sesẽ wu me (abe míaƒe nyawo tsɔtsɔ de eme ƒe ƒuƒoƒowo, abɔta ƒe ƒuƒoƒowo, kple bubuawo ene).
• Popovers ʋuʋu ɖe nu ɣaɣlawo dzi mawɔ dɔ o.
• Ele be woadze popovers na .disabledalo disabledelements gɔme ɖe wrapper element dzi.
• Ne wodze seke siwo xatsa ɖe fli geɖe dzi la, popovers la anɔ titina le sekeawo ƒe kekeme bliboa dome. Zã .text-nowraple wò <a>s dzi be nàƒo asa na nuwɔna sia.
• Ele be woaɣla popovers hafi woaɖe woƒe akpa siwo sɔ kplii ɖa le DOM la me.
• Popovers ateŋu adze egɔme akpe ɖe element aɖe si le vɔvɔli DOM me ŋu.

Yi edzi nànɔ nu xlẽm be nàkpɔ alesi popovers wɔa dɔe kple kpɔɖeŋu aɖewo.

Kpɔɖeŋu: Na popovers nawɔ dɔ le afisiafi

Mɔ ɖeka si dzi woato adze popovers katã gɔme le axa aɖe dzi enye be woatia wo to woƒe data-bs-togglenɔnɔme nu:

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

Kpɔɖeŋu: containerTiatiawɔblɔɖea zazã

Ne atsyã aɖewo le dzila ƒe akpa aɖe dzi siwo doa kplamatse popover la, àdi be yeagblɔ ɖoɖo aɖe containerale be popover la ƒe HTML nadze le akpa ma me boŋ.

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

Kpɔɖeŋu

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

Mɔfiame ene

Tiatia ene li: etame, ɖusime, ete, kple miame. Mɔfiamewo dzena le ahuhɔ̃e me ne wole Bootstrap zãm le RTL me.

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

Ðe asi le eŋu le ʋuʋu si kplɔe ɖo me

Zã focustrigger la tsɔ gbe popovers le zãla ƒe ʋuʋu si kplɔe ɖo le element si to vovo na toggle element la dzi.

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

Nuwɔametɔwo ƒe akpawo

Elements kple disabledattribute la menye interactive o, si fia be zãlawo mateŋu atsɔ asi aɖo wo dzi alo azi wo dzi atsɔ aʋã popover (alo tooltip) o. Abe egbɔkpɔnu ene la, àdi be yeaʋu popover la tso wrapper <div>alo <span>, si wowɔ nyuie be woate ŋu atsɔ keyboard-focusable zã tabindex="0".

Le popover triggers siwo nye nuwɔametɔwo gome la, àte ŋu alɔ̃ hã data-bs-trigger="hover focus"be popover la nadze abe nukpɔkpɔ ƒe nyaŋuɖoɖo enumake ene na wò zãlawo elabena ɖewohĩ womakpɔ mɔ be yewoazi nuwɔametɔ ƒe akpa aɖe dzi o.

<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 ƒe nyawo

Nusiwo trɔna

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

Zãzã

Na popovers nawɔ dɔ to JavaScript dzi:

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

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-bs-, abe alesi wòle le data-bs-animation="". Kpɔ egbɔ be yetrɔ tiatia ŋkɔ ƒe case ƒomevi tso camelCase yi kebab-case ne èle tiatiaawo tom to data attributes dzi. Le kpɔɖeŋu me, le esi teƒe be data-bs-customClass="beautifier"nàzã data-bs-custom-class="beautifier".

Zã dɔwɔwɔ kplepopperConfig

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

Mɔnuwo

ɖe fia

Eɖea element aɖe ƒe popover fiana. Trɔ yi amesi yɔe gbɔ hafi woɖe popover la fia ŋutɔŋutɔ (si nye hafi shown.bs.popovernudzɔdzɔa nadzɔ). Wobua esia be enye “asi” si wotsɔ ʋãa amedzidzedzea. Womeɖea Popovers siwo ƒe tanya kple emenyawo siaa nye zero-didime fiana gbeɖe o.

myPopover.show()

be

Eɣlaa element aɖe ƒe popover. Trɔ yi amesi yɔe gbɔ hafi woɣla popover la ŋutɔŋutɔ (si nye hafi hidden.bs.popovernudzɔdzɔa nadzɔ). Wobua esia be enye “asi” si wotsɔ ʋãa amedzidzedzea.

myPopover.hide()

trɔ asi le eŋu

Trɔa element aɖe ƒe popover. Trɔ yi amesi yɔe gbɔ hafi woɖe popover la fia ŋutɔŋutɔ alo ɣlae (si nye hafi shown.bs.popoveralo hidden.bs.popovernudzɔdzɔa nadzɔ). Wobua esia be enye “asi” si wotsɔ ʋãa amedzidzedzea.

myPopover.toggle()

tsɔe ƒu gbe

Ɣla eye wòtsrɔ̃a element ƒe popover (Eɖea nyatakaka siwo wodzra ɖo ɖe DOM element la dzi ɖa). Popovers siwo zãa delegation (si wowɔ to tiatia ) zazã me laselector mateŋu atsrɔ̃ ɖekaɖeka le dzidzime ƒe trigger elements dzi o.

myPopover.dispose()

ɖe mᴐ na

Enaa ŋutete si le element aɖe ƒe popover ŋu ​​be woaɖee afia. Wowɔa Popovers ŋudɔ le gɔmedzedzea me.

myPopover.enable()

de dzo le eme

Eɖea ŋutete si le element aɖe ƒe popover fiana la ɖa. Ne wogbugbɔe wɔ dɔ ko hafi woate ŋu aɖe popover la afia.

myPopover.disable()

toggleWowɔ dɔ le eŋu

Toggles ŋutete na element ƒe popover be woaɖe afia alo aɣla.

myPopover.toggleEnabled()

doe ɖe ŋgᴐ

Trɔ asi le element aɖe ƒe popover ƒe nɔƒe ŋu.

myPopover.update()

getInstance ƒe kpɔɖeŋu

Static mɔnu si ɖea mɔ na wò be nàxɔ popover ƒe kpɔɖeŋu si do ƒome kple DOM ƒe akpa aɖe

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

xɔAloWɔwɔKpɔɖeŋu

Static mɔnu si ɖea mɔ na wò be nàxɔ popover ƒe kpɔɖeŋu si do ƒome kple DOM ƒe akpa aɖe, alo awɔ yeye nenye be womedze egɔme o

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

Nudzɔdzɔwo

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