Source

Nnwinnade Ho Afotu

Nwoma ne nhwɛsoɔ a wɔde bɛka Bootstrap adwinnadeɛ a wɔahyɛ da ayɛ ho a CSS ne JavaScript de CSS3 di dwuma ma animations ne data-attributes ma local title storage.

Nsɛm a Wɔaka abom

Nneɛma a ɛsɛ sɛ wuhu bere a wode tooltip plugin no redi dwuma no:

  • Nnwinnade ho nsɛm de ne ho to 3rd party nhomakorabea Popper.js so ma gyinabea. Ɛsɛ sɛ wode popper.min.js ka ho ansa na bootstrap.js anaa wode bootstrap.bundle.min.js/ bootstrap.bundle.jsa Popper.js wom di dwuma na ama adwinnade ho nsɛm ayɛ adwuma!
  • Sɛ worekyekye yɛn JavaScript no afi fibea a, ɛhwehwɛ sɛutil.js .
  • Tooltips yɛ opt-in esiane adwumayɛ nti, enti ɛsɛ sɛ w’ankasa wufi ase .
  • Nnwinnade ho nsɛm a ɛwɔ asɛmti a ne tenten yɛ zero no nkyerɛ da.
  • Kyerɛkyerɛ container: 'body'sɛnea wobɛkwati nkyerɛase ho haw ahorow wɔ afã horow a ɛyɛ den kɛse mu (te sɛ yɛn nsɛm a wɔde hyɛ mu akuw, bɔtn akuw, ne nea ɛkeka ho).
  • Nnwinnade ho nsɛm a wobɛkanyan wɔ nneɛma a ahintaw so no rennyɛ adwuma.
  • Ɛsɛ sɛ wɔde adwinnade afotu ma .disabledanaa disabledelement ahorow no fi ase wɔ wrapper element bi so.
  • Sɛ wofi ase fi hyperlink ahorow a ɛtrɛw nkyerɛwde ahorow pii mu a, adwinnade ho nsɛm bɛkɔ mfinimfini. Fa di dwuma white-space: nowrap;wɔ wo <a>s so na woakwati saa suban yi.
  • Ɛsɛ sɛ wɔde nnwinnadeɛ ho nsɛm sie ansa na wɔayi wɔn nneɛma a ɛne no hyia no afiri DOM no mu.
  • Tooltips betumi ayɛ triggered aseda element bi a ɛwɔ sunsuma DOM mu.

Animation nkɛntɛnso a ɛwɔ saa ade yi mu no gyina prefers-reduced-motionmedia asɛmmisa no so. Hwɛ yɛn akwan a wɔfa so nya nneɛma ho nkrataa no fã a wɔatew so no .

Woanya saa nneɛma no nyinaa? Ɔkɛseɛ, ma yɛnhwɛ sɛdeɛ wɔde nhwɛsoɔ bi yɛ adwuma.

Nhwɛso: Ma adwinnade ho nsɛm nyɛ adwuma wɔ baabiara

Ɔkwan baako a wobɛfa so ahyɛ adwinnadeɛ a ɛwɔ kratafa bi so nyinaa ase ne sɛ wobɛpaw wɔn denam wɔn data-togglesu so:

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

Nhwɛso ahorow

Fa wo nsa hyɛ link ahorow a ɛwɔ ase ha no so na wubehu nnwinnade ho nyansahyɛ ahorow:

Tight pants next level keffiyeh ebia wontee wɔn ho asɛm. Mfonini dan abɔgyesɛ raw denim letterpress vegan ɔbɔfo bag stumptown. Farm-to-table seitan, mcsweeney fixie sustainable quinoa 8-bit american ntade wɔ terry richardson vinyl chambray. Abɔgyesɛ stumptown, cardigans banh mi lomo aprannaa. Tofu biodiesel williamsburg marfa, anan loko mcsweeney no tew vegan chambray ho. A really ironic artisan whatever keytar , scenester afuw-kɔ-pon banksy Austin twitter di freegan cred raw denim biako-mfiase kɔfe viral.

