Ebikozesebwa

Okulaba okutwalira awamu

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

• Ebikozesebwa byesigamye ku tterekero ly’ebitabo ery’ekibiina eky’okusatu Popper okusobola okuteeka mu kifo. Olina okussaamu popper.min.js nga tonnaba bootstrap.js, oba kozesa emu bootstrap.bundle.min.jserimu Popper.
• 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.

Eby’okulabirako

Ssobozesa obukodyo bw’ebikozesebwa

Nga bwe kyayogeddwa waggulu, olina okutandikawo obukodyo bw’ebikozesebwa nga tebunnaba kukozesebwa. Engeri emu ey’okutandikawo ebikozesebwa byonna ku lupapula yandibadde okubilonda okusinziira ku ngeri yaabwe data-bs-toggle, nga bwe kityo:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Ebikozesebwa ku links

Hover ku links wammanga olabe ebikozesebwa:

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>

Ebikozesebwa eby’enjawulo

Osobola okulongoosa endabika y'ebikozesebwa ng'okozesa enkyukakyuka za CSS . Tuteekawo ekibiina eky’ennono ne data-bs-custom-class="custom-tooltip"okusobola okupima endabika yaffe ey’ennono era ne tugikozesa okusazaamu enkyukakyuka ya CSS ey’omu kitundu.

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

Endagiriro

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" data-bs-title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-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" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Nga olina SVG:

CSS

Enkyukakyuka ezikyukakyuka

Nga ekitundu ku nkola ya Bootstrap egenda ekulaakulana enkyukakyuka za CSS, obukodyo bw'ebikozesebwa kati bukozesa enkyukakyuka za CSS ez'omu kitundu ku .tooltipfor enhanced real-time customization. Emiwendo gy'enkyukakyuka za CSS giteekebwawo nga giyita mu Sass, kale okulongoosa Sass kukyawagirwa, nakyo.

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
  

Enkyukakyuka za Sass

$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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

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:

const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)

const tooltip = new bootstrap.Tooltip('#example', {
  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" data-bs-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" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Eby’okulondako

Nga eby'okulonda bwe bisobola okuyisibwa nga biyita mu bikwata ku data oba JavaScript, osobola okugattako erinnya ly'okulonda ku data-bs-, nga mu data-bs-animation="{value}". 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, kozesa data-bs-custom-class="beautifier"mu kifo kya data-bs-customClass="beautifier".

Okuva ku Bootstrap 5.2.0, ebitundu byonna biwagira ekintu kya data ekiterekeddwa eky'okugezesadata-bs-config ekiyinza okuteeka ensengeka y'ebitundu ennyangu ng'olunyiriri lwa JSON. Ekintu bwe kiba data-bs-config='{"delay":0, "title":123}'n'ebintu data-bs-title="456", omuwendo ogusembayo titlegujja kuba 456era ebifaananyi bya data eby'enjawulo bijja kusazaamu emiwendo egyaweebwa ku data-bs-config. Okugatta ku ekyo, ebikwata ku data ebiriwo bisobola okuteeka emiwendo gya JSON nga data-bs-delay='{"show":0,"hide":150}'.

Okukozesa function nepopperConfig

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

Enkola

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

Ebibaddewo

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()