in English

Leideanna uirlisí

Doiciméadú agus samplaí chun leideanna saincheaptha Bootstrap a chur le CSS agus JavaScript ag baint úsáide as CSS3 le haghaidh beochana agus tréithe sonraí le haghaidh stórála teidil áitiúil.

Forbhreathnú

Rudaí le fios agus an breiseán leid uirlisí á úsáid agat:

  • Braitheann leideanna uirlisí ar Phopper na leabharlainne 3ú páirtí le haghaidh suímh. Ní mór duit popper.min.js a chur san áireamh roimh bootstrap.js nó úsáid bootstrap.bundle.min.js/ bootstrap.bundle.jsina bhfuil Popper le go n-oibreoidh leideanna uirlisí!
  • Má tá ár JavaScript á thógáil agat ón bhfoinse, teastaíonnutil.js .
  • Is rogha an diúltaithe iad leideanna uirlisí ar chúiseanna feidhmíochta, mar sin ní mór duit iad a thosú tú féin .
  • Ní thaispeántar leideanna uirlisí le teidil fad nialasacha riamh.
  • Sonraigh container: 'body'chun fadhbanna rindreála a sheachaint i gcomhpháirteanna níos casta (amhail ár ngrúpaí ionchuir, grúpaí cnaipí, srl).
  • Ní oibreoidh leideanna uirlisí ar eilimintí ceilte a spreagadh.
  • Ní mór leideanna uirlisí .disablednó disabledeilimintí a spreagadh ar eilimint chumhdaigh.
  • Nuair a spreagtar iad ó hipearnasc a théann thar línte iolracha, díreofar leideanna uirlisí. Bain úsáid as white-space: nowrap;ar do <a>chuid chun an iompar seo a sheachaint.
  • Ní mór leideanna uirlisí a chur i bhfolach sula mbaintear na heilimintí comhfhreagracha den DOM.
  • Is féidir leideanna uirlisí a spreagadh a bhuíochas le heilimint taobh istigh de scáth DOM.
De réir réamhshocraithe, úsáideann an chomhpháirt seo an sanitizer ábhar ionsuite, a stiallacha amach aon eilimintí HTML nach bhfuil ceadaithe go sainráite. Féach an rannán sláintíochta inár ndoiciméadú JavaScript le haghaidh tuilleadh sonraí.
Tá éifeacht beochana an chomhpháirt seo ag brath ar prefers-reduced-motioncheist na meán. Féach an rannán tairiscint laghdaithe dár gcáipéisíocht inrochtaineachta .

Fuair ​​sin go léir? Go hiontach, déanaimis a fheiceáil conas a oibríonn siad le roinnt samplaí.

Sampla: Cumasaigh leideanna i ngach áit

Bealach amháin chun na leideanna uirlisí go léir ar leathanach a thosú ná iad a roghnú de réir a n- data-toggletréith:

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

Samplaí

Aló thar na naisc thíos chun leideanna uirlisí a fheiceáil:

Téacs sealbhóir áitribh chun naisc inlíne le leideanna uirlisí a léiriú. Níl anseo anois ach filler, gan aon killer. Ábhar a chuirtear anseo díreach chun aithris a dhéanamh ar láithreacht téacs fíor . Agus sin go léir chun tuairim a thabhairt duit ar an gcuma a bheadh ​​ar leideanna uirlisí nuair a úsáidtear iad i gcásanna sa saol fíor. Mar sin tá súil agam go bhfeicfidh tú anois conas is féidir leis na leideanna uirlisí seo ar naisc oibriú go praiticiúil, nuair a úsáideann tú iad ar do shuíomh nó ar do thionscadal féin.

Ainligh thar na cnaipí thíos chun na ceithre threo leideanna uirlisí a fheiceáil: barr, ar dheis, ag bun agus ar chlé.

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

Agus le HTML saincheaptha curtha leis:

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

Gineann an breiseán leid uirlisí inneachar agus marcáil ar éileamh, agus de réir réamhshocraithe cuireann sé leideanna uirlisí i ndiaidh a n-eiliminte truicear.

Spreag an leid uirlisí trí JavaScript:

$('#example').tooltip(options)
Cur thar maoil autoagusscroll