Fa wo nsa hyɛ bɔtn a ɛwɔ ase hɔ no so na wubehu adwinnade ho akwankyerɛ anan no: soro, nifa, ase, ne benkum.

<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 ɛne HTML a wɔahyɛ da ayɛ a wɔde aka ho no:

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

Sɛnea wɔde di dwuma

Adwinnade ho nkyerɛkyerɛmu plugin no yɛ nsɛm ne agyiraehyɛde wɔ ahwehwɛde so, na sɛnea ɛte no, ɛde adwinnade ho nsɛm si wɔn trigger element no akyi.

Fa JavaScript so na ɛkanyan adwinnade no:

$('#example').tooltip(options)
Overflow autonescroll

Tooltip gyinabea bɔ mmɔden sɛ ɛbɛsakra ne ho bere a ɔwofo container wɔ overflow: autoanaa overflow: scrollɛte yɛn .table-responsive, nanso ɛda so ara kura mfitiase beae no gyinabea. Sɛ wopɛ sɛ wosiesie a, fa boundaryoption no si biribi foforo biara a ɛnyɛ default value, 'scrollParent', te sɛ 'window':

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

Markup a wɔde hyɛ agyirae

Agyiraehyɛde a wɔhwehwɛ ma adwinnade ho nkyerɛkyerɛmu no yɛ datasu bi nkutoo na titlewɔ HTML element no so no wopɛ sɛ wunya adwinnade ho nsɛm. Nnwinnade bi agyiraehyɛde a wɔayɛ no yɛ mmerɛw mmom, ɛwom sɛ ɛhwehwɛ gyinabea (default no, wɔde ahyɛ mu topdenam plugin no so).

Nnwinnade ho nkyerɛkyerɛmu a wɔbɛma ayɛ adwuma ama keyboard ne mfiridwuma a ɛboa wɔn a wɔde di dwuma no

Ɛsɛ sɛ wode nnwinnadeɛ ho nkyerɛkyerɛmu ka HTML nneɛma a ɛyɛ atetesɛm no keyboard-focusable ne nkitahodiɛ (te sɛ links anaa form controls) nko ara ho. Ɛwom sɛ wobetumi ama HTML nneɛma a wɔpɛ (te sɛ <span>s) ayɛ nea wɔde wɔn adwene si so denam tabindex="0"su no a wɔde bɛka ho so de, nanso eyi bɛma tab gyinabea ahorow a ebetumi ayɛ abufuw na ɛyɛ basaa bɛka nneɛma a ɛnyɛ nkitahodi ho ama keyboard dwumadiefoɔ, na mprempren mmoa mfiridwuma dodow no ara mfa adwinnade no ho asɛm mma wɔ tebea yi mu. Bio nso, mfa wo ho nto so hoversɛ ɛno nkutoo na ɛbɛkanyan wo adwinnade ho nyansahyɛ no, efisɛ eyi bɛma wo adwinnade ho nsɛm no anyɛ yiye sɛ ɛbɛkanyan wɔn a wɔde keyboard di dwuma no.

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

Nneɛma a wɔadi dɛm

Elements a ɛwɔ disabledattribute no nyɛ nkitahodi, a ɛkyerɛ sɛ wɔn a wɔde di dwuma no ntumi mfa wɔn adwene nsi wɔn so, wɔmfa wɔn ho nhyɛ mu, anaasɛ wɔmfa wɔn nsa nka wɔn mfa nhyɛ adwinnade ho nsɛm (anaasɛ popover) ase. Sɛ́ adwuma no, wobɛpɛ sɛ wokanyan adwinnade no asɛm no fi wrapper <div>anaa <span>, a eye sen biara a wɔayɛ no keyboard-focusable denam tabindex="0", na woabu so wɔ pointer-eventson the disabled element no so.

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

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-animation="".

