Hla mus rau cov ntsiab lus tseem ceeb Hla mus rau docs navigation
in English

Cov lus qhia

Cov ntaub ntawv thiab cov piv txwv rau ntxiv cov kev cai Bootstrap cov lus qhia nrog CSS thiab JavaScript siv CSS3 rau cov duab thiab cov ntaub ntawv-bs-tus cwj pwm rau cov npe hauv zos.

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.
Los ntawm lub neej ntawd, cov khoom siv no siv cov khoom siv tshuaj tua kab mob, uas tshem tawm cov ntsiab lus HTML uas tsis tau tso cai. Saib cov tshuaj ntxuav tes hauv peb cov ntaub ntawv JavaScript kom paub meej ntxiv.
Cov nyhuv animation ntawm cov khoom siv no yog nyob ntawm cov prefers-reduced-motionlus nug xov xwm. Saib qhov txo qis ntawm peb cov ntaub ntawv nkag mus tau .

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:

Placeholder text kom pom ib co inline links nrog tooltips. Qhov no yog tam sim no tsuas yog muab tub lim, tsis muaj killer. Cov ntsiab lus muab tso rau ntawm no tsuas yog ua kom pom cov ntawv nyeem tiag . Thiab txhua yam uas tsuas yog muab rau koj ib lub tswv yim ntawm yuav ua li cas cov lus qhia yuav zoo thaum siv hauv lub ntiaj teb tiag tiag. Yog li cia siab tias tam sim no koj tau pom yuav ua li cas cov lus qhia ntawm kev sib txuas tuaj yeem ua haujlwm hauv kev xyaum, thaum koj siv lawv ntawm koj tus kheej qhov chaw lossis qhov project.

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)
Hlawv autothiabscroll

Tooltip txoj hauj lwm sim hloov pauv thaum lub thawv niam txiv muaj lossis overflow: autonyiam overflow: scrollpeb .table-responsive, tab sis tseem khaws cov thawj qhov chaw tso cai. Txhawm rau daws qhov no, teeb tsa qhov boundarykev xaiv (rau qhov hloov pauv hloov pauv siv qhov popperConfigkev xaiv) rau ib qho HTMLElement los hla tus nqi qub, 'clippingParents', xws li document.body:

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

Ua cov lus qhia ua haujlwm rau cov keyboard thiab cov neeg siv thev naus laus zis

Koj tsuas yog yuav tsum ntxiv cov lus qhia rau HTML cov ntsiab lus uas yog ib txwm siv keyboard-focusable thiab sib tham sib (xws li kev sib txuas lossis daim ntawv tswj). Txawm hais tias cov ntsiab lus HTML arbitrary (xws li <span>s) tuaj yeem ua kom pom tseeb los ntawm kev ntxiv tus tabindex="0"cwj pwm, qhov no yuav ntxiv qhov ua rau muaj kev ntxhov siab thiab tsis meej pem tab nres ntawm cov ntsiab lus tsis sib cuam tshuam rau cov neeg siv keyboard, thiab feem ntau cov cuab yeej pab tam sim no tsis tshaj tawm cov lus qhia hauv qhov xwm txheej no. Tsis tas li ntawd, tsis txhob cia siab ib leeg los hoverua qhov ua rau koj cov lus qhia, vim qhov no yuav ua rau koj cov lus qhia tsis tuaj yeem ua rau cov neeg siv cov keyboard.

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

Nco ntsoov tias yog vim li cas kev ruaj ntseg sanitize, sanitizeFn, thiab allowListcov kev xaiv tsis tuaj yeem muab siv cov ntaub ntawv tus cwj pwm.
Lub npe Hom Default Kev piav qhia
animation boolean true Siv CSS hloov pauv mus rau cov lus qhia
container hlua | element | cuav false

Appends lub tooltip rau ib lub caij tshwj xeeb. container: 'body'Piv txwv :. Qhov kev xaiv no muaj txiaj ntsig tshwj xeeb hauv qhov uas nws tso cai rau koj los tso cov lus qhia hauv qhov ntws ntawm cov ntaub ntawv nyob ze ntawm lub ntsiab lus tshwm sim - uas yuav tiv thaiv cov cuab yeej los ntawm ntab tawm ntawm qhov cuam tshuam thaum lub qhov rais hloov pauv.