Féachann suíomh Tooltip le hathrú go huathoibríoch nuair a bhíonn ár gcoimeádán tuismitheora overflow: autonó nuair is overflow: scrollmaith leis an ár .table-responsivegcoimeádán , ach coinníonn sé suíomh an tsocrúcháin bhunaidh fós. Chun é a réiteach, socraigh an boundaryrogha chuig rud ar bith seachas an luach réamhshocraithe, 'scrollParent', mar shampla 'window':

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

Marcáil

Níl sa mharcáil riachtanach do leid uirlisí ach datatréith agus titlear an eilimint HTML is mian leat leid uirlisí a bheith agat. Tá an marcáil ginte ar leid uirlisí sách simplí, cé go dteastaíonn suíomh uaidh (de réir réamhshocraithe, socraithe topag an mbreiseán).

Feidhmíonn leideanna uirlisí d’úsáideoirí méarchláir agus d’úsáideoirí teicneolaíochta cúnta

Níor cheart duit ach leideanna uirlisí a chur le heilimintí HTML atá go traidisiúnta dírithe ar mhéarchlár agus idirghníomhach (cosúil le naisc nó rialuithe foirmeacha). Cé gur féidir gnéithe treallach HTML (cosúil le <span>s) a dhíriú tríd an tabindex="0"tréith a chur leis, cuirfidh sé seo stadanna cluaisíní a d’fhéadfadh a bheith corraitheach agus mearbhall ar eilimintí neamh-idirghníomhacha d’úsáideoirí méarchláir, agus faoi láthair ní fhógraíonn formhór na dteicneolaíochtaí cúnta an leid uirlisí sa chás seo. Ina theannta sin, ná bí ag brath go hiomlán hovermar thruicear do leid uirlisí, mar go mbeidh sé dodhéanta do leideanna uirlisí a spreagadh d'úsáideoirí méarchláir.

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

Eilimintí faoi mhíchumas

Níl na heilimintí leis an disabledtréith idirghníomhach, rud a chiallaíonn nach féidir le húsáideoirí díriú orthu, iad a ainliú nó a chliceáil chun leid uirlisí (nó aníos aníos) a spreagadh. Mar réiteach oibre, beidh tú ag iarraidh an leid uirlisí a spreagadh ó fhillteán <div>nó <span>, atá dírithe go hidéalach ar an méarchlár ag baint úsáide as , agus an eilimint ar an míchumas a tabindex="0"shárú .pointer-events

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

Roghanna

Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-, mar atá i data-animation="".

sanitizeTabhair faoi deara nach féidir an , sanitizeFnagus na whiteListroghanna a sholáthar ar chúiseanna slándála trí úsáid a bhaint as tréithe sonraí.
Ainm Cineál Réamhshocrú Cur síos
beochan Boole fíor Cuir trasdul céimnithe CSS i bhfeidhm ar an leid uirlisí
coimeádán teaghrán | eilimint | bréagach bréagach

Cuireann sé an leid uirlisí le heilimint ar leith. Sampla: container: 'body'. Tá an rogha seo úsáideach go háirithe sa mhéid is go gceadaíonn sé duit an leid uirlisí a shuíomh i sreabhadh an doiciméid in aice leis an eilimint truicearaithe - rud a chuirfidh cosc ​​ar an leid uirlisí ó snámh ón eilimint spreagaithe le linn athrú méide fuinneoige.
moill uimhir | réad 0

Moill ag taispeáint agus ag cur i bhfolach an leid uirlisí (ms) - ní bhaineann sé le cineál truicear láimhe

Má chuirtear uimhir ar fáil, cuirtear moill i bhfeidhm ar an dá cheilt/seó

Is é struchtúr an ábhair:delay: { "show": 500, "hide": 100 }
html Boole bréagach

Ceadaigh HTML sa leid uirlisí.

Más fíor, déanfar clibeanna HTML sna leideanna uirlisí titlea rindreáil sa leid uirlisí. Más bréagach é, textúsáidfear modh jQuery chun ábhar a chur isteach sa DOM.

Úsáid téacs má tá imní ort faoi ionsaithe XSS.
socrúchán teaghrán | feidhm 'barr'

Conas an leid uirlisí a shuíomh - uathoibríoch | barr | bun | chlé | ceart.
Nuair autoa shonraítear é, athróidh sé an leid uirlisí go dinimiciúil.

