Dɔwɔnu ƒe Aɖaŋuɖoɖowo
Nuŋlɔɖiwo kple kpɔɖeŋuwo hena Bootstrap dɔwɔnu tɔxɛwo tsɔtsɔ kpe ɖe eŋu kple CSS kple JavaScript to CSS3 zazã me na nɔnɔmetatawo kple data-bs-nɔnɔmewo na teƒea ƒe tanya dzraɖoƒe.
Kpɔɖeŋunyagbɔgblɔ
Nusiwo wòle be nànya ne èle dɔwɔnu ƒe aɖaŋuɖoɖo ƒe kpeɖeŋutɔ zãm:
- Dɔwɔnu ƒe aɖaŋuɖoɖowo ɖoa ŋu ɖe 3rd party agbalẽdzraɖoƒe Popper ŋu hena teƒeɖoɖo. Ele be nàde popper.min.js hafi bootstrap.js alo nàzã
bootstrap.bundle.min.js
/bootstrap.bundle.js
si me Popper le hafi dɔwɔnu ƒe aɖaŋuɖoɖowo nawɔ dɔ! - Dɔwɔnu ƒe aɖaŋuɖoɖowo nye tiatiawɔwɔ le dɔwɔwɔ ta, eyata ele be wò ŋutɔ nàdze wo gɔme .
- Womeɖea dɔwɔnu ƒe aɖaŋuɖoɖo siwo ƒe tanyawo ƒe didime nye zero la fiana 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). - Dɔwɔnu ƒe aɖaŋuɖoɖowo ʋuʋu ɖe nu ɣaɣlawo dzi mawɔ dɔ o.
.disabled
Ele be woaʋu dɔwɔnu ƒe aɖaŋuɖoɖowo na alo elementwo ɖedisabled
wrapper element dzi.- Ne wodze egɔme tso kadodo siwo le fli geɖe dzi me la, dɔwɔnu ƒe aɖaŋuɖoɖowo anɔ titina. Zã
white-space: nowrap;
le wò<a>
s dzi be nàƒo asa na nuwɔna sia. - Ele be woaɣla dɔwɔnu ƒe aɖaŋuɖoɖowo hafi woaɖe woƒe akpa siwo sɔ la ɖa le DOM la me.
- Woateŋu adze dɔwɔnu ƒe aɖaŋuɖoɖowo gɔme akpe ɖe nusi le vɔvɔli DOM me ŋu.
prefers-reduced-motion
nyadzɔdzɔgblɔmɔnuwo ƒe nyabiasea dzi. Kpɔ
míaƒe mɔnukpɔkpɔwo ŋuti nuŋlɔɖiwo ƒe akpa si woɖe dzi kpɔtɔ .
Nu mawo katã le asiwòa? Gã, na míakpɔ alesi wowɔa dɔe kple kpɔɖeŋu aɖewo ɖa.
Kpɔɖeŋu: Na dɔwɔnu ƒe aɖaŋuɖoɖowo nawɔ dɔ le afisiafi
Mɔ ɖeka si dzi nàto adze dɔwɔnu ƒe aɖaŋuɖoɖowo katã gɔme le axa aɖe dzi enye be nàtia wo ɖe woƒe data-bs-toggle
nɔnɔme nu:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
Kpɔɖeŋuwo
Tsɔ asi ɖo kadodo siwo le ete la dzi be nàkpɔ dɔwɔnu ƒe aɖaŋuɖoɖowo:
Teƒeɖoɖo ƒe nuŋɔŋlɔ be woatsɔ aɖe kadodo aɖewo siwo le fli me kple dɔwɔnu ƒe aɖaŋuɖoɖowo afia. Esia nye filler ko fifia, amewula aɖeke meli o. Emenya siwo woda ɖe afisia be woasrɔ̃ nuŋɔŋlɔ ŋutɔŋutɔ ƒe anyinɔnɔ ko . Eye esiawo katã be wòana nàkpɔ alesi dɔwɔnu ƒe aɖaŋuɖoɖowo anɔ ne wozã wo le nɔnɔme ŋutɔŋutɔwo me la ƒe susu aɖe ko. Eyata míele mɔ kpɔm be èkpɔ alesi dɔwɔnu siawo siwo le kadodowo dzi ate ŋu awɔ dɔ le nuwɔna me azɔ, ne ènya zã wo le wò ŋutɔ wò nyatakakadzraɖoƒe alo dɔ aɖe ko.
Tsɔ asi ɖo abɔta siwo le ete la dzi be nàkpɔ dɔwɔnu ƒe aɖaŋuɖoɖo eneawo ƒe mɔfiamewo: 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-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
Tooltip on left
</button>
Eye esi wotsɔ HTML si wowɔ ɖe ɖoɖo nu kpe ɖe eŋu la:
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
Le SVG me la:
Sass ƒe nyawo
Nusiwo trɔna
$tooltip-font-size: $font-size-sm;
$tooltip-max-width: 200px;
$tooltip-color: $white;
$tooltip-bg: $black;
$tooltip-border-radius: $border-radius;
$tooltip-opacity: .9;
$tooltip-padding-y: $spacer * .25;
$tooltip-padding-x: $spacer * .5;
$tooltip-margin: 0;
$tooltip-arrow-width: .8rem;
$tooltip-arrow-height: .4rem;
$tooltip-arrow-color: $tooltip-bg;
Zãzã
Dɔwɔnu ƒe aɖaŋuɖoɖo ƒe kpeɖeŋutɔa wɔa nyatakakawo kple dzesidede ne wobiae, eye le gɔmedzedzea me la, etsɔa dɔwɔnu ƒe aɖaŋuɖoɖowo ɖoa woƒe nusi ʋãa ame la megbe.
Dze dɔwɔnu ƒe aɖaŋuɖoɖoa gɔme to JavaScript dzi:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
Overflow auto
kplescroll
Dɔwɔnu ƒe dzesi ƒe nɔƒe dzea agbagba be yeatrɔ le eɖokui si ne dzila ƒe nugoe aɖe le overflow: auto
alo overflow: scroll
abe míaƒe .table-responsive
, gake egaléa teƒe gbãtɔ ƒe nɔƒe ɖe te kokoko. Be nàkpɔ esia gbɔ la, ɖo boundary
tiatia la (na flip modifier si zãa popperConfig
tiatia la) ɖe HTMLElement ɖesiaɖe dzi be wòaɖe asixɔxɔ si woɖo ɖi la ɖa, 'clippingParents'
, abe document.body
:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
Dzesidede dzesiwo
Dzesi si hiã na dɔwɔnu ƒe aɖaŋuɖoɖo nye data
nɔnɔme aɖe ko eye title
le HTML ƒe akpaa dzi la, èdi be dɔwɔnu ƒe aɖaŋuɖoɖo nanɔ ye si. Dɔwɔnu ƒe dzesi ƒe dzesi si wowɔ la le bɔbɔe vie, togbɔ be ebia teƒe aɖe hã (le gɔmedzedzea me la, woɖoe ɖe top
to plugin la dzi).
Dɔwɔnu ƒe aɖaŋuɖoɖowo wɔwɔ be woawɔ dɔ na keyboard kple kpekpeɖeŋu mɔ̃ɖaŋununya zãlawo
Ele be nàtsɔ dɔwɔnu ƒe aɖaŋuɖoɖowo akpe ɖe HTML ƒe akpa siwo te ŋu nɔa te ɖe keyboard dzi eye wowɔa nu aduadu tso blema ke (abe kadodowo alo nuŋlɔɖiwo dzi kpɔkpɔ ene) ko ŋu. Togbɔ be woateŋu ana HTML ƒe akpa siwo wowɔna le wo ɖokui si (abe <span>
s ene) nanye esiwo ŋu woate ŋu aɖo ŋkui to nɔnɔmea tsɔtsɔ kpee me hã la tabindex="0"
, esia atsɔ tab ƒe tɔtrɔ siwo ate ŋu ado dziku eye woatɔtɔ ame akpe ɖe nusiwo mewɔa dɔ kple wo nɔewo o ŋu na keyboard zãlawo, eye kpekpeɖeŋunamɔnu akpa gãtɔ meɖea gbeƒã dɔwɔnu ƒe aɖaŋuɖoɖoa le nɔnɔme sia me fifia o. Tsɔ kpe ɖe eŋu la, mègaɖo ŋu ɖe eŋu ɖeɖeko hover
be wòanye nusi aʋã wò dɔwɔnu ƒe aɖaŋuɖoɖo o, elabena esia ana wò dɔwɔnu ƒe aɖaŋuɖoɖowo mate ŋu aʋã keyboard zãlawo o.
<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
Nuwɔametɔwo ƒe akpawo
Elements siwo si disabled
nɔnɔmea le la mewɔa dɔ ɖekae o, si fia be ezãlawo mateŋu atsɔ susu aɖo wo ŋu, atsɔ asi aɖo wo dzi, alo azi wo dzi atsɔ adze dɔwɔnu ƒe aɖaŋuɖoɖo (alo popover) gɔme o. Abe egbɔkpɔnu ene la, àdi be yeaʋu dɔwɔnu ƒe aɖaŋuɖoɖoa tso agbalẽ xatsaxatsa <div>
alo <span>
, si sɔ nyuie be woawɔ keyboard-focusable to tabindex="0"
.
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
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"
.
sanitize
,
sanitizeFn
, kple
tiatiaawo o.allowList
Ŋkɔ | Ƒomevi | Gᴐmedzeƒe | Nuɖᴐɖᴐ |
---|---|---|---|
animation |
boolean ƒe ƒuƒoƒo | true |
Wɔ CSS fade ƒe tɔtrɔ ɖe dɔwɔnu ƒe aɖaŋuɖoɖoa dzi |
container |
kaƒoƒo | element | alakpa | false |
Tsɔ dɔwɔnu ƒe aɖaŋuɖoɖoa kpe ɖe nu aɖe koŋ ŋu. Kpɔɖeŋu: |
delay |
xexlẽdzesi | nu | 0 |
Hehe ɖe megbe le dɔwɔnu ƒe aɖaŋuɖoɖo ɖeɖefia kple eɣla ɖe megbe (ms) - meku ɖe asi ƒe ʋuʋu ƒ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 | false |
Ðe mɔ na HTML le dɔwɔnu ƒe aɖaŋuɖoɖoa me. Ne enye nyateƒe la, woaɖe HTML dzesi siwo le dɔwɔnu ƒe aɖaŋuɖoɖoa me Zã nuŋɔŋlɔ ne ètsi dzi ɖe XSS ƒe amedzidzedzewo ŋu. |
placement |
kaƒoƒo | wᴐ dᴐ | 'top' |
Alesi woaɖo dɔwɔnu ƒe aɖaŋuɖoɖoa ɖe teƒe - 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 dɔwɔnu ƒe dzesi DOM node abe eƒe nyaʋiʋli gbãtɔ ene eye nusi ʋãa nu DOM node abe eƒe evelia ene. Woɖo |
selector |
kaƒoƒo | alakpa | false |
Ne wotsɔ tiatiawɔnu aɖe na la, woatsɔ dɔwɔnu ƒe aɖaŋuɖoɖo nuawo ade asi na taɖodzinu siwo woɖo. Le nuwɔna me la, wozãa esia tsɔ wɔa dɔwɔnu ƒe aɖaŋuɖoɖowo hã ŋudɔ ɖe DOM ƒe akpa siwo wotsɔ kpe ɖe eŋu le mɔ si trɔna nu ( jQuery.on kpekpeɖeŋu). Kpɔ esia kple kpɔɖeŋu si me nyatakaka geɖe le . |
template |
ka | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Gɔmeɖoanyi HTML si nàzã ne èle dɔwɔnu ƒe aɖaŋuɖoɖoa wɔm. Woado dɔwɔnu ƒe aɖaŋuɖoɖoa
Ele be |
title |
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 |
trigger |
ka | 'hover focus' |
Alesi woadze dɔwɔnu ƒe aɖaŋuɖoɖo 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.
|
fallbackPlacements |
ƒuƒoƒo ƒe ƒuƒoƒo | ['top', 'right', 'bottom', 'left'] |
Ðe fallback teƒewo gɔme to teƒewo ƒe xexlẽdzesi nana le ƒuƒoƒo me (le ɖoɖo si nu nèdi nu). Ne èdi nyatakaka bubuwo la, kpɔ Popper ƒe nuwɔna ŋuti nuŋlɔɖiwo |
boundary |
kaƒoƒo | na | 'clippingParents' |
Dɔwɔnu ƒe aɖaŋuɖoɖo ƒe mɔxexeɖedɔléle nu ƒe liƒo (eku ɖe Popper ƒe preventOverflow tɔtrɔɖenu ko ŋu). Le gɔmedzedzea me la, enye 'clippingParents' eye ateŋu axɔ HTMLElement ƒe nufiame (to JavaScript ɖeɖeko dzi). Ne èdi nyatakaka bubuwo la, kpɔ Popper ƒe detectOverflow docs . |
customClass |
kaƒoƒo | wᴐ dᴐ | '' |
Tsɔ klasswo kpe ɖe dɔwɔnu ƒe aɖaŋuɖoɖoa ŋu ne woɖee fia. De dzesii be woatsɔ klass siawo akpe ɖe klass ɖesiaɖe si wogblɔ le template la me ŋu. Be nàtsɔ klass geɖe akpe ɖe eŋu la, ma wo dome kple dometsotsowo: Àteŋu atsɔ dɔwɔwɔ aɖe hã si wòle be wòatrɔ ka ɖeka si me klass ŋkɔ bubuwo le la ŋu. |
sanitize |
boolean ƒe ƒuƒoƒo | true |
Na dzadzɛnyenyea nawɔ dɔ alo nàgawɔ dɔ o. Ne wowɔ dɔ 'template' eye 'title' woawɔ tiatiawɔblɔɖewo ŋudɔ. Kpɔ akpa si nye sanitizer le míaƒe JavaScript nuŋlɔɖiwo me . |
allowList |
nu | Asixɔxɔ si woɖo ɖi | Nusi me nɔnɔme kple dzesi siwo ŋu woɖe mɔ ɖo le |
sanitizeFn |
null | wᴐ dᴐ | null |
Afisiae nàte ŋu ana wò ŋutɔ wò sanitize dɔwɔwɔ. Esia ate ŋu aɖe vi ne èdi be yeazã agbalẽdzraɖoƒe si woɖo ɖi atsɔ awɔ dzadzɛnyenyedɔ. |
offset |
ƒuƒoƒo | kaƒoƒo | wᴐ dᴐ | [0, 0] |
Dɔwɔnu ƒe aɖaŋuɖoɖo ƒe vovototodedeameme ne wotsɔe sɔ kple eƒe taɖodzinu. Àteŋu atsɔ ka aɖe ayi nyatakaka nɔnɔmewo me kple asixɔxɔ siwo woɖe ɖe vovo comma me abe: Ne wozã dɔwɔwɔ aɖe tsɔ nya offset la, woyɔnɛ kple nusi me popper ƒe ɖoɖo, nufiame, kple popper rects le abe eƒe nyaʋiʋli gbãtɔ ene. Wotsɔa nusi ʋãa nu DOM node la toa eme abe nyaʋiʋli evelia ene. Ele be dɔwɔwɔa natrɔ ƒuƒoƒo si me xexlẽdzesi eve le: . Ne èdi nyatakaka bubuwo la, kpɔ Popper ƒe offset docs . |
popperConfig |
null | nu | wᴐ dᴐ | null |
Ne èdi be yeatrɔ Bootstrap ƒe Popper ƒe ɖoɖowɔɖi gbãtɔ la, kpɔ Popper ƒe ɖoɖowɔɖi . Ne wozã dɔwɔwɔ aɖe tsɔ wɔ Popper ƒe ɖoɖowɔɖi la, woyɔnɛ kple nusi me Bootstrap ƒe Popper ƒe ɖoɖowɔɖi gbãtɔ le. Ekpena ɖe ŋuwò nèzãa default la eye nàtsɔe aƒo ƒu kple wò ŋutɔ wò ɖoɖowɔɖi. Ele be dɔwɔwɔa natrɔ ɖoɖowɔɖi ƒe nu aɖe na Popper. |
Nyatakaka ƒe nɔnɔmewo na dɔwɔnu ɖekaɖekawo ƒe aɖaŋuɖoɖowo
Woateŋu agblɔ tiatia siwo woawɔ na dɔwɔnu ɖekaɖekawo le mɔ bubu nu to nyatakakawo ƒe nɔnɔmewo zazã me, abe alesi míeɖe eme le etame ene.
Zã dɔwɔwɔ kplepopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Mɔnuwo
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 .
ɖe fia
Eɖea element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo fiana. Trɔ yi yɔla gbɔ hafi woɖe dɔwɔnu ƒe aɖaŋuɖoɖoa fia ŋutɔŋutɔ (si nye hafi shown.bs.tooltip
nudzɔdzɔa nadzɔ). Wobua esia be enye dɔwɔnu ƒe aɖaŋuɖoɖoa ƒe “asi” ƒe dɔwɔwɔ. Womeɖea dɔwɔnu ƒe aɖaŋuɖoɖo siwo ƒe tanyawo ƒe didime nye zero la fiana gbeɖe o.
tooltip.show()
be
Ɣla element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo. Trɔ yi yɔla gbɔ hafi woɣla dɔwɔnu ƒe aɖaŋuɖoɖoa ŋutɔŋutɔ (si nye hafi hidden.bs.tooltip
nudzɔdzɔa nadzɔ). Wobua esia be enye dɔwɔnu ƒe aɖaŋuɖoɖoa ƒe “asi” ƒe dɔwɔwɔ.
tooltip.hide()
trɔ asi le eŋu
Trɔa element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo. Trɔ yi yɔla gbɔ hafi woɖe dɔwɔnu ƒe aɖaŋuɖoɖoa fia ŋutɔŋutɔ alo ɣlae (si nye hafi shown.bs.tooltip
alo hidden.bs.tooltip
nudzɔdzɔa nadzɔ). Wobua esia be enye dɔwɔnu ƒe aɖaŋuɖoɖoa ƒe “asi” ƒe dɔwɔwɔ.
tooltip.toggle()
tsɔe ƒu gbe
Ɣla element ƒe dɔwɔnu ƒe aɖaŋuɖoɖo eye wòtsrɔ̃nɛ (Eɖea nyatakaka siwo wodzra ɖo ɖe DOM element la dzi ɖa). Dɔwɔnu ƒe aɖaŋuɖoɖo siwo zãa delegation (si wowɔ to tiatia ) zazã me laselector
mateŋu atsrɔ̃ ɖekaɖeka le dzidzime ƒe trigger elements dzi o.
tooltip.dispose()
ɖe mᴐ na
Enaa ŋutete be woaɖee afia element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo. Wowɔa dɔwɔnu ƒe aɖaŋuɖoɖowo ŋudɔ le gɔmedzedzea me.
tooltip.enable()
de dzo le eme
Ðe ŋutete si le element ƒe dɔwɔnu ƒe aɖaŋuɖoɖo ŋu be woaɖee afia la ɖa. Ne wogbugbɔe wɔ dɔ ko hafi woate ŋu aɖe dɔwɔnu ƒe aɖaŋuɖoɖoa afia.
tooltip.disable()
toggleWowɔ dɔ le eŋu
Trɔ ŋutete si le element ƒe dɔwɔnu ƒe aɖaŋuɖoɖo ŋu be woaɖee afia alo aɣla.
tooltip.toggleEnabled()
doe ɖe ŋgᴐ
Trɔ asi le element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo ƒe nɔƒe ŋu.
tooltip.update()
xɔKpɔɖeŋu
Static mɔnu si ɖea mɔ na wò be nàxɔ dɔwɔnu ƒe a��aŋuɖoɖo ƒe kpɔɖeŋu si do ƒome kple DOM ƒe akpa aɖe
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
xɔAloWɔwɔKpɔɖeŋu
Static mɔnu si ɖea mɔ na wò be nàxɔ dɔwɔnu ƒe aɖaŋuɖoɖo ƒ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 tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
Nudzɔdzɔwo
Nudzɔdzɔ ƒomevi | Nuɖᴐɖᴐ |
---|---|
show.bs.tooltip |
Nudzɔdzɔ sia doa dzo enumake ne woyɔ show kpɔɖeŋu mɔnu la. |
shown.bs.tooltip |
Woɖea nudzɔdzɔ sia ɖa ne wowɔ dɔwɔnu ƒe aɖaŋuɖoɖoa be wòadze na zãla (alala be CSS ƒe tɔtrɔwo nawu enu). |
hide.bs.tooltip |
Woɖea nudzɔdzɔ sia ɖa enumake ne woyɔ hide instance mɔnu la. |
hidden.bs.tooltip |
Woɖea nudzɔdzɔ sia ɖa ne dɔwɔnu ƒe aɖaŋuɖoɖoa ɣla ɖe zãla la vɔ (alala be CSS ƒe tɔtrɔwo nawu enu). |
inserted.bs.tooltip |
Woɖea nudzɔdzɔ sia ɖa le nudzɔdzɔa megbe show.bs.tooltip ne wotsɔ dɔwɔnu ƒe aɖaŋuɖoɖo ƒe nɔnɔmetata kpe ɖe DOM ŋu. |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()