Amathuluzi

Uhlolojikelele

Izinto okufanele uzazi uma usebenzisa i-plugin ithiphu yamathuluzi:

• Amathuluzi ancike ku- Popper yelabhulali yenkampani yangaphandle ukuze ibekwe. Kufanele ufake i -popper.min.js ngaphambi kwe-bootstrap.js noma usebenzise bootstrap.bundle.min.js/ bootstrap.bundle.jsequkethe i-Popper ukuze amathuluzi asebenze!
• 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.

Isibonelo: Nika amandla izeluleko zamathuluzi yonke indawo

Enye indlela yokuqalisa wonke amathiphu ekhasini kuzoba ukuwakhetha ngesibaluli sawo data-bs-toggle:

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

Izibonelo

Hambisa phezulu kwezixhumanisi ezingezansi ukuze ubone amathuluzi:

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

Futhi nge-HTML yangokwezifiso yengezwe:

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

Nge-SVG:

Sass

Okuguquguqukayo

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

Ukusetshenziswa

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

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

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" 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" title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-bs-, njengaku data-bs-animation="". Qiniseka ukuthi ushintsha uhlobo lwekesi legama lenketho ukusuka ku-camelCase ukuya ku-kebab-kesi lapho udlulisa izinketho ngezibaluli zedatha. Ngokwesibonelo, esikhundleni sokusebenzisa data-bs-customClass="beautifier", sebenzisa data-bs-custom-class="beautifier".

Ukusebenzisa umsebenzi ngepopperConfig

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

Izindlela

umbukiso

Iveza ithulithiphu yento ethile. Ibuyela kofonayo ngaphambi kokuthi ithiphu yamathuluzi iboniswe (okungukuthi ngaphambi kokuthi shown.bs.tooltipkwenzeke umcimbi). Lokhu kuthathwa njengokucupha “okuzenzela” ithiphu yamathuluzi. Amathuluzi anezihloko zobude obunguziro awaboniswa.

tooltip.show()

fihla

Ifihla ithiphu yento ethile. Ibuyela kofonayo ngaphambi kokuthi ithiphu yamathuluzi ifihlekile (okungukuthi ngaphambi kokuthi hidden.bs.tooltipkwenzeke umcimbi). Lokhu kuthathwa njengokucupha “okuzenzela” ithiphu yamathuluzi.

tooltip.hide()

guqula

Iguqula ithiphu lethuluzi le-elementi. Ibuyela kofonayo ngaphambi kokuthi ithiphu yamathuluzi iboniswe noma ifihlwe (okungukuthi ngaphambi kokuthi kwenzeke shown.bs.tooltipnoma hidden.bs.tooltipkwenzeke). Lokhu kuthathwa njengokucupha “okuzenzela” ithiphu yamathuluzi.

tooltip.toggle()

lahla

Ifihla futhi ibhubhise ithiphu ye-elementi (Isusa idatha egciniwe kusici se-DOM). Amathuluzi asebenzisa ukuthunyelwa (okudalwe kusetshenziswa inkethoselector ) awakwazi ukucekelwa phansi ngamanye ezintweni ezibangela inzalo .

tooltip.dispose()

vumela

Inikeza ithuluzi le-elementi ikhono lokuboniswa. Amathiphu amathuluzi anikwe amandla ngokuzenzakalela.

tooltip.enable()

khubaza

Isusa ikhono lethulithiphu yento ezoboniswa. Ithiphu yamathuluzi izokwazi ukuboniswa kuphela uma inikwe amandla kabusha.

tooltip.disable()

i-toggleVunyiwe

Iguqula ikhono lethulithiphu yento ukuthi iboniswe noma ifihlwe.

tooltip.toggleEnabled()

buyekeza

Ibuyekeza indawo yethulithiphu yento.

tooltip.update()

getInstance

Indlela emile ekuvumela ukuthi uthole isibonelo sethiphu yamathuluzi esihlotshaniswa nento ye-DOM

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

getOrCreateInstance

Indlela emile ekuvumela ukuthi uthole isibonelo sethiphu yamathuluzi esihlotshaniswa nento ye-DOM, noma udale entsha uma kwenzeka ingaqaliswanga

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

Imicimbi

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

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

tooltip.hide()