Mafere na isi ọdịnaya Gaa na ntugharị docs
in English

Ntuziaka ngwaọrụ

Akwụkwọ na ihe atụ maka ịgbakwunye ngwa ngwa Bootstrap omenala na CSS na JavaScript iji CSS3 maka animation na data-bs-agwa maka nchekwa aha mpaghara.

Nchịkọta

Ihe ị ga-amata mgbe ị na-eji ngwa mgbakwunye Tooltip:

  • Ntuziaka ngwaọrụ dabere na ọba akwụkwọ ndị otu nke atọ Popper maka itinye ya. Ị ga-agụnye popper.min.js tupu bootstrap.js ma ọ bụ jiri bootstrap.bundle.min.js/ bootstrap.bundle.jsnke nwere Popper iji mee ka ndụmọdụ ọrụ rụọ ọrụ!
  • A na-abanye na ntuziaka ngwaọrụ maka ebumnuche arụmọrụ, yabụ ị ga-ebido ya n'onwe gị .
  • Agaghị egosipụta ndụmọdụ ndụmọdụ nwere aha ogologo efu.
  • Ezipụta container: 'body'ka ịzenarị nsogbu n'ime ihe ndị dị mgbagwoju anya (dị ka otu ntinye anyị, otu bọtịnụ, wdg).
  • Ndụmọdụ akụrụngwa na-akpalite na ihe zoro ezo agaghị arụ ọrụ.
  • A ghaghị ịkpalite ndụmọdụ maka .disabledma ọ bụ disabledihe n'ime ihe mkpuchi.
  • Mgbe a kpalitere site na hyperlinks na-agbatị ọtụtụ ahịrị, ndụmọdụ ngwaọrụ ga-adị n'etiti. Jiri white-space: nowrap;na <a>s gị zere omume a.
  • A ghaghị izobe ndụmọdụ ngwaọrụ tupu ewepụrụ ihe ndị kwekọrọ na DOM.
  • Enwere ike ịkpalite ndụmọdụ ngwaọrụ site na mmewere dị n'ime onyinyo DOM.
Site na ndabara, akụrụngwa a na-eji ihe nchacha ọdịnaya arụnyere arụnyere, nke na-ewepụ ihe HTML ọ bụla anaghị anabata nke ọma. Hụ ngalaba sanitizer na akwụkwọ Javascript anyị maka nkọwa ndị ọzọ.
Mmetụta animation nke akụrụngwa a dabere na prefers-reduced-motionajụjụ mgbasa ozi. Hụ akụkụ ngagharị ewelatala nke akwụkwọ nnweta anyị .

Enwetara ihe ahụ niile? Ọ dị mma, ka anyị hụ ka ha si arụ ọrụ na ihe atụ ụfọdụ.

Ọmụmaatụ: Kwado ndụmọdụ ngwaọrụ ebe niile

Otu ụzọ isi bido ndụmọdụ ngwaọrụ niile na ibe ga-abụ ịhọrọ ha site na data-bs-togglenjirimara ha:

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

Ihe atụ

Gaa na njikọ dị n'okpuru ka ịhụ ndụmọdụ ndụmọdụ:

Ederede ebe nchekwa iji gosi ụfọdụ njikọ dị n'ahịrị nwere ndụmọdụ ngwaọrụ . Nke a bụ naanị ihe na-ejuputa, ọ dịghị egbu egbu. Edere ọdịnaya ebe a naanị iji ṅomie ọnụnọ nke ezigbo ederede . Na ihe niile naanị iji nye gị echiche otu ndụmọdụ ngwaọrụ ga-adị mgbe ejiri ya na ọnọdụ ụwa. Ya mere enwere olile anya na ị hụla ka ndụmọdụ ndụmọdụ ndị a dị na njikọ nwere ike isi rụọ ọrụ na omume, ozugbo i jiri ha na saịtị ma ọ bụ ọrụ gị.

Figharịa n'elu bọtịnụ dị n'okpuru ka ịhụ ntụzịaka ngwa ọrụ anọ: elu, aka nri, ala na aka ekpe. A na-egosipụta ntụzịaka mgbe ị na-eji Bootstrap na 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>

Na agbakwunyere HTML omenala:

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

Site na SVG:

Sass

Mgbanwe

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

Ojiji

Ngwa mgbakwunye Tooltip na-ewepụta ọdịnaya na akara n'ọchịchọ, yana site na ndabara na-etinye ndụmọdụ ngwaọrụ mgbe ihe mkpalite ha gasịrị.

Kpalite ntụnye aka site na Javascript:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
Ijubiga ókè autonascroll

