Mea faigaluega
Faʻamaumauga ma faʻataʻitaʻiga mo le faʻaopoopoina o mea faigaluega Bootstrap masani ma le CSS ma le JavaScript e faʻaaoga ai le CSS3 mo faʻafiafiaga ma faʻamaumauga-uiga mo le teuina o suafa faʻapitonuʻu.
Vaaiga lautele
Mea e tatau ona iloa pe a faʻaaogaina le meafaigaluega faʻapipiʻi:
- Mea faigaluega fa'alagolago ile faletusi lona tolu Popper mo le fa'atulagaina. E tatau ona e aofia ai popper.min.js i luma o le bootstrap.js poʻo le faʻaoga
bootstrap.bundle.min.js
/bootstrap.bundle.js
o loʻo i ai Popper ina ia mafai ai ona faʻaoga meafaigaluega! - Afai o loʻo e fausiaina la matou JavaScript mai le puna, e manaʻomia
util.js
. - O mea faigaluega e filifili i totonu mo mafuaʻaga o faʻatinoga, o lea e tatau ai ona e amataina oe lava ia .
- E le fa'aalia lava ni mea faigaluega e leai ni fa'ailoga umi.
- Fa'ama'oti
container: 'body'
e 'alofia ai le fa'atupuina o fa'afitauli i vaega e sili atu ona lavelave (pei o tatou vaega fa'aoga, vaega fa'amau, ma isi). - E le aoga le fa'aosoina o mea faigaluega i elemene natia.
- O mea faigaluega mo
.disabled
po'odisabled
elemene e tatau ona fa'aoso i luga o se elemene afifi. - A fa'aoso mai hyperlinks e tele laina, o le a fa'atotonugalemu mea faigaluega. Fa'aoga
white-space: nowrap;
i lou<a>
s e aloese ai mai lenei amio. - E tatau ona natia mea faigaluega a'o le'i aveesea a latou elemene tutusa mai le DOM.
- Tooltips e mafai ona faʻaosoina faʻafetai i se elemene i totonu o se ata lafoia DOM.
prefers-reduced-motion
aufaasālalau. Va'ai le vaega
fa'aitiitiga fa'aitiitiga oa matou pepa fa'aoga avanoa .
E maua uma na mea? Lelei, se'i o tatou va'ai pe fa'apefea ona latou galulue fa'atasi ma ni fa'ata'ita'iga.
Fa'ata'ita'iga: Fa'aaga mea faigaluega i so'o se mea
O se tasi o auala e amata ai meafaigaluega uma i luga o se itulau o le filifilia lea i latou data-toggle
uiga:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Faataitaiga
Fa'apa i luga o so'oga o lo'o i lalo e va'ai i mea faigaluega:
Fa'amatalaga o lo'o tu'u iai e fa'aalia ai nisi o feso'ota'iga fa'atasi ma mea faigaluega. O lea ua na'o le fa'atumu, leai se fasioti tagata. O mea o lo'o tu'uina iinei e fa'atusa ai le iai o tusitusiga moni . Ma o na mea uma e naʻo le tuʻuina atu ia te oe o se manatu pe faʻapefea ona foliga meafaigaluega pe a faʻaaogaina i tulaga moni o le lalolagi. Fa'amoemoe la ua e va'ai nei pe fa'apefea ona galue nei mea faigaluega i luga o so'otaga i le fa'atinoga, pe a e fa'aogaina i luga o lau lava saite po'o le poloketi.
Fa'ae'e i luga o fa'amau i lalo e va'ai ai fa'atonuga meafaigaluega e fa: luga, taumatau, lalo, ma le agavale.
<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>
Ma faʻatasi ai ma le HTML masani faʻaopoopo:
<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>
Fa'aoga
O le tooltip plugin e fa'atupuina ai mea ma fa'ailoga pe a mana'omia, ma e le mafai ona tu'u meafaigaluega pe a mae'a a latou elemene fa'aoso.
Fa'aoso le mea faigaluega e ala ile JavaScript:
$('#example').tooltip(options)
Taumasua auto
mascroll
Ole tulaga ole Tooltip e taumafai e sui otometi pe a iai overflow: auto
pe overflow: scroll
fiafia ile atigipusa matua ia tatou .table-responsive
, ae o lo'o tumau pea le tulaga o le tu'uga muamua. Ina ia foia, seti le boundary
filifiliga i soʻo se mea e ese mai le tau faʻaletonu, 'scrollParent'
, e pei o le 'window'
:
$('#example').tooltip({ boundary: 'window' })
Fa'ailoga
Ole fa'ailoga mana'omia mo se mea faigaluega e na'o se data
uiga ma title
luga ole elemene HTML e te mana'o e maua se meafaigaluega. O le faʻailoga faʻatupuina o se meafaigaluega e faigofie tele, e ui lava e manaʻomia se tulaga (e ala i le faaletonu, seti i top
le plugin).
Fa'aoga meafaigaluega mo keyboard ma fa'aoga tekonolosi fesoasoani
E tatau ona e fa'aopoopo na'o mea faigaluega i elemene HTML e masani ona fa'aogaina le keyboard ma fegalegaleai (pei o feso'ota'iga po'o fa'atonuga). E ui lava e mafai ona faʻaogaina elemene HTML (e pei o <span>
le s) e ala i le faʻaopoopoina o le tabindex="0"
uiga, o le a faʻaopoopoina ai faʻalavelave faʻalavelave ma fenumiai taofi i luga o elemene e le fesoʻotaʻi mo tagata faʻaoga keyboard, ma o le tele o tekinolosi fesoasoani i le taimi nei e le o faʻalauiloaina le meafaigaluega i lenei tulaga. E le gata i lea, aua le fa'alagolago na'o hover
le fa'aosoina o lau meafaigaluega, aua o le a le mafai ai e au meafaigaluega ona fa'aosoina mo tagata fa'aoga 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>
Elemene le atoatoa
O elemene e iai le disabled
uiga e le fegalegaleai, o lona uiga e le mafai e tagata faʻaoga ona taulaʻi, faʻafefe, pe kiliki i latou e faʻaosoina ai se meafaigaluega (poʻo le popover). I le avea ai o se fofo, e te manaʻo e faʻaosoina le mea faigaluega mai se afifi <div>
poʻo <span>
, faʻaoga lelei le keyboard-faʻaoga e faʻaaoga ai tabindex="0"
, ma pointer-events
faʻamalo le elemene le atoatoa.
<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>
Filifiliga
O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-
, pei o le data-animation=""
.
sanitize
,
sanitizeFn
ma
filifiliga mo le saogalemu e faʻaaoga ai faʻamatalaga uiga.whiteList
Igoa | Ituaiga | Fa'atonu | Fa'amatalaga |
---|---|---|---|
animation | boolean | moni | Fa'aoga se suiga e mou atu CSS i le mea faigaluega |
pusa | manoa | elemene | pepelo | pepelo | Fa'apipi'i le mea faigaluega i se elemene fa'apitoa. Faataitaiga: |
tuai | numera | mea faitino | 0 | Fa'atuai ona fa'aali ma nana le mea faigaluega (ms) - e le fa'atatau ile ituaiga fa'aoso tusi Afai e tu'uina atu se numera, fa'atuai e fa'aoga i natia/fa'aali uma O le fausaga o mea faitino o le: |
html | boolean | pepelo | Fa'ataga le HTML i le mea faigaluega. Afai e sa'o, o fa'ailoga HTML o lo'o i totonu o meafaigaluega o le Fa'aoga tusitusiga pe a e popole i osofa'iga a le XSS. |
tu'uga | manoa | galuega faatino | 'pito' | Fa'afefea ona fa'atulaga le mea faigaluega - ta'avale | pito i luga | lalo | agavale | tauagavale. Pe a faʻaaogaina se galuega e fuafua ai le tuʻuina, e taʻua i le tooltip DOM node e fai ma ana finauga muamua ma le elemene DOM node lona lua. O |
tagata filifilia | manoa | pepelo | pepelo | Afai e tu'uina atu se tagata filifilia, o mea fa'aoga meafaigaluega o le a tu'uina atu i fa'amoemoega fa'apitoa. I le faʻataʻitaʻiga, o loʻo faʻaaogaina e faʻaoga ai foi meafaigaluega e faʻaopoopo atili ai elemene DOM ( jQuery.on lagolago). Vaʻai i lenei mea ma se faʻataʻitaʻiga faʻamatalaga . |
mamanu | manoa | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
Fa'avae HTML e fa'aoga pe a fai le mea faigaluega. O mea faigaluega o le
O le elemene afifi pito i fafo e tatau ona i ai le |
suafa | manoa | elemene | galuega faatino | '' | Fa'aigoa fa'aigoa tau pe afai Afai e tu'uina atu se galuega, o le a vala'au ma lona |
fa'aoso | manoa | 'ave le taulai' | E fa'afefea ona fa'aosoina meafaigaluega - kiliki | lele | taula'i | tusi lesona. E mafai ona e pasia le tele o fa'aoso; tuueseese ma se avanoa.
|
fa'apena | numera | manoa | galuega faatino | 0 | Fa'a'ese'ese ole mea faigaluega e fa'atatau ile fa'amoemoe. Pe a faʻaaogaina se galuega e fuafua ai le offset, e valaʻau i se mea o loʻo i ai faʻamatalaga faʻamalo e fai ma ana finauga muamua. Ole galuega e tatau ona toe faʻafoʻi se mea e tutusa le fausaga. O le fa'aosoina elemene DOM node ua pasia e fai ma finauga lona lua. Mo nisi fa'amatalaga va'ai ile Popper's offset docs . |
fallbackTulaga | manoa | fa'asologa | 'fuli' | Fa'ataga e fa'ailoa mai po'o fea le tulaga o le a fa'aogaina e Popper i tua. Mo nisi fa'amatalaga va'ai ile Popper's behavior docs |
aganu'uClass | manoa | galuega faatino | '' | Fa'aopoopo vasega i le mea faigaluega pe a fa'aalia. Manatua o nei vasega o le a faʻaopoopoina i soʻo se vasega o loʻo faʻamaonia i le mamanu. Ina ia faaopoopo ni vasega se tele, tuueseese i avanoa: E mafai fo'i ona e pasia se galuega e tatau ona toe fa'afo'i ai se manoa e tasi e iai isi igoa o vasega. |
tuaoi | manoa | elemene | 'scrollParent' | Fa'agata tapula'a tuaoi o le mea faigaluega. Talia le taua o le 'viewport' , 'window' , 'scrollParent' , poʻo se HTMLElement reference (JavaScript naʻo). Mo nisi faʻamatalaga vaʻai ile Popper's preventOverflow docs . |
fa'amama | boolean | moni | Fa'amalo pe tape le fa'amama. Afai e fa'agaoioia 'template' ma 'title' filifiliga o le a fa'amama. Va'ai le vaega sanitizer i la matou pepa JavaScript . |
Lisi papa'e | mea faitino | Tau fa'aletonu | Fa'ailoga o lo'o i ai uiga fa'atagaina ma fa'ailoga |
fa'amamaFn | null | galuega faatino | null | O iinei e mafai ona e tuʻuina atu lau lava galuega faʻamamaina. E mafai ona aoga pe afai e te mana'o e fa'aoga se faletusi fa'apitoa e fa'atino ai le fa'amama. |
popperConfig | null | mea faitino | null | Ina ia suia le faʻaogaina o le Popper config a Bootstrap, vaʻai i le faatulagaga a Popper |
Fa'amatalaga uiga mo meafaigaluega ta'itasi
O filifiliga mo meafaigaluega ta'ito'atasi e mafai ona fa'amaonia e ala i le fa'aogaina o uiga fa'amaumauga, e pei ona fa'amatalaina i luga.
Metotia
Metotia ma suiga e le tutusa
O metotia API uma e le fetaui ma amata se suiga . Latou te toe fo'i atu i le tagata telefoni i le taimi lava e amata ai le suiga ae le'i uma . E le gata i lea, o le a le amanaʻiaina se auala e valaʻau ai i se vaega o suiga .
$().tooltip(options)
Fa'apipi'i se tu'u fa'amatalaga meafaigaluega i se aoina elemene.
.tooltip('show')
Fa'aalia le mea faigaluega o se elemene. Toe fo'i atu i le tagata vala'au a'o le'i fa'aalia moni mai le mea faigaluega (fa'atusa a'o le'i tupu le shown.bs.tooltip
mea na tupu). O lenei mea ua manatu o se "manual" faʻaosoina o le meafaigaluega. E le fa'aalia lava ni mea faigaluega e leai ni fa'ailoga umi.
$('#element').tooltip('show')
.tooltip('hide')
Natia le mea faigaluega o se elemene. Toe fo'i atu i le tagata vala'au a'o le'i natia le mea faigaluega (fa'atusa a'o le'i tupu le hidden.bs.tooltip
mea na tupu). O lenei mea ua manatu o se "manual" faʻaosoina o le meafaigaluega.
$('#element').tooltip('hide')
.tooltip('toggle')
Su'e le pito meafaigaluega a se elemene. Toe fo'i i le tagata vala'au a'o le'i fa'aalia pe natia le mea faigaluega (fa'atusa a'o le'i tupu le shown.bs.tooltip
po'o le hidden.bs.tooltip
mea na tupu). O lenei mea ua manatu o se "manual" faʻaosoina o le meafaigaluega.
$('#element').tooltip('toggle')
.tooltip('dispose')
Natia ma fa'aleaga le pito meafaigaluega a se elemene. Tooltips e fa'aogaina le tu'uina atu (lea e faia i le fa'aogaina o le selector
filifiliga ) e le mafai ona fa'aumatia ta'ito'atasi i elemene fa'aoso tupuaga.
$('#element').tooltip('dispose')
.tooltip('enable')
E tu'uina atu i se mea e fa'aoga meafaigaluega e mafai ona fa'aalia. E mafai ona fa'aogaina mea faigaluega.
$('#element').tooltip('enable')
.tooltip('disable')
Aveese le agava'a mo se mea faigaluega e fa'aalia. Fa'atoa mafai ona fa'aalia le mea faigaluega pe a toe fa'aagaina.
$('#element').tooltip('disable')
.tooltip('toggleEnabled')
Fa'afeso'ota'i le agava'a mo se mea faigaluega e fa'aalia pe natia.
$('#element').tooltip('toggleEnabled')
.tooltip('update')
Fa'afou le tulaga o se mea faigaluega a le elemene.
$('#element').tooltip('update')
Mea na tutupu
Ituaiga Mea | Fa'amatalaga |
---|---|
show.bs.tooltip | E mu vave lenei mea pe a show valaʻau le auala faʻataʻitaʻiga. |
fa'aalia.bs.tooltip | O lenei mea na tupu e faʻamalo pe a faʻaalia le meafaigaluega i le tagata faʻaoga (o le a faʻatali mo suiga CSS e maeʻa). |
hide.bs.tooltip | O lenei mea na tupu e faʻamalo vave pe a hide valaʻau le auala faʻataʻitaʻiga. |
hidden.bs.tooltip | O lenei mea e tupu pe a uma ona natia le meafaigaluega mai le tagata faʻaoga (o le a faʻatali mo suiga CSS e maeʻa). |
inserted.bs.tooltip | O lenei mea na tupu e faʻamalo pe a maeʻa le show.bs.tooltip mea na tupu ina ua faʻaopoopo le faʻataʻitaʻiga meafaigaluega i le DOM. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})