Hyɛ no nsow sɛ esiane ahobammɔ nti sanitize, sanitizeFnne whiteListoptions no ntumi mfa data attributes mfa mma.

Din Korɔ Mfiaseɛ Nkyerɛmu
animation a wɔde yɛ nneɛma boolean ho asɛm nokorɛ Fa CSS fade nsakrae bi di dwuma wɔ adwinnade no ho
ade a wɔde gu mu ahama | element | ɛnyɛ ampa ɛnyɛ ampa

Fa adwinnade no ho nkyerɛkyerɛmu no ka element pɔtee bi ho. Nhwɛso: container: 'body'. Saa nhyehyeɛ yi ho wɔ mfasoɔ titire wɔ sɛdeɛ ɛma wo kwan ma wode adwinnadeɛ no si krataa no nsuo mu wɔ baabi a ɛbɛn triggering element no - a ɛbɛsi adwinnadeɛ no kwan sɛ ɛbɛsen afiri adeɛ a ɛkanyan no mu wɔ mfɛnsere kɛseɛ a wɔresakra no mu.
ka akyi nɔma | adeɛ 0 na ɛwɔ hɔ

Delay kyerɛ na wɔde sie tooltip (ms) - no mfa manual trigger type ho

Sɛ wɔde nɔma bi ma a, wɔde delay di dwuma wɔ hide/show abien no nyinaa mu

Adeɛ nhyehyɛɛ ne:delay: { "show": 500, "hide": 100 }
html na ɛwɔ hɔ boolean ho asɛm ɛnyɛ ampa

Ma HTML kwan wɔ adwinnade no mu.

Sɛ ɛyɛ nokware a, HTML tags a ɛwɔ adwinnade no mu no titlebɛkyerɛ ase wɔ adwinnade no mu. Sɛ ɛyɛ atoro a, wɔde jQuery textkwan no bedi dwuma de ahyɛ nsɛm a ɛwɔ DOM no mu.

Fa text di dwuma sɛ XSS ntua ho asɛm haw wo a.
a wɔde bɛto hɔ ahama | dwumadie 'soro'

Sɛnea wɔde adwinnade no si hɔ - auto | soro | ase hɔ | benkum so | nifa.
Sɛ autowɔkyerɛ a, ɛbɛsan akyerɛ adwinnade no kwan wɔ ɔkwan a ɛyɛ nnam so.

Sɛ wɔde dwumadie bi di dwuma de kyerɛ beaeɛ a wɔde bɛto a, wɔfrɛ no a adwinnadeɛ tip DOM node yɛ ne asɛm a ɛdi kan na triggering element DOM node yɛ nea ɛtɔ so mmienu. Wɔde thisnsɛm a ɛfa ho no asi adwinnade ho nhwɛso no so.
nea ɔpaw ade ahama | ɛnyɛ ampa ɛnyɛ ampa Sɛ wɔde selector bi ma a, wɔde tooltip nneɛma bɛhyɛ botae ahorow a wɔakyerɛ no nsa. Wɔ nneyɛe mu no, wɔde eyi nso di dwuma de nnwinnade ho nsɛm nso di dwuma wɔ DOM nneɛma a wɔde aka ho wɔ ɔkwan a ɛyɛ nnam so ( jQuery.onmmoa). Hwɛ eyi ne nhwɛso a ɛma nsɛm pii .
nsusuwso ahoma '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML a wode bedi dwuma bere a woreyɛ adwinnade no ho nsɛm.

Wɔde adwinnade no titleano aduru no bɛhyɛ .tooltip-inner.

.arrowbɛyɛ adwinnade no agyan.

Ɛsɛ sɛ wrapper element a ɛwɔ akyi paa no nya .tooltipclass ne role="tooltip".
atiti asɛm ahama | element | dwumadie '' .

Default title value sɛ titleattribute no nni hɔ a.