Ọnọdụ Tooltip na-anwa ịgbanwe na-akpaghị aka mgbe akpa nne na nna nwere overflow: automa ọ bụ nwee overflow: scrollmmasị na nke anyị .table-responsive, mana ka na-edobe n'ọnọdụ mbụ. Iji dozie nke a, tọọ boundarynhọrọ (maka ihe ntụgharị ntụgharị site na iji popperConfignhọrọ) na HTMLElement ọ bụla iji mebie uru ndabara, 'clippingParents', dị ka document.body:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

Akara akara

Ihe nrịbama achọrọ maka ngwa ọrụ bụ naanị njiri mara datayana titlena mmewere HTML ịchọrọ ịnwe ntụnye aka. Ihe nrịbama emepụtara nke ngwa ọrụ dị mfe, n'agbanyeghị na ọ chọrọ ọnọdụ (site na ndabara, topnke ngwa mgbakwunye setịpụrụ).

Ime ka ndụmọdụ ngwaọrụ rụọ ọrụ maka ahụigodo yana ndị ọrụ teknụzụ enyemaka

Ị ga-agbakwunye naanị ndụmọdụ ngwaọrụ na ihe HTML bụ omenala keyboard-lekwado anya na mmekọrịta (dị ka njikọ ma ọ bụ njikwa ụdị). Ọ bụ ezie na ihe HTML aka ike (dị ka <span>s) nwere ike ime ka a na-elekwasị anya site n'ịgbakwunye tabindex="0"àgwà ahụ, nke a ga-agbakwunye nkwụsị nke nwere ike iwe iwe na mgbagwoju anya na ihe ndị na-adịghị emekọrịta ihe maka ndị ọrụ keyboard, na ọtụtụ teknụzụ enyemaka anaghị ekwupụta ngwa ọrụ n'ọnọdụ a. Na mgbakwunye, adaberela naanị dị hoverka ihe na-akpalite ntụpọ ngwaọrụ gị, n'ihi na nke a ga-eme ka ndụmọdụ ngwaọrụ gị ghara ịmalite ndị na-eji 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>

Ihe ndị nwere nkwarụ

Ihe ndị nwere disablednjirimara ahụ anaghị emekọrịta ihe, nke pụtara na ndị ọrụ enweghị ike ilekwasị anya, tugharịa, ma ọ bụ pịa ha ka ha kpalite nghazi ngwaọrụ (ma ọ bụ popover). Dị ka ebe a na-arụ ọrụ, ị ga-achọ ịkpalite ngwa ọrụ site na ihe mkpuchi <div>ma ọ bụ <span>, nke emebere nke ọma na ahụigodo-elekwasị anya site na iji 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>

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-bs-, dị ka ọ dị na data-bs-animation="". Gbaa mbọ hụ na ị gbanwee ụdị ikpe nke aha nhọrọ site na camelCase gaa na kebab-case mgbe ị na-agafe nhọrọ site na njirimara data. Dịka ọmụmaatụ, kama iji data-bs-customClass="beautifier", jiri data-bs-custom-class="beautifier".

Rịba ama na maka nchekwa , enweghị ike ịnye sanitize, sanitizeFn, na nhọrọ site na iji njirimara data.allowList
Aha Ụdị Ọdabara Nkọwa
animation boolean true Tinye mgbanwe CSS na-agwụ n'isi ngwaọrụ
container eriri | mmewere | ụgha false

Na-agbakwunye ntụnye aka na otu mmewere. Ọmụmaatụ container: 'body':. Nhọrọ a bara uru karịsịa n'ihi na ọ na-enye gị ohere idobe ngwá ọrụ ahụ na ntinye nke akwụkwọ ahụ dị nso na ihe na-akpali akpali - nke ga-egbochi ngwá ọrụ ahụ ka ọ na-ese n'elu ihe na-akpali akpali n'oge ntụgharị windo.

delay nọmba | ihe 0

Ngosipụta na izochi ngwa ọrụ (ms) - anaghị emetụta ụdị mkpalite aka

Ọ bụrụ na ewepụtara nọmba, a na-etinye igbu oge na ma zoo/egosi

Nhazi ihe bụ:delay: { "show": 500, "hide": 100 }

html boolean false

Kwe ka HTML banye n'ọnụ ngwaọrụ.

Ọ bụrụ na ọ bụ eziokwu, mkpado HTML dị na Tooltip's titleka a ga-atụgharị n'akwụkwọ ntuziaka. Ọ bụrụ ụgha, innerTexta ga-eji ihe onwunwe tinye ọdịnaya n'ime DOM.

Jiri ederede ma ọ bụrụ na ị na-echegbu onwe gị maka mwakpo XSS.

placement eriri | ọrụ 'top'

Otu esi edobe ngwa ọrụ - akpaaka | n'elu | ala | aka ekpe | nri.
Mgbe autoakọwapụtara ya, ọ ga-emegharị atụgharị ngwa ngwa.

