Cov lus qhia

Txheej txheem cej luam

Tej yam yuav tsum paub thaum siv tooltip plugin:

• Tooltips cia siab rau 3rd tog tsev qiv ntawv Popper rau qhov chaw. Koj yuav tsum suav nrog popper.min.js ua ntej bootstrap.js lossis siv bootstrap.bundle.min.js/ bootstrap.bundle.jsuas muaj Popper txhawm rau txhawm rau cov lus qhia ua haujlwm!
• 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 txog txhua qhov chaw

Ib txoj hauv kev los pib tag nrho cov lus qhia ntawm nplooj ntawv yuav yog xaiv lawv los ntawm lawv data-bs-toggletus cwj pwm:

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

Piv txwv

Hover tshaj qhov txuas hauv qab no kom pom 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" 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>

Thiab nrog kev cai HTML ntxiv:

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

Nrog SVG:

Sass

Hloov pauv

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

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:

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

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

Kev xaiv

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

Siv ua haujlwm nrogpopperConfig

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

Cov txheej txheem

ua yeeb yam

Qhia ib lub ntsiab lus qhia. Rov qab mus rau tus neeg hu ua ntej cov lus qhia tau tshwm sim tiag tiag (piv txwv li ua ntej qhov shown.bs.tooltipxwm txheej tshwm sim). Qhov no suav hais tias yog "kev tuav tes" ua rau cov lus qhia. Cov lus qhia nrog xoom-ntev lub npe yeej tsis tshwm sim.

tooltip.show()

zais

Hide ib lub ntsiab lus qhia. Rov qab mus rau tus neeg hu ua ntej cov lus qhia tau muab zais tiag tiag (piv txwv li ua ntej qhov hidden.bs.tooltipxwm txheej tshwm sim). Qhov no suav hais tias yog "kev tuav tes" ua rau cov lus qhia.

tooltip.hide()

toggle

Toggles ib lub ntsiab lus qhia. Rov qab mus rau tus neeg hu ua ntej cov lus qhia tau tshwm sim los yog muab zais (piv txwv li ua ntej qhov shown.bs.tooltipkev hidden.bs.tooltiptshwm sim tshwm sim). Qhov no suav hais tias yog "kev tuav tes" ua rau cov lus qhia.

tooltip.toggle()

pov tseg

Nkaum thiab rhuav tshem cov ntsiab lus cov cuab yeej (Tshem tawm cov ntaub ntawv khaws cia ntawm DOM lub caij). Cov lus qhia uas siv delegation (uas yog tsim los ntawm selectorkev xaiv ) tsis tuaj yeem raug rhuav tshem ib tus zuj zus ntawm cov xeeb leej xeeb ntxwv.

tooltip.dispose()

pab

Muab ib lub ntsiab lus qhia lub peev xwm los qhia. Cov lus qhia tau qhib los ntawm lub neej ntawd.

tooltip.enable()

lov tes taw

Tshem tawm lub peev xwm rau lub ntsiab lus qhia kom pom. Cov lus qhia yuav tsuas tuaj yeem pom yog tias nws rov qhib dua.

tooltip.disable()

toggleEnabled

Toggles lub peev xwm rau lub ntsiab lus qhia kom pom lossis zais.

tooltip.toggleEnabled()

hloov tshiab

Hloov kho txoj haujlwm ntawm lub ntsiab lus qhia.

tooltip.update()

getInstance

Txoj kev zoo li qub uas tso cai rau koj kom tau txais cov lus qhia piv txwv cuam tshuam nrog DOM lub caij

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

getOrCreateInstance

Txoj kev zoo li qub uas tso cai rau koj kom tau txais cov lus qhia piv txwv cuam tshuam nrog DOM lub caij, lossis tsim ib qho tshiab yog tias nws tsis tau pib

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

Cov xwm txheej

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

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

tooltip.hide()