Sɛ wɔde dwumadie bi ma a, wɔbɛfrɛ no a ne thisnkyerɛkyerɛmu no ahyɛ element a wɔde adwinnadeɛ tip no abata ho no so.
nkanyan ahoma 'hover focus'.

Sɛnea wɔde adwinnade tip no hyɛ ase - klik | hover | adwene a wɔde si biribi so | akwankyerɛ. Wubetumi atwam wɔ nneɛma pii a ɛkanyan adwene mu; fa ahunmu tetew wɔn mu.

'manual'kyerɛ sɛ wɔbɛkanyan adwinnade no wɔ nhyehyɛe kwan so denam .tooltip('show'), .tooltip('hide')ne .tooltip('toggle')akwan horow so; saa botae yi ntumi nka ho ne trigger foforo biara.

'hover'n’ankasa bɛma adwinnade ho nsɛm a wontumi mfa keyboard no so nhyɛ ase, na sɛ akwan foforo a wɔfa so de nsɛm koro no ara ma wɔn a wɔde keyboard di dwuma no wɔ hɔ nkutoo a, ɛsɛ sɛ wɔde di dwuma.
offset a wɔde hyɛ mu nɔma | ahama | dwumadie 0 na ɛwɔ hɔ

Offset a ɛwɔ adwinnade no a wɔde toto ne botae no ho.

Sɛ wɔde dwumadie bi di dwuma de kyerɛ offset no a, wɔfrɛ no a adeɛ bi a ɛwɔ offset data no sɛ ne argument a ɛdi kan. Ɛsɛ sɛ adwuma no san de ade bi a ɛwɔ nhyehyɛe koro no ara ba. Wɔde triggering element DOM node no twam sɛ akyinnyegye a ɛto so abien.

Sɛ wopɛ nsɛm pii a hwɛ Popper.js offset docs .
fallbackNsɛm a wɔde si hɔ ahama | array a ɛwɔ hɔ 'dane' Ma kwan ma wɔnkyerɛ gyinabea a Popper de bedi dwuma wɔ fallback so. Sɛ wopɛ nsɛm pii a hwɛ Popper.js suban docs
ɔhye so ahama | adeɛ 'scrollƆwofo'. Overflow anohyeto hye a ɛwɔ adwinnade no anim. Gye 'viewport', 'window', 'scrollParent', anaa HTMLElement nkyerɛkyerɛmu bi (JavaScript nkutoo) botae ahorow tom. Sɛ wopɛ nsɛm pii a hwɛ Popper.js preventOverflow docs .
sanitize yɛ adwuma boolean ho asɛm nokorɛ Ma sanitization no nyɛ adwuma anaasɛ ɛnnyɛ adwuma. Sɛ activated 'template'na 'title'options bɛyɛ sanitized.
whiteList a ɛwɔ hɔ adeɛ Default bo a ɛsom Adeɛ a ɛwɔ su ne tags a wɔama ho kwan
sanitizeFn a ɛyɛ fɛ null | dwumadie ohunu Ɛha na wubetumi de w’ankasa sanitize adwuma ama. Eyi betumi ayɛ nea mfaso wɔ so sɛ wopɛ sɛ wode nhomakorabea a wɔatu ho ama di dwuma de yɛ ahotew a.
popperNhyehyɛe no null | adeɛ ohunu Sɛ wopɛ sɛ wo sesa Bootstrap no Popper.js nhyehyeɛ a ɛwɔ hɔ no a, hwɛ Popper.js nhyehyeɛ

Data su ahorow ma ankorankoro nnwinnade ho nkyerɛkyerɛmu

Wobetumi akyerɛ akwan foforo a wɔbɛfa so akyerɛ ankorankoro adwinnade ho nkyerɛkyerɛmu denam data su ahorow a wɔde bedi dwuma so, sɛnea wɔakyerɛkyerɛ mu wɔ atifi hɔ no.

Akwan a wɔfa so yɛ

