Dɔwɔnu ƒe Aɖaŋuɖoɖowo

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.jssi 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.
• .disabledEle be woaʋu dɔwɔnu ƒe aɖaŋuɖoɖowo na alo elementwo ɖe disabledwrapper 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.

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-togglenɔ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:

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)

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 datanɔnɔme aɖe ko eye titlele 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 topto plugin la dzi).

<!-- 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 disablednɔ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".

Zã dɔwɔwɔ kplepopperConfig

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

Mɔnuwo

ɖ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.tooltipnudzɔ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.tooltipnudzɔ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.tooltipalo hidden.bs.tooltipnudzɔ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()

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

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()