Mgbe a na-eji ọrụ iji chọpụta ntinye, a na-akpọ ya na ngwá ọrụ DOM node dị ka arụmụka mbụ ya na ihe na-akpali akpali DOM node dị ka nke abụọ ya. A thisna-edozi ihe gbara ya gburugburu ka ọ bụrụ ihe atụ ntupụ aka.

selector eriri | ụgha false Ọ bụrụ na enyere onye nhọpụta, a ga-ekenye ihe nrịbama ngwaọrụ na ebumnuche ndị akọwapụtara. Na omume, a na-eji nke a tinyekwa ndụmọdụ ngwaọrụ na ihe DOM agbakwunyere ike ( jQuery.onnkwado). Hụ nke a na ihe atụ na-enye nkọwa .
template eriri '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML ka ị ga-eji mgbe ị na-eke ihe nrụtụ aka.

A titlega-agbaba ngwa ngwa n'ime .tooltip-inner.

.tooltip-arrowga-aghọ akụ nke Tooltip.

Ihe mkpuchi ihe kachasị elu kwesịrị inwe .tooltipklaasị na role="tooltip".

title eriri | mmewere | ọrụ ''

Uru aha ndabara ma ọ bụrụ titlena njirimara adịghị.

Ọ bụrụ na enyere ọrụ, a ga-akpọ ya na thisnrụtụ aka ya ka etinyere n'isi ngwaọrụ ahụ.

trigger eriri 'hover focus'

Olee otú Tooltip na-akpalite - pịa | hover | lekwasịrị anya | akwụkwọ ntuziaka. Ị nwere ike ịgafe ọtụtụ ihe mkpali; kewaa ha na oghere.

'manual'na-egosi na a ga-emelite ngwa ọrụ site na mmemme site na .show(), .hide()na .toggle()usoro; enweghị ike ijikọ ọnụ ahịa a na mkpalite ọ bụla ọzọ.

'hover'n'onwe ya ga-ebute ndụmọdụ ndị na-enweghị ike ịkpalite site na ahụigodo, ma ekwesịrị iji ya ma ọ bụrụ na ụzọ ọzọ maka ibufe otu ozi maka ndị ọrụ ahụigodo dị.

