Ebikozesebwa

Okulaba okutwalira awamu

Ebintu by’olina okumanya ng’okozesa plugin ya tooltip:

• Tooltips zeesigamye ku 3rd party library Popper okusobola okuteeka mu kifo. Olina okussaamu popper.min.js nga tonnaba bootstrap.js oba kozesa bootstrap.bundle.min.js/ bootstrap.bundle.jserimu Popper okusobola obukodyo bw'ebikozesebwa okukola!
• Tooltips are opt-in for performance reasons, kale olina okuzitandika ggwe kennyini .
• Ebikozesebwa ebirina emitwe egy’obuwanvu bwa zero tebiragibwangako.
• Laga container: 'body'okwewala ebizibu by'okulaga mu bitundu ebizibu ennyo (nga ebibinja byaffe eby'okuyingiza, ebibinja bya button, n'ebirala).
• Okutandika obukodyo bw'ebikozesebwa ku bintu ebikwekebwa tekujja kukola.
• Tooltips for .disabledoba disabledelements zirina okutandikibwa ku elementi y'okuzinga.
• Bwe kitandika okuva ku hyperlinks eziwanvuwa layini eziwera, obukodyo bw’ebikozesebwa bujja kuba wakati. Kozesa white-space: nowrap;ku <a>s yo okwewala enneeyisa eno.
• Ebikozesebwa birina okukwekebwa nga elementi zaabwe ezikwatagana tezinnaggyibwa mu DOM.
• Tooltips zisobola okutandika okwebaza elementi munda mu shadow DOM.

Ebyo byonna obifunye? Kirungi nnyo, ka tulabe engeri gye bakolamu n'ebyokulabirako ebimu.

Okugeza: Ssobozesa obukodyo bw’ebikozesebwa buli wamu

Engeri emu ey’okutandikawo obukodyo bwonna obw’ebikozesebwa ku lupapula yandibadde okubilonda okusinziira ku ngeri yaabwe data-bs-toggle:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Eby’okulabirako

Hover ku links wammanga olabe ebikozesebwa:

Hover ku buttons wansi olabe ebiragiro ebina eby’okukozesa: waggulu, ku ddyo, wansi, ne kkono. Endagiriro ziraga endabirwamu nga okozesa Bootstrap mu RTL.

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

Era nga HTML eya custom eyongezeddwaako:

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

Nga olina SVG:

Sass nga bwe kiri

Enkyukakyuka ezikyukakyuka

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

Enkozesa

Plugin y'obukodyo bw'ebikozesebwa ekola ebirimu n'obubonero ku bwetaavu, era nga bwe kibadde eteeka obukodyo bw'ebikozesebwa oluvannyuma lw'ekintu kyabwe ekiziyiza.

Trigger the tooltip nga oyita mu JavaScript:

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

Okuteeka obubonero

Markup ekyetaagisa ku tooltip ye dataattribute yokka era titleku HTML element oyagala okuba ne tooltip. Obubonero obukoleddwa obw'ekintu ekikozesebwa buba bwangu nnyo, wadde nga kyetaagisa ekifo (nga bwe kibadde, kiteekeddwawo topnga plugin).

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

Ebintu ebilema

Elements ezirina disabledattribute tezikwatagana, ekitegeeza nti abakozesa tebasobola kussa maanyi, hover, oba okuzinyiga okutandika tooltip (oba popover). Nga workaround, ojja kwagala okutandika tooltip okuva ku wrapper <div>oba <span>, ekisinga obulungi ekoleddwa keyboard-focusable nga okozesa 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>

Eby’okulondako

Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-bs-, nga mu data-bs-animation="". Kakasa nti okyusa ekika kya case eky'erinnya ly'okulonda okuva ku camelCase okudda ku kebab-case ng'oyisa eby'okulonda ng'oyita mu data attributes. Okugeza, mu kifo ky’okukozesa data-bs-customClass="beautifier", kozesa data-bs-custom-class="beautifier".

Okukozesa function nepopperConfig

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

Enkola

okulaga

Abikkula ekiwandiiko ky'ekintu ekiyitibwa tooltip. Edda eri oyo akubira nga tooltip tennalagibwa ddala (kwe kugamba nga shown.bs.tooltipekintu tekinnabaawo). Kino kitwalibwa nga “manual” triggering ya tooltip. Ebikozesebwa ebirina emitwe egy’obuwanvu bwa zero tebiragibwangako.

tooltip.show()

okweekweeka

Ekweka ekiwandiiko ky'ekintu ekiyitibwa tooltip. Edda eri oyo akubira nga tooltip tennakwekebwa ddala (kwe kugamba nga hidden.bs.tooltipekintu tekinnabaawo). Kino kitwalibwa nga “manual” triggering ya tooltip.

tooltip.hide()

okukyusakyusa

Ekyusakyusa ekintu ekiyitibwa tooltip. Edda eri oyo akubira nga tooltip tennalagibwa oba okukwekebwa ddala (kwe kugamba nga shown.bs.tooltipoba hidden.bs.tooltipekintu tekinnabaawo). Kino kitwalibwa nga “manual” triggering ya tooltip.

tooltip.toggle()

okusuula

Ekweka era n'esaanyaawo ekintu ekikozesebwa (Eggyawo data eterekeddwa ku kintu kya DOM). Tooltips ezikozesa delegation (ezitondebwa nga tukozesa option )selector teziyinza kusaanawo kinnoomu ku descendant trigger elements.

tooltip.dispose()

okuyinzisa

Ewa ekintu ekiyitibwa tooltip obusobozi okulagibwa. Ebikozesebwa bikozesebwa nga bwe kibadde.

tooltip.enable()

okulemala

Eggyawo obusobozi bw'ekintu ekiyitibwa tooltip okulagibwa. Ekiwandiiko ky'ebikozesebwa kijja kusobola okulagibwa singa kiddamu okusobozesa.

tooltip.disable()

toggleEsobozeseddwa

Ekyusa obusobozi bw'ekintu ekiyitibwa tooltip okulagibwa oba okukwekebwa.

tooltip.toggleEnabled()

okututegeza

Ezza obuggya ekifo ky'ekintu ekiyitibwa tooltip.

tooltip.update()

getEkyokulabirako

Enkola ya static ekusobozesa okufuna tooltip instance ekwatagana ne DOM element

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

getObaTondawoEkifaananyi

Enkola ya static ekusobozesa okufuna tooltip instance ekwatagana ne DOM element, oba okukola empya singa teyali etandikibwawo

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

Ebibaddewo

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

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

tooltip.hide()