Asynchronous akwan ne nsakrae ahorow

API akwan nyinaa yɛ asynchronous na ɛhyɛ nsakrae ase . Wɔsan kɔ nea ɔfrɛɛ no ​​no nkyɛn bere a wɔafi nsakrae no ase ara pɛ nanso ansa na aba awiei . Bio nso, wobebu ani agu ɔkwan a wɔfa so frɛ ade bi a ɛresakra so no so .

Hwɛ yɛn JavaScript nkrataa no na woanya nsɛm pii .

$().tooltip(options)

Fa adwinnade a wɔde di dwuma no bata element ahorow a wɔaboaboa ano ho.

.tooltip('show')

Ɛda element bi adwinnade ho nsɛm adi. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔada adwinnade no adi ankasa (kyerɛ sɛ ansa na shown.bs.tooltipasɛm no asi). Wobu eyi sɛ “nsaano” a wɔde kanyan adwinnade no ho asɛm. Nnwinnade ho nsɛm a ɛwɔ asɛmti a ne tenten yɛ zero no nkyerɛ da.

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

.tooltip('hide')

Fa element bi adwinnade ho nsɛm sie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔde adwinnade no asie ankasa (kyerɛ sɛ ansa na hidden.bs.tooltipasɛm no asi). Wobu eyi sɛ “nsaano” a wɔde kanyan adwinnade no ho asɛm.

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

.tooltip('toggle')

Toggles element bi adwinnade ho nsɛm. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ adwinnade no asɛm no ankasa anaa wɔde asie (kyerɛ sɛ ansa na shown.bs.tooltipanaa hidden.bs.tooltipadeyɛ no aba). Wobu eyi sɛ “nsaano” a wɔde kanyan adwinnade no ho asɛm.

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

.tooltip('dispose')

Hide na ɛsɛe element bi adwinnade tip. Nnwinnade a wɔde delegation di dwuma (a wɔde option ) na ɛyɛe noselector ntumi nsɛe no ankorankoro wɔ descendant trigger elements so.

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

.tooltip('enable')

Ɛma element bi tooltip tumi a wɔde bɛkyerɛ. Nnwinnade ho nsɛm no yɛ nea wɔahyɛ da ayɛ.

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

.tooltip('disable')

Yi tumi a ɛwɔ element bi adwinnade a wɔde bɛkyerɛ no fi hɔ. Sɛ wɔsan yɛ adwuma nkutoo a, wobetumi akyerɛ adwinnade no.

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

.tooltip('toggleEnabled')

Toggles tumi a element bi adwinnade tip bɛkyerɛ anaa wɔde asie.

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

.tooltip('update')

Ɔyɛ element bi adwinnade tip no gyinabea foforo.

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

Nsɛm a esisi

Nsɛm a Ɛsisii no Su Nkyerɛmu
kyerɛ.bs.adwinnade ho nsɛm Saa adeyɛ yi tow ntɛm ara bere a showwɔfrɛ instance kwan no.
wɔakyerɛ.bs.adwinnade ho nsɛm Wɔtow saa adeyɛ yi bere a wɔayɛ adwinnade no nkyerɛkyerɛmu no ahu nea ɔde di dwuma no (bɛtwɛn ma CSS nsakrae ahorow no awie).
hide.bs.adwinnade ho nsɛm Wɔtow saa adeyɛ yi ntɛm ara bere a hidewɔafrɛ instance kwan no.
hidden.bs.adwinnade ho nsɛm Wɔtow saa adeyɛ yi bere a wɔawie adwinnade no nsɛm a wɔde asie ama ɔdefo no (bɛtwɛn ma CSS nsakrae ahorow no awie).
wɔde ahyɛ mu.bs.adwinnade ho nsɛm Wɔtow saa adeyɛ yi wɔ adeyɛ no akyi show.bs.tooltipbere a wɔde adwinnade nkyerɛkyerɛmu nsusuwso no aka DOM no ho. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})