Cov lus qhia

Txheej txheem cej luam

Tej yam yuav tsum paub thaum siv tooltip plugin:

• Tooltips cia siab rau lub tsev qiv ntawv thib peb Popper rau qhov chaw. Koj yuav tsum suav nrog popper.min.js ua ntej bootstrap.js, lossis siv ib qho bootstrap.bundle.min.jsuas muaj Popper.
• Tooltips yog opt-in rau kev ua tau zoo vim li cas, yog li koj yuav tsum pib lawv tus kheej .
• Cov lus qhia nrog xoom-ntev lub npe yeej tsis tshwm sim.
• Qhia container: 'body'kom tsis txhob muaj teeb meem nyob rau hauv cov khoom siv ntau dua (xws li peb cov tswv yim pab pawg, pawg khawm, thiab lwm yam).
• Tig cov lus qhia ntawm cov ntsiab lus zais yuav tsis ua haujlwm.
• Cov lus qhia rau .disabledlossis disabledcov ntsiab lus yuav tsum tau ua rau ntawm cov khoom siv wrapper.
• Thaum tshwm sim los ntawm hyperlinks uas hla ntau kab, cov lus qhia yuav yog qhov nruab nrab. Siv white-space: nowrap;koj <a>tus kheej kom tsis txhob muaj tus cwj pwm no.
• Cov lus qhia yuav tsum tau muab zais ua ntej lawv cov ntsiab lus sib raug tau raug tshem tawm ntawm DOM.
• Cov lus qhia tuaj yeem tshwm sim ua tsaug rau ib qho hauv ib qho duab ntxoov ntxoo DOM.

Tau txais tag nrho cov ntawd? Zoo heev, cia saib seb lawv ua haujlwm li cas nrog qee qhov piv txwv.

Piv txwv

Qhib cov lus qhia

Raws li tau hais los saum no, koj yuav tsum pib pib cov lus qhia ua ntej lawv tuaj yeem siv tau. Ib txoj hauv kev los pib tag nrho cov lus qhia ntawm nplooj ntawv yuav yog xaiv lawv los ntawm lawv cov data-bs-togglecwj pwm, xws li:

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

Cov lus qhia ntawm qhov txuas

Hover tshaj qhov txuas hauv qab no kom pom cov lus qhia:

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

Cov lus qhia kev cai

Koj tuaj yeem kho qhov pom ntawm cov lus qhia siv CSS hloov pauv . Peb tau teeb tsa chav kawm kev cai nrog data-bs-custom-class="custom-tooltip"kom muaj peev xwm ua tau raws li peb qhov kev cai thiab siv nws los hla lub zos CSS kuj sib txawv.

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

Cov lus qhia

Hover dhau cov nyees khawm hauv qab no kom pom plaub lub tswv yim qhia: sab saum toj, sab xis, hauv qab, thiab sab laug. Cov lus qhia tau mirrored thaum siv Bootstrap hauv 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>

Thiab nrog kev cai HTML ntxiv:

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

Nrog SVG:

CSS

Hloov pauv

Raws li ib feem ntawm Bootstrap's evolving CSS variables mus kom ze, tooltips tam sim no siv lub zos CSS variables .tooltiprau txhim kho lub sij hawm customization. Cov txiaj ntsig rau CSS qhov sib txawv tau teeb tsa ntawm Sass, yog li Sass customization tseem txhawb nqa, ib yam nkaus.

  --#{$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 variables

$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

Kev siv

Lub tooltip plugin tsim cov ntsiab lus thiab kos npe rau ntawm qhov kev thov, thiab los ntawm lub neej ntawd tso cov lus qhia tom qab lawv lub ntsiab lus.

Tig lub cuab yeej ntawm 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')
})

Markup

Qhov yuav tsum tau kos npe rau cov lus qhia tsuas yog tus datacwj pwm thiab titlentawm HTML lub caij koj xav kom muaj cov lus qhia. Lub generated markup ntawm ib tug tooltip yog qhov yooj yim, tab sis nws yuav tsum tau ib txoj hauj lwm (los ntawm lub neej ntawd, teem los topntawm lub 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>

Cov neeg xiam oob qhab

Cov ntsiab lus nrog tus disabledcwj pwm tsis sib cuam tshuam, txhais tau tias cov neeg siv tsis tuaj yeem tsom, txav mus los, lossis nyem rau lawv kom ua rau cov lus qhia (lossis popover). Raws li kev daws teeb meem, koj yuav xav ua kom cov lus qhia los ntawm lub wrapper <div>los yog <span>, qhov zoo tshaj plaws ua keyboard-focusable siv 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>

Kev xaiv

Raws li kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript, koj tuaj yeem ntxiv ib qho kev xaiv npe rau data-bs-, xws li hauv data-bs-animation="{value}". Nco ntsoov hloov cov ntaub ntawv ntawm lub npe xaiv los ntawm " camelCase " mus rau " kebab-case " thaum dhau cov kev xaiv ntawm cov ntaub ntawv cwj pwm. Piv txwv li, siv data-bs-custom-class="beautifier"es tsis txhob data-bs-customClass="beautifier".

Raws li ntawm Bootstrap 5.2.0, tag nrho cov khoom txhawb nqa qhov kev sim khaws tseg cov ntaub ntawv tus cwj pwm data-bs-configuas tuaj yeem ua tsev yooj yim kev teeb tsa raws li JSON txoj hlua. Thaum ib qho khoom muaj data-bs-config='{"delay":0, "title":123}'thiab data-bs-title="456"tus cwj pwm, tus titlenqi kawg yuav yog 456thiab cov ntaub ntawv sib cais yuav dhau los ntawm cov txiaj ntsig tau muab rau data-bs-config. Ntxiv mus, cov ntaub ntawv uas twb muaj lawm muaj peev xwm ua tsev JSON qhov tseem ceeb xws li data-bs-delay='{"show":0,"hide":150}'.

Siv ua haujlwm nrogpopperConfig

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

Cov txheej txheem

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

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

Cov xwm txheej

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

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

tooltip.hide()