Nuair a úsáidtear feidhm chun an socrúchán a chinneadh, tugtar an nód DOM leid uirlisí mar a chéad argóint agus nód DOM na heiliminte spreagúla mar an dara háit. Tá an thiscomhthéacs socraithe don ásc leid uirlisí.
roghnóir teaghrán | bréagach bréagach Má chuirtear roghnóir ar fáil, déanfar cuspóirí na leideanna uirlisí a tharmligean chuig na spriocanna sonraithe. Go praiticiúil, úsáidtear é seo chun leideanna uirlisí a chur i bhfeidhm ar eilimintí DOM ( jQuery.ontacaíocht) a chuirtear leis go dinimiciúil. Féach é seo agus sampla faisnéiseach .
teimpléad teaghrán '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Bunús HTML le húsáid agus an leid uirlisí á chruthú.

Déanfar na leideanna uirlisí titlea instealladh isteach sa .tooltip-inner.

.arrowbeidh saighead an leid uirlisí.

.tooltipBa chóir go mbeadh an rang agus an eilimint fillte is forimeallaí role="tooltip".
teideal teaghrán | eilimint | feidhm ''

Luach teidil réamhshocraithe mura titlebhfuil an aitreabúid i láthair.

Má thugtar feidhm, glaofar í lena thistacar tagartha don eilimint a bhfuil an leid uirlisí ceangailte léi.
truicear teaghrán 'fócas hover'

Conas a spreagtar leid uirlisí - cliceáil | ainlíon | fócas | lámhleabhar. Is féidir leat pas a fháil truicear iolrach; iad a scaradh le spás.

'manual'go gcuireann sé in iúl go spreagfar an leid uirlisí go ríomhchláraithe trí bhíthin .tooltip('show'), .tooltip('hide')agus .tooltip('toggle')modhanna; ní féidir an luach seo a chomhcheangal le haon truicear eile.

'hover'ina n-aonar beidh leideanna uirlisí ann nach féidir a spreagadh tríd an méarchlár, agus níor cheart iad a úsáid ach amháin má tá modhanna eile ann chun an fhaisnéis chéanna a chur in iúl d'úsáideoirí méarchláir.
fhritháireamh uimhir | teaghrán | feidhm 0

Fritháireamh an leid uirlisí i gcoibhneas lena sprioc.

Nuair a úsáidtear feidhm chun an fritháireamh a chinneadh, tugtar é le réad ina bhfuil na sonraí fritháirimh mar a chéad argóint. Caithfidh an fheidhm rud a thabhairt ar ais leis an struchtúr céanna. Ritear an nód DOM na heiliminte spreagúla mar an dara argóint.

Le haghaidh tuilleadh eolais déan tagairt do dhoiciméid fhritháireamh Popper .
socrúchán cúltaca teaghrán | eagar 'smeach' Ceadaigh a shonrú cén suíomh a úsáidfidh Popper ar chúltaca. Le haghaidh tuilleadh eolais déan tagairt do dhoiciméid iompair Popper
saincheapthaRang teaghrán | feidhm ''

Cuir ranganna leis an leid uirlisí nuair a thaispeánfar é. Tabhair faoi deara go gcuirfear na ranganna seo i dteannta le ranganna ar bith a shonraítear sa teimpléad. Chun ranganna iolracha a chur leis, scar iad le spásanna: 'a b'.

Is féidir leat feidhm a rith freisin ar cheart di teaghrán amháin a thabhairt ar ais ina bhfuil ainmneacha ranga breise.
teorainn teaghrán | eilimint 'scrollParent' Teorainn shrianta thar maoil an leid uirlisí. Glacann sé le luachanna 'viewport', 'window', 'scrollParent', nó tagairt HTMLElement (JavaScript amháin). Le haghaidh tuilleadh faisnéise déan tagairt do dhoiciméid preventOverflow Popper .
sláintíocht Boole fíor Cumasaigh nó díchumasaigh an sláintíocht. Má chuirtear i ngníomh é 'template'agus 'title'déanfar na roghanna a shláintiú. Féach an rannán sláintíochta inár ndoiciméadú JavaScript .
Liosta bán réad Luach réamhshocraithe Réad ina bhfuil tréithe agus clibeanna ceadaithe
sanitizeFn null | feidhm null Anseo is féidir leat d'fheidhm sláintíochta féin a sholáthar. Féadfaidh sé seo a bheith úsáideach más fearr leat leabharlann thiomanta a úsáid chun sláintíocht a dhéanamh.
popperConfig null | réad null Chun cumraíocht réamhshocraithe Bootstrap Popper a athrú, féach cumraíocht Popper

