Source

Ntuziaka ngwaọrụ

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

Nchịkọta

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

  • Ntuziaka ngwaọrụ dabere na ọbaakwụkwọ ndị otu nke atọ Popper.js maka idowe. Ị ga- etinyerịrị popper.min.js tupu bootstrap.js ma ọ bụ jiri bootstrap.bundle.min.js/ bootstrap.bundle.jsnke nwere Popper.js ka ndụmọdụ ngwaọrụ rụọ ọrụ!
  • Ọ bụrụ na ị na-ewu Javascript anyị site na isi iyi, ọ chọrọutil.js .
  • 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.

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-togglenjirimara ha:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Ihe atụ

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

Ọkpa ogologo ọkpa next level keffiyeh eleghị anya ị nụbeghị maka ha. Foto ụlọ afụ ọnụ raw denim akwụkwọ ozi vegan messenger akpa stumptown. Ugbo-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit American uwe nwere Terry Richardson vinyl chambray. Ogige ajị agba, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, anọ loko mcsweeney si sachaa vegan chambray. A really ironic artisan whatever keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

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.

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

Na agbakwunyere HTML omenala:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

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:

$('#example').tooltip(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, tọọ boundarynhọrọ na ihe ọ bụla na-abụghị uru ndabara, 'scrollParent', dị ka 'window':

$('#example').tooltip({ boundary: 'window' })

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-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="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", ma tufuo ihe pointer-eventsahụ nwere nkwarụ.

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" 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-, dị ka ọ dị na data-animation="".

Rịba ama na maka ihe nchekwa , enweghị ike ịnye sanitize, sanitizeFnna nhọrọ site na iji njirimara data.whiteList

Aha Ụdị Ọdabara Nkọwa
animation boolean eziokwu Tinye mgbanwe CSS na-agwụ n'isi ngwaọrụ
akpa eriri | mmewere | ụgha ụgha

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.
igbu oge 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 ụgha

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, texta ga-eji usoro jQuery tinye ọdịnaya n'ime DOM.

Jiri ederede ma ọ bụrụ na ị na-echegbu onwe gị maka mwakpo XSS.
ntinye eriri | ọrụ 'n'elu'

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.
onye nhọpụta eriri | ụgha ụgha Ọ 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 .
ndebiri eriri '<div class="tooltip" role="tooltip"><div class="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.

.arrowga-aghọ akụ nke Tooltip.

Ihe mkpuchi ihe kachasị elu kwesịrị inwe .tooltipklaasị na role="tooltip".
aha 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ụ.
ịkpalite 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 .tooltip('show'), .tooltip('hide')na .tooltip('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ị.
nkwụsị nọmba | eriri | ọrụ 0

Nkwụsị nke ngwa ọrụ n'ihe metụtara ebumnuche ya.

Mgbe ejiri rụọ ọrụ iji chọpụta nkwụghachi, a na-akpọ ya ya na ihe nwere data nkwụsị dị ka arụmụka mbụ ya. Ọrụ ahụ ga-eweghachite ihe nwere otu nhazi ahụ. A na-agafe oghere DOM na-akpalite dị ka arụmụka nke abụọ.

Maka ozi ndị ọzọ rụtụ aka na Docs Offset Popper.js .
fallbackPlacement eriri | n'usoro 'tụgharịa' Hapụ ka ịkọwapụta ọnọdụ Popper ga-eji na ọdịda azụ. Maka ozi ndị ọzọ rụtụ aka na akwụkwọ omume Popper.js
oke eriri | mmewere 'mpịakọta nne na nna' Oke oke mmachi nke ngwungwu ngwaọrụ. Nabata ụkpụrụ nke 'viewport', 'window', 'scrollParent', ma ọ bụ HTMLElement ntụaka (naanị JavaScript). Maka ozi ndị ọzọ rụtụ aka na Docs preventoverflow nke Popper.js .
mee ka ha dị ọcha boolean eziokwu Kwado ma ọ bụ gbanyụọ nhichapụ ahụ. Ọ bụrụ na agbanyere 'template'ya, 'title'a ga-ehichapụ nhọrọ.
whiteList ihe Uru ndabara Ihe nke nwere njirimara na mkpado ekwenyere
sanitizeFn efu | ọrụ efu 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.
popperConfig efu | ihe efu Ka ịgbanwee ndabara Bootstrap Popper.js, hụ nhazi nke Popper.js

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.

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

$().tooltip(options)

Na-ejikọta onye na-ahụ maka ndụmọdụ ngwaọrụ na mkpokọta mmewere.

.tooltip('show')

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.

$('#element').tooltip('show')

.tooltip('hide')

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.

$('#element').tooltip('hide')

.tooltip('toggle')

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.

$('#element').tooltip('toggle')

.tooltip('dispose')

Na-ezo ma na-ebibi ngwa ọrụ mmewere. 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.

$('#element').tooltip('dispose')

.tooltip('enable')

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

$('#element').tooltip('enable')

.tooltip('disable')

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

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

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

$('#element').tooltip('toggleEnabled')

.tooltip('update')

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

$('#element').tooltip('update')

Ihe omume

Ụdị mmemme Nkọwa
gosi.bs.tooltip Ihe omume a na-agba ọkụ ozugbo showa na-akpọ usoro ihe atụ.
egosiri.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).
zoo.bs.tooltip A na-agbapụ ihe omume a ozugbo hidea kpọrọ usoro ihe atụ.
zoro ezo.bs.tooltip A na-agbapụ ihe omume a mgbe ezoro ezoro ya n'aka onye ọrụ (ga-echere mgbanwe CSS ka agwụchaa).
tinye.bs.tooltip A na-achụpụ ihe omume a mgbe ihe show.bs.tooltipomume ahụ gasịrị mgbe agbakwunyere template Tooltip na DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})