delay tus lej | khoom 0

ncua kev qhia thiab zais cov lus qhia (ms) - tsis siv rau phau ntawv txhais hom

Yog tias muaj tus lej nkag, ncua sijhawm yog siv rau ob qho tib si zais / qhia

Object structure yog:delay: { "show": 500, "hide": 100 }

html boolean false

Tso cai HTML hauv cov lus qhia.

Yog tias muaj tseeb, HTML cim npe hauv cov lus qhia titleyuav raug muab tso rau hauv cov lus qhia. Yog tias tsis tseeb, innerTextcov cuab yeej yuav raug siv los ntxig cov ntsiab lus rau hauv DOM.

Siv cov ntawv nyeem yog tias koj txhawj xeeb txog XSS tawm tsam.

placement hlua | muaj nuj nqi 'top'

Yuav ua li cas tso lub cuab yeej - pib | saum | hauv qab | sab laug | txoj cai.
Thaum autotau teev tseg, nws yuav dynamically reorient lub tooltip.

Thaum muaj nuj nqi yog siv los txiav txim qhov kev tso kawm, nws raug hu nrog lub tooltip DOM node raws li nws thawj qhov kev sib cav thiab lub triggering ntsiab DOM node raws li nws thib ob. Cov thisntsiab lus tau teeb tsa rau qhov piv txwv tooltip.

selector hlua | cuav false Yog hais tias muaj ib tug selector, tooltip khoom yuav delegated mus rau lub hom phiaj teev. Hauv kev xyaum, qhov no yog siv los kuj siv cov lus qhia rau dynamically ntxiv DOM ntsiab ( jQuery.onkev txhawb nqa). Saib qhov no thiab ib qho piv txwv qhia .
template txoj hlua '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML siv thaum tsim cov lus qhia.

Cov cuab yeej cuab tam titleyuav raug txhaj rau hauv .tooltip-inner.

.tooltip-arrowyuav ua tus tooltip xub xub.

Cov txheej txheem wrapper sab nraud yuav tsum muaj cov .tooltipchav kawm thiab role="tooltip".

title hlua | element | muaj nuj nqi ''

Default title value yog titleattribute tsis nyob.

Yog tias muaj kev ua haujlwm tau muab, nws yuav raug hu nrog nws cov thisntaub ntawv siv rau lub caij uas cov lus qhia txuas nrog.

trigger txoj hlua 'hover focus'

Yuav ua li cas tooltip yog triggered - nyem | hover | tsom | phau ntawv. Koj tuaj yeem hla ntau qhov ua rau; cais lawv nrog ib qho chaw.

'manual'qhia tau hais tias cov lus qhia yuav tau ua rau programmatically ntawm cov .show(), .hide()thiab .toggle()cov txheej txheem; tus nqi no tsis tuaj yeem ua ke nrog lwm qhov kev cuam tshuam.

'hover'ntawm nws tus kheej yuav ua rau cov lus qhia uas tsis tuaj yeem tshwm sim ntawm cov keyboard, thiab tsuas yog yuav tsum tau siv yog tias lwm txoj hauv kev rau kev xa cov ntaub ntawv tib yam rau cov neeg siv keyboard tam sim no.

