Iingcebiso

Isishwankathelo

Izinto omawuzazi xa usebenzisa iplagi yesixhobo se-tooltip:

• Iingcebiso zezixhobo zixhomekeke kwiqela lesithathu kwithala leencwadi lePopper ngokubekwa . Kufuneka ubandakanye i -popper.min.js phambi kwe-bootstrap.js okanye usebenzise bootstrap.bundle.min.js/ bootstrap.bundle.jsequlethe iPopper ukuze izixhobo zokusebenza zisebenze!
• Iingcebiso zezixhobo zingenile ngenxa yezizathu zokusebenza, ke kufuneka uziqalise ngokwakho .
• Iingcebiso zezixhobo ezinezihloko ezibude buziro aziboniswa.
• Cacisa container: 'body'ukunqanda unikezelo lweengxaki kumacandelo antsokothileyo (njengamaqela ethu egalelo, amaqela amaqhosha, njl.njl).
• Iingcebiso zokuqalisa kwizinto ezifihlakeleyo aziyi kusebenza.
• Iingcebiso zesixhobo .disabledokanye disabledizakhi kufuneka zivuswe kumbandela wokusonga.
• Xa iqaliswa ukusuka kwiihyperlink ezithatha imigca emininzi, iincam zesixhobo ziya kubekwa embindini. Sebenzisa white-space: nowrap;kwi yakho <a>ukunqanda lo kuziphatha.
• Iingcebiso mazifihlwe phambi kokuba izinto ezihambelanayo nazo zisuswe kwiDOM.
• Iingcebiso zesixhobo zinokuvuswa enkosi kwinto engaphakathi kwesithunzi se-DOM.

Unayo yonke loo nto? Kulungile, makhe sibone ukuba basebenza njani ngemizekelo ethile.

Umzekelo: Vumela iingcebiso zesixhobo kuyo yonke indawo

Enye indlela yokuqalisa zonke iingcebiso zesixhobo kwiphepha inokuba kukukhetha ngophawu lwazo data-bs-toggle:

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

Imizekelo

Hambisa ngaphezulu kwezi linki zingezantsi ukuze ubone iingcebiso zesixhobo:

Hambisa phezu kwamaqhosha angezantsi ukuze ubone izalathiso zezixhobo ezine: phezulu, ekunene, ezantsi, nasekhohlo. Izalathiso ziboniswa xa usebenzisa i-Bootstrap kwi-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>

Kwaye nge-HTML yesiko elongeziweyo:

<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

Izinto eziguquguqukayo

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

Ukusetyenziswa

Isixhobo se-plugin se-tooltip sivelisa umxholo kunye ne-markup kwimfuno, kwaye ngokungagqibekanga iindawo zeengcebiso zesixhobo emva kwento yazo yokuqalisa.

Qalisa ingcebiso yesixhobo ngeJavaScript:

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

IMarkup

Uphawu olufunekayo lwencam yesixhobo luphawu kuphela datakwaye titlekwisiqalelo se-HTML unqwenela ukuba nencam yesixhobo. Uphawu oluveliswayo lwencam yesixhobo lulula, nangona lufuna indawo (ngokungagqibekanga, toplumiselwe yiplagi).

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

Izinto ezikhubazekileyo

Izinto disabledezinophawu azisebenzi, nto leyo ethetha ukuba abasebenzisi abanakugxila, bashukume, okanye bacofe ukuze baqalise ingcebiso yesixhobo (okanye ipopover). Njengomsebenzi owenziweyo, uya kufuna ukuqalisa inqaku lesixhobo ukusuka kwisonga <div>okanye <span>, eyenziwe ngokufanelekileyo ikhibhodi-ijolise ekusebenziseni 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>

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-bs-, njengakwi data-bs-animation="". Qinisekisa ukuba utshintsha uhlobo lwetyala legama lokukhetha ukusuka kwikamela ukuya kwi-kebab-case xa udlula iinketho ngeempawu zedatha. Umzekelo, endaweni yokusebenzisa 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
  }
})

Iindlela

bonisa

Ityhila inqaku lesixhobo. Ibuyisela kumnxebi phambi kokuba incam yesixhobo iboniswe (okt phambi kokuba shown.bs.tooltipisiganeko senzeke). Oku kuthathwa ngokuba "yimanyuwali" yokuqalisa inqaku lesixhobo. Iingcebiso zezixhobo ezinezihloko ezibude buziro aziboniswa.

tooltip.show()

fihla

Ifihla incam yesixhobo. Ibuyisela kumnxeba phambi kokuba incam yesixhobo ifihliwe (okt phambi kokuba hidden.bs.tooltipisiganeko senzeke). Oku kuthathwa ngokuba "yimanyuwali" yokuqalisa inqaku lesixhobo.

tooltip.hide()

guqula

Itshintshela incam yesixhobo. Ibuyisela kumnxebi phambi kokuba incam yesixhobo iboniswe okanye ifihlwe (okt phambi kokuba isiganeko shown.bs.tooltipokanye hidden.bs.tooltipisiganeko senzeke). Oku kuthathwa ngokuba "yimanyuwali" yokuqalisa inqaku lesixhobo.

tooltip.toggle()

lahla

Ifihla kwaye itshabalalise isixhobo sesixhobo (Isusa idatha egciniweyo kwinto yeDOM). Iingcebiso zesixhobo ezisebenzisa unikezelo (ezenziwe ngokusetyenziswa kokhethoselector ) azinakutshatyalaliswa zizodwa kwiziqalelo zokubangela ukuvela .

tooltip.dispose()

yenza

Inika isixhobo sesixhobo sokukwazi ukuboniswa. Iingcebiso zesixhobo zenziwe ngokwendalo.

tooltip.enable()

khubaza

Isusa isakhono sesixhobo sesixhobo sokuboniswa. Ingcebiso yesixhobo iya kuboniswa kuphela ukuba yenziwe yasebenza kwakhona.

tooltip.disable()

toggleEnabled

Iguqula isakhono sesixhobo sesixhobo sokuboniswa okanye ukufihlwa.

tooltip.toggleEnabled()

hlaziya

Ihlaziya indawo yesixhobo sesixhobo.

tooltip.update()

getInstance

Indlela engatshintshiyo ekuvumela ukuba ufumane umzekelo wesixhobo esidityaniswe nesiqalelo seDOM

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

getOrCreateInstance

Indlela engatshintshiyo ekuvumela ukuba ufumane inqaku lesixhobo elinxulunyaniswa nento yeDOM, okanye wenze entsha ukuba ayiqalwanga.

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

Iziganeko

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

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

tooltip.hide()