Popovers ƒe amewo
Nuŋlɔɖiwo kple kpɔɖeŋuwo hena Bootstrap popovers, abe esiwo wokpɔ le iOS me ene, tsɔtsɔ kpe ɖe nu ɖesiaɖe si le wò nyatakakadzraɖoƒea ŋu.
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.js ŋ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.js le be popovers nawɔ dɔ! - Popovers hiã tooltip plugin abe nusi dzi woanɔ te ɖo ene.
- Ne èle míaƒe JavaScript tum tso dzɔtsoƒe la, ebia be
util.js. - Popovers nye opt-in le dɔwɔwɔ ƒe susuwo ta, eyata ele be wò ŋutɔ nàdze wo gɔme .
- Zero-didime
titlekplecontentasixɔ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
.disabledalodisabledelements 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.
Yi edzi nànɔ nu xlẽm be nàkpɔ alesi popovers wɔa dɔe kple kpɔɖeŋu aɖewo.
Mɔ ɖeka si dzi woato adze popovers katã gɔme le axa aɖe dzi enye be woatia wo to woƒe data-togglenɔnɔme nu:
$(function () {
$('[data-toggle="popover"]').popover()
})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ŋ.
$(function () {
$('.example-popover').popover({
container: 'body'
})
})<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>Tiatia ene li: etame, ɖusime, ete, kple miame.
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>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.
Dzesi tɔxɛ aɖe hiã na dismiss-ne-next-click
Be nàkpɔ cross-browser kple cross-platform ƒe nuwɔna nyuie la, ele be nàzã <a>tag la, ke menye tag la o <button>, eye ele be nàde tabindexnɔnɔme aɖe hã eme.
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>$('.popover-dismiss').popover({
trigger: 'focus'
})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 dɔwɔwɔ ene la, àdi be yeaʋu popover la tso wrapper me <div>alo <span>eye yeaɖe asi le pointer-eventson the disabled element la ŋu.
Le popover triggers siwo nye nuwɔametɔwo gome la, àte ŋu alɔ̃ hã data-trigger="hover"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" data-toggle="popover" data-content="Disabled popover">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>Na popovers nawɔ dɔ to JavaScript dzi:
$('#example').popover(options)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-, abe alesi wòle le data-animation="".
| Ŋkɔ | Ƒomevi | Gᴐmedzeƒe | Nuɖᴐɖᴐ |
|---|---|---|---|
| nɔnɔmetata si me woɖea nɔnɔmetatawo le | boolean ƒe ƒuƒoƒo | nyateƒe | Wɔ CSS fade ƒe tɔtrɔ ɖe popover la ŋu |
| nugoe me nugoe | kaƒoƒo | element | alakpa | alakpa | Etsɔa popover la kpena ɖe nu aɖe koŋ ŋu. Kpɔɖeŋu: |
| eme nuwo | kaƒoƒo | element | wᴐ dᴐ | '' . | Default content value ne Ne wotsɔ dɔwɔwɔ aɖe na la, woayɔe kple eƒe |
| hehe ɖe megbe | xexlẽdzesi | nu | 0. | Hehe ɖe megbe le popover (ms) ɖeɖefia kple eɣla ɖe megbe - meku ɖe asi trigger ƒomevi ŋu o Ne wotsɔ xexlẽdzesi aɖe na la, wozãa megbedede ɖe ɣla/ɖee fia siaa ŋu Nu ƒe wɔwɔme enye: |
| html | boolean ƒe ƒuƒoƒo | alakpa | De HTML popover la me. Ne alakpae la, woazã jQuery ƒe textmɔnu atsɔ ade emenyawo DOM la me. Zã nuŋɔŋlɔ ne ètsi dzi ɖe XSS ƒe amedzidzedzewo ŋu. |
| ɖoɖo ɖe teƒe aɖe | kaƒoƒo | wᴐ dᴐ | 'nyui' | Ale si woaɖo popover la ɖe ɖoɖo nu - auto | dziƒo | ete | miame | nyui. Ne wozã dɔwɔwɔ aɖe tsɔ nya teƒe si woɖoe ɖo la, woyɔnɛ kple popover DOM node abe eƒe nyaʋiʋli gbãtɔ ene eye triggering element DOM node abe eƒe evelia ene. Woɖo |
| tiatiawɔla | kaƒoƒo | alakpa | alakpa | Ne wotsɔ tiatiawɔnu aɖe na la, woatsɔ popover nuawo ade asi na taɖodzinu siwo woɖo. Le nuwɔna me la, wozãa esia tsɔ naa HTML me nyatakaka siwo trɔna la nate ŋu atsɔ popovers akpe ɖe eŋu. Kpɔ esia kple kpɔɖeŋu si me nyatakaka geɖe le . |
| ƒe nɔnɔmetata | ka | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Gɔmeɖoanyi HTML be nàzã ne èle popover la wɔm. Woado popover Woado popover
Ele be |
| tanya | kaƒoƒo | element | wᴐ dᴐ | '' . | Tanya ƒe asixɔxɔ gbãtɔ ne Ne wotsɔ dɔwɔwɔ aɖe na la, woayɔe kple eƒe |
| daƒe | ka | 'zi edzi'. | Alesi wodzea popover gɔmee - zi | hover | susu tsɔtsɔ ɖo nu ŋu | asi nu. Àte ŋu ato nu geɖe siwo aʋã wò la me; tsɔ dometsotso aɖe ma wo dome. manualwomate ŋu atsɔe akpe ɖe nusi aʋã ame bubu aɖeke ŋu o. |
| offset ƒe ƒuƒoƒo | xexlẽdzesi | ka | 0. | Offset of the popover ne wotsɔe sɔ kple eƒe taɖodzinu. Ne èdi nyatakaka bubuwo la, kpɔ Popper.js ƒe offset docs . |
| fallbackNuɖoɖo ɖe teƒe aɖe | kaƒoƒo | ƒuƒoƒo ƒe ƒuƒoƒo | 'ti kpo' | Ðe mɔ be woagblɔ ɖoƒe si Popper azã le fallback me. Ne èdi nyatakaka bubuwo la, kpɔ Popper.js ƒe nuwɔna ŋuti nuŋlɔɖiwo |
| liƒo dzi | kaƒoƒo | na | 'agbalẽ xatsaxatsa dzila'. | Overflow mɔxenu liƒo na popover. Xɔ 'viewport', 'window', 'scrollParent', alo HTMLElement ƒe nufiame ƒe asixɔxɔwo (JavaScript ɖeɖeko). Ne èdi nyatakaka bubuwo la, kpɔ Popper.js ƒe preventOverflow docs . |
Data nɔnɔmewo na ame ɖekaɖekawo ƒe popovers
Woateŋu agblɔ tiatia siwo woawɔ na popover ɖekaɖekawo le mɔ bubu nu to nyatakaka ƒe nɔnɔmewo zazã me, abe alesi woɖe eme le etame ene.
Mɔnu siwo mewɔ ɖeka kple ɣeyiɣi aɖeke o kple tɔtrɔwo
API mɔnuwo katã nye asynchronous eye wodzea tɔtrɔ gɔme . Wotrɔna yia ame si le ka ƒom na la gbɔ ne wonya dze tɔtrɔa gɔme ko gake hafi wòwu enu . Tsɔ kpe ɖe eŋu la, woaŋe aɖaba aƒu mɔnu ƒe yɔyɔ aɖe dzi le akpa si le tɔtrɔm dzi .
Edzea popovers gɔme na element nuƒoƒoƒu.
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.
$('#element').popover('show')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.
$('#element').popover('hide')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.
$('#element').popover('toggle')Eɣlaa element aɖe ƒe popover eye wòtsrɔ̃nɛ. Popovers siwo zãa delegation (si wowɔ to tiatia ) zazã me laselector mateŋu atsrɔ̃ ɖekaɖeka le dzidzime ƒe trigger elements dzi o.
$('#element').popover('dispose')Enaa ŋutete si le element aɖe ƒe popover ŋu be woaɖee afia. Wowɔa Popovers ŋudɔ le gɔmedzedzea me.
$('#element').popover('enable')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.
$('#element').popover('disable')Toggles ŋutete na element ƒe popover be woaɖe afia alo aɣla.
$('#element').popover('toggleEnabled')Trɔ asi le element aɖe ƒe popover ƒe nɔƒe ŋu.
$('#element').popover('update')| Nudzɔdzɔ Ƒomevi | Nuɖᴐɖᴐ |
|---|---|
| ɖee fia.bs.popover | Nudzɔdzɔ sia doa dzo enumake ne woyɔ showkpɔɖeŋu mɔnu la. |
| woɖee fia.bs.popover | Woɖea nudzɔdzɔ sia ɖa ne wowɔ popover la be wòadze na zãla (alala CSS ƒe tɔtrɔwo be woawu enu). |
| ɣla.bs.ahedada | Woɖea nudzɔdzɔ sia ɖa enumake ne woyɔ hideinstance mɔnu la. |
| ɣaɣla.bs.ahedada | Woɖea nudzɔdzɔ sia ɖa ne popover la ɣla ɖe zãla la vɔ (alala be CSS ƒe tɔtrɔwo nawu enu). |
| wotsɔ de eme.bs.popover | Woɖea nudzɔdzɔ sia ɖa le nudzɔdzɔa megbe show.bs.popoverne wotsɔ popover ƒe nɔnɔmetata kpe ɖe DOM ŋu. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something…
})