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.
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.js
a 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
.disabled
anaadisabled
element 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.
Woanya saa nneɛma no nyinaa? Ɔkɛseɛ, ma yɛnhwɛ sɛdeɛ wɔde nhwɛsoɔ bi yɛ adwuma.
Ɔ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-toggle
su so:
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.
Na ɛne HTML a wɔahyɛ da ayɛ a wɔde aka ho no:
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:
Overflow auto
nescroll
Tooltip gyinabea bɔ mmɔden sɛ ɛbɛsakra ne ho bere a ɔwofo container wɔ overflow: auto
anaa overflow: scroll
ɛte yɛn .table-responsive
, nanso ɛda so ara kura mfitiase beae no gyinabea. Sɛ wopɛ sɛ wosiesie a, fa boundary
option no si biribi foforo biara a ɛnyɛ default value, 'scrollParent'
, te sɛ 'window'
:
Agyiraehyɛde a wɔhwehwɛ ma adwinnade ho nkyerɛkyerɛmu no yɛ data
su bi nkutoo na title
wɔ 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 top
denam 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 aka nneɛma a ɛnyɛ nkitahodi ho ama wɔn a wɔde keyboard di dwuma no. Bio nso, mprempren mfiridwuma a ɛboa dodow no ara mfa adwinnade ho nyansahyɛ no mma wɔ tebea yi mu.
Bio nso, mfa wo ho nto so hover
sɛ ɛ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.
Elements a ɛwɔ disabled
attribute 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-events
on the disabled element no so.
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=""
.
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: |
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: |
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 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ɛ 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 |
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 di dwuma de ma HTML nsɛm a ɛyɛ nnam no tumi nya popovers a wɔde aka ho. 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
Ɛsɛ sɛ wrapper element a ɛwɔ akyi paa no nya |
atiti asɛm | ahama | element | dwumadie | '' . | Default title value sɛ Sɛ wɔde dwumadie bi ma a, wɔbɛfrɛ no a ne |
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.
|
offset a wɔde hyɛ mu | nɔma | ahoma | 0 na ɛwɔ hɔ | Offset a ɛwɔ adwinnade no a wɔde toto ne botae no ho. 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 . |
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.
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 .
Fa adwinnade a wɔde di dwuma no bata element ahorow a wɔaboaboa ano ho.
Ɛ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.tooltip
asɛ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.
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.tooltip
asɛm no asi). Wobu eyi sɛ “nsaano” a wɔde kanyan adwinnade no ho asɛm.
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.tooltip
anaa hidden.bs.tooltip
adeyɛ no aba). Wobu eyi sɛ “nsaano” a wɔde kanyan adwinnade no ho asɛm.
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.
Ɛma element bi tooltip tumi a wɔde bɛkyerɛ. Nnwinnade ho nsɛm no yɛ nea wɔahyɛ da ayɛ.
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.
Toggles tumi a element bi adwinnade tip bɛkyerɛ anaa wɔde asie.
Ɔyɛ element bi adwinnade tip no gyinabea foforo.
Nsɛm a Ɛsisii no Su | Nkyerɛmu |
---|---|
kyerɛ.bs.adwinnade ho nsɛm | Saa adeyɛ yi tow ntɛm ara bere a show wɔ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 hide wɔ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.tooltip bere a wɔde adwinnade nkyerɛkyerɛmu nsusuwso no aka DOM no ho. |