fallbackPlacements n'usoro ['top', 'right', 'bottom', 'left'] Kọwaa ebe ndaghachi azụ site n'inye ndepụta ntinye n'usoro (n'usoro masịrị gị). Maka ozi ndị ọzọ rụtụ aka na akwụkwọ omume Popper
boundary eriri | mmewere 'clippingParents' Oke oke mmachi oke nke ngwa ngwa (na-emetụta naanị Popper's preventOverflow modifier). Site na ndabara ọ 'clippingParents'nwere ike nabata ntụaka HTMLElement (site na Javascript naanị). Maka ozi ndị ọzọ rụtụ aka na docs detectOverflow nke Popper .
customClass eriri | ọrụ ''

Tinye klaasị na akuku ngwaọrụ mgbe egosiri ya. Rịba ama na a ga-agbakwunye klaasị ndị a na mgbakwunye na klaasị ọ bụla akọwapụtara na ndebiri. Ka ịgbakwunye ọtụtụ klaasị, kewaa ha na oghere: 'class-1 class-2'.

Ị nwekwara ike ịgafe ọrụ kwesịrị iweghachi otu eriri nwere aha klaasị agbakwunyere.

sanitize boolean true Kwado ma ọ bụ gbanyụọ nhichapụ ahụ. Ọ bụrụ na agbanyere 'template'ya, 'title'a ga-ehichapụ nhọrọ. Hụ ngalaba sanitizer na akwụkwọ Javascript anyị .
allowList ihe Uru ndabara Ihe nke nwere njirimara na mkpado ekwenyere
sanitizeFn efu | ọrụ null N'ebe a, ị nwere ike ịnye ọrụ ịdị ọcha nke gị. Nke a nwere ike ịba uru ma ọ bụrụ na-amasị gị iji ọbá akwụkwọ raara onwe ya nye iji rụpụta ịdị ọcha.
offset n'usoro | eriri | ọrụ [0, 0]

Nkwụsị nke ngwa ọrụ n'ihe metụtara ebumnuche ya. Ị nwere ike ịnyefe eriri n'ime njirimara data yana ụkpụrụ kewapụrụ rịkọm dị ka:data-bs-offset="10,20"

Mgbe a na-eji ọrụ chọpụta nkwụghachi ụgwọ, a na-akpọ ya na ihe nwere ntinye popper, akwụkwọ ntụaka, na popper rects dị ka arụmụka mbụ ya. A na-agafe oghere DOM na-akpalite dị ka arụmụka nke abụọ. Ọrụ ahụ ga-eweghachite n'usoro nwere ọnụọgụ abụọ: .[skidding, distance]

Maka ozi ndị ọzọ rụtụ aka na docs offset Popper .

popperConfig efu | ihe | ọrụ null

Ka ịgbanwee ndabara Bootstrap Popper config, hụ nhazi nke Popper .

Mgbe a na-eji ọrụ mepụta nhazi Popper, a na-akpọ ya na ihe nwere nhazi ndabara nke Bootstrap. Ọ na-enyere gị aka iji ma jikọta ndabara na nhazi nke gị. Ọrụ ahụ ga-eweghachite ihe nhazi maka Popper.

Njirimara data maka ndụmọdụ ngwaọrụ n'otu n'otu

Enwere ike ịkọwa nhọrọ maka ndụmọdụ ngwaọrụ n'otu n'otu site na iji njirimara data, dịka akọwara n'elu.

Iji ọrụ napopperConfig

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

Ụzọ

Ụzọ asynchronous na ntụgharị

Ụzọ API niile enweghị atụ wee malite mgbanwe . Ha na-alaghachikwuru onye na-akpọ oku ozugbo mgbanwe ahụ malitere mana tupu ya akwụsị . Na mgbakwunye, a ga-eleghara oku usoro na mpaghara mgbanwe anya .

Hụ akwụkwọ Javascript anyị maka ozi ndị ọzọ .

gosi

Na-ekpughe ngwa ọrụ mmewere. Na-alaghachikwute onye na-akpọ oku tupu egosipụta ngwa ọrụ (ya bụ tupu shown.bs.tooltipmmemme emee). A na-ewere nke a dị ka "akwụkwọ ntuziaka" na-akpalite stụ aka. Agaghị egosipụta ndụmọdụ ndụmọdụ nwere aha ogologo efu.

tooltip.show()

zoo

Na-ezobe ntụaka ngwa ọrụ mmewere. Na-alaghachikwute onye na-akpọ oku tupu ezobe ngwa ọrụ n'ezie (ya bụ tupu hidden.bs.tooltipmmemme emee). A na-ewere nke a dị ka "akwụkwọ ntuziaka" na-akpalite stụ aka.

tooltip.hide()

tụgharịa

Na-atụgharị ihe ntụnye aka nke mmewere. Na-alaghachikwute onye na-akpọ oku tupu egosipụta ma ọ bụ ezoro ezo emetụ aka (ya bụ tupu ihe shown.bs.tooltipomume hidden.bs.tooltipahụ emee). A na-ewere nke a dị ka "akwụkwọ ntuziaka" na-akpalite stụ aka.

tooltip.toggle()

tufuo

Na-ezo ma bibie ngwa ọrụ mmewere (na-ewepụ data echekwara na mmewere DOM). Enweghị ike ibibi ndụmọdụ ndị na-eji ndị nnọchi anya (nke emepụtara site na iji selectornhọrọ ) n'otu n'otu na ihe na-akpali akpali.

tooltip.dispose()

mee ka

Na-enye ntụzịaka ngwa ọrụ mmewere ike igosi ya. Agbanyere ndụmọdụ ngwaọrụ site na ndabara.

tooltip.enable()

gbanyụọ

Na-ewepụ ikike igosi ihe nrịbama ihe mmewere. A ga-enwe ike igosi ntụnye aka ma ọ bụrụ na agbanyere ya ọzọ.

tooltip.disable()

Agbanyere ngbanwe

Na-atụgharị ikike igosi ma ọ bụ zobe ihe nrịbama ngwa ihe.

tooltip.toggleEnabled()

imelite

Na-emelite ọnọdụ ntụaka ngwaọrụ elementrị.

tooltip.update()

nweta ihe atụ

Usoro static nke na-enye gị ohere ịnweta ihe atụ Tooltip jikọtara ya na mmewere DOM

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

nwetaOrCreateInstance

Usoro static nke na-enye gị ohere ịnweta ihe atụ Tooltip jikọtara ya na ihe DOM, ma ọ bụ mepụta nke ọhụrụ ma ọ bụrụ na ebidoghị ya.

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

Ihe omume

Ụdị mmemme Nkọwa
show.bs.tooltip Ihe omume a na-agba ọkụ ozugbo showa na-akpọ usoro ihe atụ.
shown.bs.tooltip A na-agbapụ ihe omume a mgbe onye ọrụ mere ka ọ hụ ihe nrịbama ngwaọrụ ahụ (ga-echere mgbanwe CSS ka agwụchaa).
hide.bs.tooltip A na-agbapụ ihe omume a ozugbo hidea kpọrọ usoro ihe atụ.
hidden.bs.tooltip A na-agbapụ ihe omume a mgbe ezoro ezoro ya n'aka onye ọrụ (ga-echere mgbanwe CSS ka agwụchaa).
inserted.bs.tooltip A na-achụpụ ihe omume a mgbe ihe show.bs.tooltipomume ahụ gasịrị mgbe agbakwunyere template Tooltip na DOM.
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()