Switsundzuxo swa Switirhisiwa

Nkatsakanyo

Swilo leswi u faneleke u swi tiva loko u tirhisa xiengetelo xa xitirhisiwa:

• Switirhisiwa swi titshege hi layiburari ya munhu wa vunharhu Popper eka xiyimo. U fanele ku katsa popper.min.js emahlweni ka bootstrap.js, kutani u tirhisa bootstrap.bundle.min.jsleyi nga na Popper.
• Switsundzuxo swa switirhisiwa i ku hlawula ku nghena hikwalaho ka swivangelo swa matirhelo, hikwalaho u fanele ku swi sungula hi wexe .
• Switsundzuxo swa switirhisiwa leswi nga ni swihloko swa ku leha ka zero a swi si tshama swi kombisiwa.
• Boxa container: 'body'ku papalata swiphiqo swa ku hundzuluxela eka swiphemu leswi rharhanganeke swinene (ku fana na mintlawa ya hina ya ku nghenisa, mintlawa ya swikomba-nkarhi, na swin’wana).
• Ku hlohlotela switsundzuxo eka swiaki leswi fihliweke a swi nge tirhi.
• Switsundzuxo swa switirhisiwa swa .disabledkumbe disabledswiaki swi fanele ku pfuriwa eka elemente ya xifunengeto.
• Loko yi pfuriwa ku suka eka ti-hyperlink leti hlanganisaka milayeni yo tala, switsundzuxo swa switirhisiwa swi ta va swi ri exikarhi. Tirhisa white-space: nowrap;eka s ya wena <a>ku papalata mahanyelo lawa.
• Switsundzuxo swa switirhisiwa swi fanele ku fihliwa swiaki swa swona leswi fambelanaka swi nga si susiwa eka DOM.
• Switirhisiwa swi nga pfuriwa hi ku khensa elemente endzeni ka DOM ya ndzhuti.

Xana u na swona hinkwaswo sweswo? Great, a hi voneni ndlela leyi va tirhaka ha yona hi swikombiso swin’wana.

Swikombiso

Endla leswaku switsundzuxo swa switirhisiwa swi tirha

Hilaha swi boxiweke hakona laha henhla, u fanele ku sungula switsundzuxo swa switirhisiwa swi nga si tirhisiwa. Ndlela yin’wana yo sungula switsundzuxo hinkwaswo swa switirhisiwa eka tluka ku nga va ku swi hlawula hi data-bs-togglexihlawulekisi xa swona, ku fana na sweswo:

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

Switsundzuxo swa switirhisiwa eka swihlanganisi

Hover ehenhla ka swihlanganisi leswi nga laha hansi ku vona switsundzuxo swa switirhisiwa:

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

Switsundzuxo swa switirhisiwa swa ntolovelo

U nga cinca ku languteka ka switsundzuxo swa switirhisiwa hi ku tirhisa swilo leswi cinca-cincaka swa CSS . Hi veka tlilasi ya ntolovelo na data-bs-custom-class="custom-tooltip"ku scope xivumbeko xa hina xa ntolovelo ivi hi yi tirhisa ku tlula xihlawulekisi xa CSS xa laha kaya.

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

Swiletelo

Hover ehenhla ka swikomba-nkarhi leswi nga laha hansi leswaku u vona swiletelo swa mune swa switsundzuxo swa switirhisiwa: ehenhla, exineneni, ehansi ni le ximatsi. Swiletelo swi kombisiwa hi xivoni loko u tirhisa Bootstrap eka 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>

Naswona hi HTML ya ntolovelo leyi engeteriweke:

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

Hi SVG: .

CSS

Swilo leswi cinca-cincaka

Tanihi xiphemu xa endlelo ra Bootstrap leri cincaka ra swilo leswi cinca-cincaka swa CSS, switsundzuxo swa switirhisiwa sweswi swi tirhisa swilo leswi cinca-cincaka swa CSS swa laha kaya on .tooltipfor enhanced real-time customization. Mimpimo ya swilo leswi cinca-cincaka swa CSS yi vekiwile hi ku tirhisa Sass, kutani ku cinca ka Sass ka ha seketeriwa, na kona.

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

Sass swilo leswi cinca-cincaka

$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

Matirhiselo

Plugin ya xitsundzuxo xa switirhisiwa yi humesa nhundzu na ku fungha hi ku landza xilaveko, naswona hi ku tiyimisela yi veka switsundzuxo endzhaku ka elemente ya swona ya xihlohloteri.

Pfuxeta xitsundzuxo xa xitirhisiwa hi ku tirhisa 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')
})

Ku fungha swilo

Ximaki lexi lavekaka xa xitsundzuxo xa xitirhisiwa i dataxihlawulekisi ntsena naswona titleeka elemente ya HTML u navela ku va na xitsundzuxo xa xitirhisiwa. Ku fungha loku endliweke ka xitsundzuxo xa xitirhisiwa ku olovile swinene, hambi leswi ku lavaka xiyimo (hi ku tiyimisela, ku vekiwile eka tophi xiengetelo).

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

Swiaki leswi lamaleke

Swiaki leswi nga na disabledxihlawulekisi a swi tirhisani, leswi vulaka leswaku vatirhisi a va nge swi koti ku kongomisa, ku hover, kumbe ku swi tsindziyela ku pfuxa xitirhisiwa (kumbe popover). Tanihi ndlela yo tshungula, u ta lava ku pfuxa xitsundzuxo xa xitirhisiwa ku suka eka xifunengeto <div>kumbe <span>, hi ndlela leyinene yi endliwe leswaku yi kongomisiwa eka khibhodi hi ku tirhisa 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>

Swihlawulekisi

Tanihi leswi swihlawulekisi swi nga hundziseriwaka hi ku tirhisa swihlawulekisi swa data kumbe JavaScript, u ​​nga engetela vito ra xihlawulekisi eka data-bs-, tanihi le ka data-bs-animation="{value}". Tiyisisa leswaku u cinca muxaka wa xiyimo xa vito ra xihlawulekisi ku suka eka “ camelCase ” ku ya eka “ kebab-case ” loko u hundzisa swihlawulekisi hi ku tirhisa swihlawulekisi swa data. Hi xikombiso, tirhisa data-bs-custom-class="beautifier"ematshan’weni ya data-bs-customClass="beautifier".

Ku sukela eka Bootstrap 5.2.0, swiphemu hinkwaswo swi seketela xihlawulekisi xa datha leyi hlayisiweke ya xikambelodata-bs-config lexi nga vekaka vukorhokeri byo olova bya xiphemu tanihi ntambhu ya JSON. Loko elemente yi ri data-bs-config='{"delay":0, "title":123}'na na data-bs-title="456"swihlawulekisi, titlentikelo wo hetelela wu ta va 456naswona swihlawulekisi swa datha leswi hambaneke swi ta tlula mimpimo leyi nyikiweke eka data-bs-config. Ku engetela kwalaho, swihlawulekisi swa datha leswi nga kona swi kota ku veka mimpimo ya JSON ku fana na data-bs-delay='{"show":0,"hide":150}'.

Ku tirhisa ntirho napopperConfig

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

Maendlelo

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

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

Swiendlakalo

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

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

tooltip.hide()