fallbackPlacements array ['top', 'right', 'bottom', 'left'] Txheeb xyuas qhov chaw rov qab los ntawm kev muab cov npe ntawm qhov chaw nyob hauv array (hauv kev txiav txim siab). Yog xav paub ntxiv mus saib Popper tus cwj pwm docs
boundary hlua | keeb 'clippingParents' Overflow txwv ciam teb ntawm cov lus qhia (tsuas yog siv rau Popper's PreventOverflow modifier). Los ntawm lub neej ntawd nws yog 'clippingParents'thiab tuaj yeem lees txais HTMLElement siv (ntawm JavaScript nkaus xwb). Yog xav paub ntxiv mus saib Popper's detectOverflow docs .
customClass hlua | muaj nuj nqi ''

Ntxiv cov chav kawm rau cov lus qhia thaum nws pom. Nco ntsoov tias cov chav kawm no yuav muab ntxiv ntxiv rau cov chav kawm uas tau teev tseg hauv cov qauv. Txhawm rau ntxiv ntau chav kawm, cais lawv nrog qhov chaw: 'class-1 class-2'.

Koj tuaj yeem dhau ib txoj haujlwm uas yuav tsum rov qab ib txoj hlua uas muaj cov npe hauv chav kawm ntxiv.

sanitize boolean true Qhib lossis kaw qhov kev huv huv. Yog tias qhib tau 'template'thiab 'title'cov kev xaiv yuav raug ntxuav. Saib cov tshuaj tua kab mob hauv peb cov ntaub ntawv JavaScript .
allowList khoom Default tus nqi Yam khoom uas muaj cov cwj pwm tso cai thiab cov cim npe
sanitizeFn null | muaj nuj nqi null Ntawm no koj tuaj yeem muab koj tus kheej ua haujlwm huv. Qhov no tuaj yeem pab tau yog tias koj xav siv lub tsev qiv ntawv tshwj xeeb los ua kom huv.
offset array | hlua | muaj nuj nqi [0, 0]

Offset ntawm tooltip txheeb ze rau nws lub hom phiaj. Koj tuaj yeem hla ib txoj hlua hauv cov ntaub ntawv tus cwj pwm nrog comma cais qhov tseem ceeb xws li:data-bs-offset="10,20"

Thaum muaj nuj nqi yog siv los txiav txim qhov offset, nws raug hu nrog ib yam khoom uas muaj cov popper qhov chaw, siv, thiab popper rects raws li nws thawj qhov kev sib cav. Lub triggering element DOM node tau dhau los ua qhov kev sib cav thib ob. Cov haujlwm yuav tsum xa rov qab ib qho array nrog ob tus lej: .[skidding, distance]

Yog xav paub ntxiv mus saib Popper's offset docs .

popperConfig null | khoom | muaj nuj nqi null

Txhawm rau hloov Bootstrap's default Popper config, saib Popper's configuration .

Thaum muaj nuj nqi siv los tsim Popper teeb tsa, nws tau hu nrog ib qho khoom uas muaj Bootstrap's default Popper configuration. Nws pab koj siv thiab ua ke lub neej ntawd nrog koj tus kheej configuration. Cov haujlwm yuav tsum xa rov qab cov khoom teeb tsa rau Popper.

Cov ntaub ntawv tus cwj pwm rau tus kheej cov lus qhia

Cov kev xaiv rau tus kheej cov lus qhia tuaj yeem hloov pauv tau los ntawm kev siv cov ntaub ntawv cwj pwm, raws li tau piav qhia saum toj no.

Siv ua haujlwm nrogpopperConfig

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

Cov txheej txheem

Asynchronous txoj kev thiab kev hloov

Txhua txoj kev API yog asynchronous thiab pib hloov pauv . Lawv rov qab mus rau tus neeg hu xov tooj sai li sai tau thaum qhov kev hloov pauv pib tab sis ua ntej nws xaus . Tsis tas li ntawd, ib txoj kev hu rau ib qho kev hloov pauv yuav raug tsis quav ntsej .

Saib peb cov ntaub ntawv JavaScript kom paub ntau ntxiv .

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

Hom xwm txheej Kev piav qhia
show.bs.tooltip Qhov xwm txheej no tua hluav taws tam sim ntawd thaum showhu ua piv txwv.
shown.bs.tooltip Qhov kev tshwm sim no raug rho tawm haujlwm thaum cov lus qhia tau ua kom pom rau tus neeg siv (yuav tos rau CSS kev hloov pauv kom tiav).
hide.bs.tooltip Qhov xwm txheej no raug rho tawm haujlwm tam sim ntawd thaum hidehu ua piv txwv txoj kev.
hidden.bs.tooltip Qhov kev tshwm sim no raug rho tawm haujlwm thaum cov lus qhia tau ua tiav tau muab zais los ntawm tus neeg siv (yuav tos rau CSS kev hloov pauv kom tiav).
inserted.bs.tooltip Qhov kev tshwm sim no raug rho tawm haujlwm tom qab qhov show.bs.tooltiptshwm sim thaum lub cuab yeej template tau ntxiv rau DOM.
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()