Source

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 an leabharlann tríú páirtí Popper.js 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.js 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.

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:

Pants daingean an chéad leibhéal eile keffiyeh is dócha nár chuala tú trácht orthu. Photo mboth féasóg amh denim letterpress mála teachtaire vegan stumptown. Tá seaman vinil terry richardson ag an seitan feirme go tábla, éadaí Meiriceánach quinoa inbhuanaithe quinoa 8-giotán mcsweeney . Beard stumptown, cardigans banh mi lomo thundercats. Tofu bithdhíosal williamsburg marfa, ceithre seomra vegan cleanse loko mcsweeney. Ceardaí fíor- íorónach is cuma cad is eochair , scenester farm-go-table banksy Austin twitter láimhseáil freegan cred raw denim caife aon-bhunús víreasach.

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. Ina theannta sin, ní fhógraíonn formhór na dteicneolaíochtaí cúnta an leid uirlisí sa chás seo faoi láthair.

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="".

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 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 0 Fritháireamh an leid uirlisí i gcoibhneas lena sprioc. Le haghaidh tuilleadh faisnéise déan tagairt do dhoiciméid fhritháireamh Popper.js .
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 faisnéise déan tagairt do dhoiciméid iompair Popper.js
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.js .

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 a luaithe 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).
leid.uirlis.bs Cuirtear an teagmhas seo ar ceal láithreach nuair hidea ghlaoitear an modh ásc.
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 Cuirtear an teagmhas seo ar ceal 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…
})