Iingcebiso

Isishwankathelo

Izinto omawuzazi xa usebenzisa iplagi yesixhobo se-tooltip:

• Iingcebiso zezixhobo zixhomekeke kwithala leencwadi lesithathu iPopper ngokubekwa . Kufuneka ubandakanye popper.min.js phambi bootstrap.js, okanye usebenzise enye bootstrap.bundle.min.jsenePopper.
• 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 kuphawu lokusonga.
• Xa iqaliswa ukusuka kwiihyperlink ezithatha imigca emininzi, iincam zesixhobo ziya kugxilwa. Sebenzisa white-space: nowrap;kwi yakho <a>ukunqanda le ukuziphatha.
• Iingcebiso kufuneka zifihlwe phambi kokuba izinto ezihambelanayo nazo zisuswe kwiDOM.
• Iingcebiso zesixhobo zinokuqhutywa enkosi kwinto engaphakathi kwesithunzi se-DOM.

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

Imizekelo

Vula iingcebiso zesixhobo

Njengoko kukhankanyiwe ngasentla, kufuneka uqalise iingcebiso zesixhobo ngaphambi kokuba zisetyenziswe. Enye indlela yokuqalisa zonke iingcebiso zesixhobo kwiphepha inokuba kukukhetha ngophawu lwazo data-bs-toggle, ngolu hlobo:

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

Iingcebiso kwikhonkco

Hambisa ngaphezulu kwezi linki zingezantsi ukuze ubone iingcebiso zesixhobo:

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

Iingcebiso zezixhobo ezilungiselelweyo

Unokwenza inkangeleko yeengcebiso zesixhobo usebenzisa iCSS variables . Siseta iklasi yesiko data-bs-custom-class="custom-tooltip"ukuze sijonge inkangeleko yethu yesiko kwaye siyisebenzise ukodlula ukuguquguquka kweCSS yendawo.

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

Izalathiso

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

Kwaye nge-HTML yesiko elongeziweyo:

<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

Izinto eziguquguqukayo

Njengenxalenye yendlela yokuguquguquka kwe-Bootstrap ye-CSS, iingcebiso zesixhobo ngoku zisebenzisa izinto eziguquguqukayo ze-CSS zasekhaya .tooltipukuze kuphuculwe ukwenziwa ngokwezifiso kwexesha lokwenyani. Amaxabiso okuguquguquka kweCSS asetwe ngeSass, ngoko ke ukwenziwa ngokwezifiso kweSass kusaxhaswa, nako.

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

Iinguqu zeSass

$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

Ukusetyenziswa

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

Qalisa ingcebiso yesixhobo ngeJavaScript:

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

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

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 i-keyboard-ijolise ekusebenziseni 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>

Iinketho

Njengoko iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript, unokongeza igama lokhetho ku data-bs-, njengakwi data-bs-animation="{value}". Qinisekisa ukuba utshintshe uhlobo lwecala legama lokukhetha ukusuka kwi " camelCase " ukuya kwi " kebab-case " xa udlula iinketho ngeempawu zedatha. Umzekelo, sebenzisa data-bs-custom-class="beautifier"endaweni ye- data-bs-customClass="beautifier".

Ukusukela kwi-Bootstrap 5.2.0, onke amacandelo axhasa umlinganiso wedatha ogciniweyo wovavanyodata-bs-config onokubeka uqwalaselo lwecandelo olulula njengomtya we-JSON. Xa into ineempawu data-bs-config='{"delay":0, "title":123}'kunye data-bs-title="456"neempawu, ixabiso lokugqibela titleliya kuba 456kunye neempawu zedatha eyahlukileyo ziya kuwenza ngaphezulu amaxabiso anikiweyo data-bs-config. Ukongeza, iimpawu zedatha ezikhoyo ziyakwazi ukubeka ixabiso le-JSON njenge data-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
  }
})

Iindlela

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

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

Iziganeko

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

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

tooltip.hide()