Source

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.js 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.jso loʻo i ai Popper.js ina ia mafai ai ona faʻaoga meafaigaluega!
  • Afai o loʻo e fausiaina la matou JavaScript mai le puna, e manaʻomiautil.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 .disabledpo'o disabledelemene 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.

O le aafiaga o le animation o lenei vaega e fa'alagolago i le su'esu'ega a le prefers-reduced-motionaufaasā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-toggleuiga:

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

Faataitaiga

Fa'apa i luga o so'oga o lo'o i lalo e va'ai i mea faigaluega:

ofuvae fufusi isi tulaga keffiyeh masalo e te le'i fa'alogo iai. Fa'ato'aga ata 'ava fa'a denim mata'itusi vegan taga avefe'au stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit amerika ofu e iai le terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, fa loko mcsweeney's cleanse vegan chambray. O se tufuga fa'atauva'a lava so'o se keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

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 automascroll

Ole tulaga ole Tooltip e taumafai e sui otometi pe a iai overflow: autope overflow: scrollfiafia 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 boundaryfilifiliga 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 datauiga ma titleluga 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 tople 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 hoverle 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 disableduiga 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-eventsfaʻ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="".

Manatua e le mafai ona tuʻuina atu le sanitize, sanitizeFnma 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: container: 'body'. O lenei filifiliga e sili ona aoga ona e mafai ai e oe ona tuʻu le mea faigaluega i le tafe o le pepa i tafatafa o le elemene faʻaoso - lea o le a taofia ai le meafaigaluega mai le opeopea ese mai le elemene faʻaoso i le taimi o le suiga o le faamalama.
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:delay: { "show": 500, "hide": 100 }
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 titlea fa'aalia i le meafaigaluega. Afai e sese, o le a faʻaaogaina le textauala a le jQuery e faʻaofi ai mea i totonu ole DOM.

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.
A autofa'amaoti mai, o le a fa'amaninoina le fa'atonuga o meafaigaluega.

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 thislo'o fa'atulaga le tala i le fa'ata'ita'iga meafaigaluega.
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.onlagolago). 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 titlea tui i totonu o le .tooltip-inner.

.arrowo le a avea ma aū a le meafaigaluega.

O le elemene afifi pito i fafo e tatau ona i ai le .tooltipvasega ma role="tooltip".
suafa manoa | elemene | galuega faatino ''

Fa'aigoa fa'aigoa tau pe afai titlee le o iai le uiga.

Afai e tu'uina atu se galuega, o le a vala'au ma lona thisfa'asinomaga seti i le elemene o lo'o fa'apipi'i i ai le meafaigaluega.
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.

'manual'o lo'o fa'ailoa mai ai o le a fa'aosoina fa'apolokalame le fa'amatalaga meafaigaluega e ala i le .tooltip('show'), .tooltip('hide')ma .tooltip('toggle')metotia; e le mafai ona tu'ufa'atasia lenei tau ma so'o se isi fa'aoso.

'hover'na o ia lava o le a maua ai meafaigaluega e le mafai ona faʻaosoina e ala i le piano, ma e tatau ona faʻaaogaina pe afai o loʻo i ai isi auala mo le faʻasalalauina o faʻamatalaga tutusa mo tagata faʻaoga keyboard.
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.js'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.js's behavior docs
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.js'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.
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'aletonu o le Popper.js config a Bootstrap, va'ai le fa'atulagaina o Popper.js

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 .

Va'ai la matou pepa JavaScript mo nisi fa'amatalaga .

$().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.tooltipmea 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.tooltipmea 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.tooltippo'o le hidden.bs.tooltipmea 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 selectorfilifiliga ) 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 showvalaʻ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 hidevalaʻ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.tooltipmea na tupu ina ua faʻaopoopo le faʻataʻitaʻiga meafaigaluega i le DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})