Amathuluzi

Uhlolojikelele

Izinto okufanele uzazi uma usebenzisa i-plugin ithiphu yamathuluzi:

• Amathuluzi ancike kulabhulali yenkampani yangaphandle ye- Popper ukuze ibekwe. Kufanele ufake i -popper.min.js ngaphambili bootstrap.js, noma usebenzise eyodwa bootstrap.bundle.min.jsequkethe i-Popper.
• Izeluleko zokungena ngezizathu zokusebenza, ngakho-ke kuzomele uziqalise ngokwakho .
• Amathuluzi anezihloko zobude obunguziro awaboniswa.
• Cacisa container: 'body'ukuze ugweme ukunikeza izinkinga ngezingxenye eziyinkimbinkimbi (njengamaqembu ethu okokufaka, amaqembu wezinkinobho, njll).
• Ukucupha amathiphu kuzinto ezifihliwe ngeke kusebenze.
• .disabledAmathuluzi noma ama- disabledelementi kufanele acushwe ku -elementi yokugoqa.
• Uma icushwa isuka kuma-hyperlink anemigqa eminingi, amathiphu amathuluzi azobekwa phakathi nendawo. Sebenzisa white-space: nowrap;kweyakho <a>ukugwema lokhu kuziphatha.
• Izeluleko zamathuluzi kufanele zifihlwe ngaphambi kokuthi izici ezihambisanayo zikhishwe ku-DOM.
• Izeluleko zamathuluzi zingaqaliswa ngenxa yento engaphakathi kwesithunzi se-DOM.

Unakho konke lokho? Kuhle, ake sibone ukuthi basebenza kanjani ngezinye izibonelo.

Izibonelo

Nika amandla amathiphu

Njengoba kushiwo ngenhla, kufanele uqalise amathiphu wamathuluzi ngaphambi kokuthi asetshenziswe. Enye indlela yokuqalisa wonke amathiphu ekhasini kuzoba ukuwakhetha ngesibaluli sawo data-bs-toggle, njengalokhu:

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

Amathiphu kuzixhumanisi

Hambisa phezulu kwezixhumanisi ezingezansi ukuze ubone amathuluzi:

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

Amathiphu wamathuluzi ngokwezifiso

Ungenza ngendlela oyifisayo ukubukeka kwamathiphu wamathuluzi usebenzisa okuguquguqukayo kwe-CSS . Sisetha ikilasi langokwezifiso data-bs-custom-class="custom-tooltip"ukuze sinwebe ukubukeka kwethu kwangokwezifiso futhi sikusebenzisele ukubhala ngaphezulu okuhlukile kwendawo ye-CSS.

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

Izikhombisi-ndlela

Hambisa phezulu kwezinkinobho ezingezansi ukuze ubone izikhombisi-ndlela zamathuluzi amane: phezulu, kwesokudla, phansi, nakwesokunxele. Izikhombisi-ndlela ziboniswa uma usebenzisa i-Bootstrap ku-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>

Futhi nge-HTML yangokwezifiso yengezwe:

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

Nge-SVG:

CSS

Okuguquguqukayo

Njengengxenye yendlela yokuguquguquka kwe-CSS ye-Bootstrap, izeluleko zamathuluzi manje zisebenzisa okuguquguqukayo kwasendaweni kwe-CSS .tooltipukuze kwenziwe ngokwezifiso isikhathi sangempela esithuthukisiwe. Amanani okuguquguquka kwe-CSS asethwa nge-Sass, ngakho ukwenza ngokwezifiso kwe-Sass kusasekelwa, nakho.

  --#{$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};
  

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

Ukusetshenziswa

I-plugin yethulithiphu ikhiqiza okuqukethwe kanye nemakhaphu ngokufunwayo, futhi ngokuzenzakalelayo beka izeluleko zamathuluzi ngemva kwesici sokucupha.

Qalisa ithiphu yamathuluzi nge-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')
})

Imakhaphu

Imakhaphu edingekayo yethiphu yamathuluzi iyisibaluli kuphela datafuthi titleengxenyeni ye-HTML ofisa ukuba nayo ithiphu. Imakhaphu ekhiqiziwe yethiphu yamathuluzi ilula, nakuba idinga indawo (ngokuzenzakalelayo, isethwe topyi-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>

Izakhi ezikhutshaziwe

Ama- disabledelementi anesibaluli awahlangani, okusho ukuthi abasebenzisi abakwazi ukugxila, ukuhambisa phezulu, noma ukuwachofoza ukuze baqalise ithiphu yamathuluzi (noma i-popover). Njengendlela yokusebenza, uzofuna ukuqalisa ithiphu yamathuluzi kusuka kusisonga <div>noma <span>, kwenziwe kahle ukuthi kugxilwe kukhibhodi usebenzisa 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>

Izinketho

Njengoba izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript, ungakwazi ukwengeza igama lenketho kokuthi data-bs-, njengaku data-bs-animation="{value}". Qiniseka ukuthi ushintsha uhlobo lwekesi legama lenketho lisuka ku- “ camelCase ” liye ku- “ kebab-case ” lapho udlulisa izinketho ngezibaluli zedatha. Isibonelo, sebenzisa data-bs-custom-class="beautifier"esikhundleni se- data-bs-customClass="beautifier".

Kusukela ku-Bootstrap 5.2.0, zonke izingxenye zisekela isibaluli sedatha egodliwe esihlolwayodata-bs-config esingafaka ukucushwa kwengxenye elula njengochungechunge lwe-JSON. Uma into inezibaluli , inani lokugcina lizoba data-bs-config='{"delay":0, "title":123}'futhi izibaluli zedatha ezihlukene zizokhipha amanani anikezwe ngomhla ka- . Ngaphezu kwalokho, izibaluli zedatha ezikhona ziyakwazi ukubeka amanani e-JSON afana .data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Ukusebenzisa umsebenzi ngepopperConfig

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

Izindlela

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

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

Imicimbi

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

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

tooltip.hide()