Tréithe sonraí le haghaidh leideanna uirlisí aonair

De rogha air sin, is féidir roghanna le haghaidh leideanna aonair a shonrú trí úsáid a bhaint as tréithe sonraí, mar a mhínítear thuas.

Modhanna

Modhanna agus aistrithe asincrónacha

Tá gach modh API asincrónach agus cuireann siad tús le haistriú . Filleann siad ar an nglaoiteoir chomh luath agus a chuirtear tús leis an aistriú ach sula gcríochnaíonn sé . Ina theannta sin, ní thabharfar aird ar ghlao modha ar chomhpháirt trasdula .

Féach ar ár gcáipéisíocht JavaScript le haghaidh tuilleadh eolais .

$().tooltip(options)

Nascann láimhseálaí leid uirlisí le bailiúchán eilimint.

.tooltip('show')

Nochtann leid uirlisí eilimint. Filleann sé ar an nglaoiteoir sula dtaispeántar an leid uirlisí (ie sula shown.bs.tooltipdtarlaíonn an teagmhas). Meastar gur spreagadh “láimhe” é seo don leid uirlisí. Ní thaispeántar leideanna uirlisí le teidil fad nialasacha riamh.

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

.tooltip('hide')

Folaigh leid uirlisí eiliminte. Filleann sé ar an nglaoiteoir sula mbeidh an leid uirlisí curtha i bhfolach (ie sula hidden.bs.tooltipdtarlaíonn an t-imeacht). Meastar gur spreagadh “láimhe” é seo don leid uirlisí.

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

.tooltip('toggle')

Scoránaigh an leid uirlisí eilimint. Filleann sé ar an nglaoiteoir sula dtaispeántar nó sula gcuirtear i bhfolach an leid uirlisí (.i. sula dtarlaíonn shown.bs.tooltipnó sula hidden.bs.tooltipdtarlaíonn an teagmhas). Meastar gur spreagadh “láimhe” é seo don leid uirlisí.

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

.tooltip('dispose')

Seithí agus scriosann leid uirlisí eiliminte. Ní féidir leideanna uirlisí a úsáideann tarmligean (a chruthaítear leis an selectorrogha ) a scrios ina n-aonar ar eilimintí truicear sliocht.

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

.tooltip('enable')

Tugann sé seo leid uirlisí eilimint an cumas a thaispeáint. Tá leideanna uirlisí cumasaithe de réir réamhshocraithe.

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

.tooltip('disable')

Baintear an cumas chun leid uirlisí eiliminte a thaispeáint. Ní bheidh an leid uirlisí in ann a thaispeáint ach amháin má tá sé ath-chumasaithe.

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

.tooltip('toggleEnabled')

Scoránaigh an cumas chun leid uirlisí eiliminte a thaispeáint nó a fholach.

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

.tooltip('update')

Nuashonraítear suíomh leid uirlisí eiliminte.

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

Imeachtaí

Cineál Imeachta Cur síos
taispeáin.bs.leid Téann an teagmhas seo chun solais láithreach nuair showa ghlaoitear an modh ásc.
leid.uirlis.bs Cuirtear an teagmhas seo ar ceal nuair a bheidh an leid uirlisí infheicthe don úsáideoir (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích).
leideanna.bsanna Cuirtear an teagmhas seo ar ceal láithreach nuair a bhíonn an hidemodh ásc glaoite.
i bhfolach.bs.leid Tá an teagmhas seo bréan nuair a bhíonn an leid uirlisí curtha i bhfolach ón úsáideoir (fanacht go dtí go gcríochnófar na haistrithe CSS).
cuireadh.bs.toolt Bristear an teagmhas seo tar éis na show.bs.tooltiphócáide nuair a cuireadh an teimpléad leid uirlisí leis an DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})