in English

Molaidhean innealan

Sgrìobhainnean agus eisimpleirean airson molaidhean innealan Bootstrap àbhaisteach a chuir ris le CSS agus JavaScript a’ cleachdadh CSS3 airson beòthachaidhean agus feartan dàta airson stòradh tiotal ionadail.

Ro-shealladh

Rudan air am bu chòir fios a bhith agad nuair a chleachdas tu am plugan Tooltip:

  • Tha molaidhean innealan an urra ris an leabharlann treas pàrtaidh Popper airson a shuidheachadh. Feumaidh tu popper.min.js a thoirt a-steach ro bootstrap.js no cleachdadh bootstrap.bundle.min.js/ bootstrap.bundle.jsanns a bheil Popper gus an obraich molaidhean innealan!
  • Ma tha thu a’ togail ar JavaScript bhon tùs, feumaidhutil.js e .
  • Tha molaidhean innealan roghnach a-steach airson adhbharan dèanadais, mar sin feumaidh tu iad fhèin a thòiseachadh .
  • Chan eil molaidhean innealan le tiotalan fad neoni air an taisbeanadh gu bràth.
  • Sònraich container: 'body'gus duilgheadasan tairgse a sheachnadh ann am pàirtean nas iom-fhillte (mar na buidhnean cuir a-steach againn, buidhnean putan, msaa).
  • Chan obraich molaidhean innealan brosnachaidh air eileamaidean falaichte.
  • Feumaidh molaidhean airson .disabledno disabledeileamaidean a bhith air am piobrachadh air eileamaid còmhdaich.
  • Nuair a thèid a bhrosnachadh bho hyperlinks a tha a’ dol thairis air grunn loidhnichean, bidh molaidhean innealan stèidhichte. Cleachd white-space: nowrap;air do chuid <a>gus an giùlan seo a sheachnadh.
  • Feumaidh molaidhean innealan a bhith falaichte mus tèid na h-eileamaidean co-fhreagarrach aca a thoirt air falbh bhon DOM.
  • Faodar molaidhean innealan a bhrosnachadh le taing do eileamaid taobh a-staigh sgàil DOM.
Gu gnàthach, bidh am pàirt seo a’ cleachdadh an sanitizer susbaint togte, a bhios a’ cuir às do eileamaidean HTML sam bith nach eil ceadaichte gu soilleir. Faic an roinn sanitizer anns na sgrìobhainnean JavaScript againn airson tuilleadh fiosrachaidh.
Tha buaidh beothalachd na co-phàirt seo an urra ri prefers-reduced-motionceist nam meadhanan. Faic an earrann gluasad lùghdaichte de na sgrìobhainnean ruigsinneachd againn .

Fhuair sin uile? Sgoinneil, chì sinn mar a tha iad ag obair le eisimpleirean.

Eisimpleir: Dèan comas air molaidhean innealan anns a h-uile àite

Is e aon dòigh air a h-uile comhairle inneal air duilleag a thòiseachadh a bhith gan taghadh a rèir am data-togglefeart:

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

Eisimpleirean

Gabh thairis air na ceanglaichean gu h-ìosal gus molaidhean innealan fhaicinn:

Teacs neach-àite gus cuid de cheanglaichean in -loidhne le molaidhean innealan a nochdadh. Chan eil ann an seo a-nis ach lìonadh, gun neach-marbhadh. Susbaint air a chuir an seo dìreach airson atharrais air làthaireachd teacsa fìor . Agus sin uile dìreach airson beachd a thoirt dhut air mar a bhiodh molaidhean innealan a’ coimhead nuair a bhiodh iad gan cleachdadh ann an suidheachaidhean fìor. Mar sin tha mi an dòchas gu bheil thu a-nis air faicinn mar a dh’ obraicheas na molaidhean innealan seo air ceanglaichean , aon uair ‘s gun cleachd thu iad air an làrach no am pròiseact agad fhèin .

Gabh thairis air na putanan gu h-ìosal gus na ceithir stiùiridhean innealan fhaicinn: mullach, deas, bonn, agus clì.

<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 àbhaisteach air a chur ris:

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

Cleachdadh

Bidh am plugan Tooltip a’ gineadh susbaint agus comharrachadh a rèir iarrtas, agus gu bunaiteach a’ cur molaidhean innealan às deidh an eileamaid brosnachaidh aca.

Cuir a-steach an inneal tro JavaScript:

$('#example').tooltip(options)
Overflow autoagusscroll

overflow: autoBidh suidheachadh Tooltip a’ feuchainn ri atharrachadh gu fèin-ghluasadach nuair a tha no overflow: scrollmar an tè againn aig soitheach pàrant .table-responsive, ach a chumas e fhathast suidheachadh an t-suidheachaidh thùsail. Gus fuasgladh fhaighinn, cuir an boundaryroghainn gu rud sam bith ach an luach bunaiteach, 'scrollParent', leithid 'window':

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

Marcaich

Chan eil anns a’ chomharradh a tha a dhìth airson inneal-toisich ach datafeart agus titleair an eileamaid HTML tha thu airson tip inneal a bhith agad. Tha an comharrachadh gineadh de inneal gu math sìmplidh, ged a tha feum air suidheachadh (gu gnàthach, air a shuidheachadh topleis a’ plugan).

A’ toirt air molaidhean innealan obrachadh dha luchd-cleachdaidh meur-chlàr agus teicneòlas cuideachail

Cha bu chòir dhut ach molaidhean innealan a chur ri eileamaidean HTML a tha gu traidiseanta ag amas air meur-chlàr agus eadar-ghnìomhach (leithid ceanglaichean no smachdan foirm). Ged a dh’ fhaodar fòcas a chuir air eileamaidean HTML neo-riaghailteach (leithid <span>s) le bhith a’ cur a’ bhuadh ris tabindex="0", cuiridh seo stadan taba a dh’ fhaodadh a bhith neònach agus troimh-chèile air eileamaidean neo-eadar-ghnìomhach airson luchd-cleachdaidh meur-chlàr, agus chan eil a’ mhòr-chuid de theicneòlasan cuideachaidh an-dràsta ag ainmeachadh a’ chomhairle san t-suidheachadh seo. A bharrachd air an sin, na bi an eisimeil a-mhàin hovermar inneal brosnachaidh do chomhairle, oir nì seo na molaidhean innealan agad do-dhèanta do luchd-cleachdaidh meur-chlàr.

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

Eileamaidean ciorramach

Chan eil eileamaidean leis a’ disabledfheart eadar-ghnìomhach, a’ ciallachadh nach urrainn do luchd-cleachdaidh fòcas a chuir orra, gluasad thairis no briogadh orra gus inneal-inneal (no popover) a bhrosnachadh. Mar dhòigh-obrach, bidh thu airson an inneal a chuir air bhog bho phasgan <div>no <span>, air a dheagh dhèanamh le fòcas meur-chlàr le bhith a’ cleachdadh tabindex="0", agus faighinn thairis pointer-eventsair an eileamaid air ciorramach.

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

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-, mar ann an data-animation="".

sanitizeThoir an aire nach urrainn an , sanitizeFnagus whiteListroghainnean a thoirt seachad airson adhbharan tèarainteachd a’ cleachdadh buadhan dàta.
Ainm Seòrsa Deònach Tuairisgeul
beothachadh boolean fìor Cuir a-steach eadar-ghluasad sgàineadh CSS chun a’ phìos inneal
soitheach sreang | eileamaid | breugach breugach

A’ ceangal an t-inneal ri eileamaid shònraichte. Eisimpleir: container: 'body'. Tha an roghainn seo gu sònraichte feumail leis gu bheil e a’ toirt cothrom dhut am bàrr inneil a shuidheachadh ann an sruth na sgrìobhainn faisg air an eileamaid brosnachaidh - a chuireas casg air a’ bhileag inneal bho bhith a’ seòladh air falbh bhon eileamaid brosnachaidh rè ath-mheudachadh uinneig.
dàil àireamh | nì 0

Dàil a’ sealltainn agus a’ falach an inneal (ms) - chan eil sin a’ buntainn ri seòrsa brosnachaidh làimhe

Ma thèid àireamh a thoirt seachad, thèid dàil a chuir air an dà sheiche / taisbeanadh

Tha structar an nì:delay: { "show": 500, "hide": 100 }
html boolean breugach

Ceadaich HTML anns a' ghoireas.

Ma tha e fìor, thèid tagaichean HTML anns na h-innealan-taice titlea thoirt seachad anns a’ phutan inneal. Ma tha e ceàrr, textthèid modh jQuery a chleachdadh gus susbaint a chuir a-steach don DOM.

Cleachd teacsa ma tha dragh ort mu ionnsaighean XSS.
suidheachadh sreang | gnìomh 'mullach'

Mar a shuidhicheas tu an t-inneal - auto | mullach | bun | clì | deas.
Nuair a thèid autoa shònrachadh, bidh e ag ath-stiùireadh an t-inneal inneal gu dinamach.

Nuair a thèid gnìomh a chleachdadh gus an suidheachadh a dhearbhadh, canar ris an inneal inneal DOM mar a’ chiad argamaid aige agus an eileamaid brosnachaidh nód DOM mar an dàrna fear. Tha an co- thistheacsa air a shuidheachadh don eisimpleir tooltip.
roghnaiche sreang | breugach breugach Ma thèid neach-taghaidh a thoirt seachad, thèid nithean tip inneal a thiomnadh gu na targaidean ainmichte. jQuery.onAnn an cleachdadh, tha seo air a chleachdadh gus molaidhean innealan a chuir an sàs ann an eileamaidean DOM ( taic) a tha air an cur ris gu dinamach . Faic seo agus eisimpleir fiosrachail .
teamplaid sreang '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Bunait HTML ri chleachdadh nuair a chruthaicheas tu an t-inneal.

Thèid na molaidhean innealan titlea thoirt a-steach don fhaidhle .tooltip-inner.

.arrowbidh e na shaighead na h-inneal.

Bu chòir gum biodh an .tooltipclas agus role="tooltip".
tiotal sreang | eileamaid | gnìomh ''

Luach an tiotail bunaiteach mura h title-eil am feart an làthair.

Ma thèid gnìomh a thoirt seachad, thèid a ghairm leis an t- thisseata iomraidh aige air an eileamaid ris a bheil am bàrr-inneal ceangailte.
spreidh sreang 'fòcas hover'

Mar a tha tooltip air a phiobrachadh - cliog | seachain | fòcas | làimhe. Faodaidh tu a dhol seachad air ioma-tharraing; dealachadh riu le àite.

'manual'a’ nochdadh gun tèid an t-inneal a chuir air adhart gu prògramach tro .tooltip('show'), .tooltip('hide')agus .tooltip('toggle')dòighean; chan urrainnear an luach seo a chur còmhla ri inneal brosnachaidh sam bith eile.

'hover'leis fhèin thig molaidhean innealan nach gabh a chuir a-steach tron ​​​​mheur-chlàr, agus cha bu chòir an cleachdadh ach ma tha dòighean eile ann airson an aon fhiosrachadh a thoirt do luchd-cleachdaidh meur-chlàr.
dheth àireamh | sreang | gnìomh 0

Cuir dheth a’ ghoireas inneal an coimeas ris an targaid aige.

Nuair a thèid gnìomh a chleachdadh gus an co-chothromachadh a dhearbhadh, canar rud ris anns a bheil an dàta cunntais mar a’ chiad argamaid aige. Feumaidh an gnìomh rud leis an aon structar a thilleadh. Tha an eileamaid brosnachaidh DOM air a thoirt seachad mar an dàrna argamaid.

Airson tuilleadh fiosrachaidh thoir sùil air na docaichean dheth Popper .
Suidheachadh tuiteam air ais sreang | eagar 'flip' Leig le sònrachadh dè an suidheachadh a chleachdas Popper nuair a thig e air ais. Airson tuilleadh fiosrachaidh thoir sùil air docaichean giùlan Popper
CustomClas sreang | gnìomh ''

Cuir clasaichean ris a’ phìos inneal nuair a thèid a shealltainn. Thoir an aire gun tèid na clasaichean sin a chur ris a bharrachd air clasaichean sam bith a tha air an sònrachadh san teamplaid. Gus grunn chlasaichean a chur ris, dealaich iad le beàrnan: 'a b'.

Faodaidh tu cuideachd gnìomh a thoirt seachad a bu chòir aon sreang a thilleadh anns a bheil ainmean clas a bharrachd.
crìoch sreang | eileamaid 'scrollParent' Crìochan cuibhreachaidh thar-shruth den phìos inneal. A’ gabhail ri luachan 'viewport', 'window', , 'scrollParent', no iomradh HTMLElement (JavaScript a-mhàin). Airson tuilleadh fiosrachaidh thoir sùil air na docaichean preventOverflow aig Popper .
slàinteil boolean fìor Dèan comas no cuir à comas an slàinteachas. Ma thèid a ghnìomhachadh 'template'agus 'title'thèid roghainnean a ghlanadh. Faic an roinn sanitizer anns na sgrìobhainnean JavaScript againn .
Liosta geal nì Luach bunaiteach Rud anns a bheil buadhan agus tagaichean ceadaichte
slàinteilFn null | gnìomh null An seo faodaidh tu an gnìomh slàintealachd agad fhèin a thoirt seachad. Faodaidh seo a bhith feumail mas fheàrr leat leabharlann sònraichte a chleachdadh airson slàinteachas a dhèanamh.
popperConfig null | nì null Gus an rèiteachadh Popper bunaiteach aig Bootstrap atharrachadh, faic rèiteachadh Popper

Feartan dàta airson molaidhean innealan fa leth

Faodar roghainnean airson molaidhean innealan fa leth a shònrachadh tro bhith a’ cleachdadh buadhan dàta, mar a chaidh a mhìneachadh gu h-àrd.

Dòighean-obrach

Modhan asyncronach agus eadar-ghluasadan

Tha a h-uile modh API asyncronach agus tòisichidh iad air eadar- ghluasad . Bidh iad a’ tilleadh chun neach-fios cho luath ‘s a thòisicheas an gluasad ach mus tig e gu crìch . A bharrachd air an sin, cha tèid aire a thoirt do ghairm modh air pàirt gluasaid .

Faic na sgrìobhainnean JavaScript againn airson tuilleadh fiosrachaidh .

$().tooltip(options)

A’ ceangal inneal-làimhseachaidh tip innealan ri cruinneachadh eileamaidean.

.tooltip('show')

A 'nochdadh comhairle inneal eileamaid. Tillidh e chun neach-fios mus deach an inneal a shealltainn (ie mus tachair an shown.bs.tooltiptachartas). Thathas den bheachd gu bheil seo na bhrosnachadh “làimhe” den t-inneal. Chan eil molaidhean innealan le tiotalan fad neoni air an taisbeanadh gu bràth.

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

.tooltip('hide')

A 'falach comhairle inneal eileamaid. Tilleadh chun neach-fios mus deach an inneal fhalach (ie mus tachair an hidden.bs.tooltiptachartas). Thathas den bheachd gu bheil seo na bhrosnachadh “làimhe” den t-inneal.

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

.tooltip('toggle')

Toglaidh comhairle inneal eileamaid. Tillidh e chun neach-fios mus deach an inneal a shealltainn no fhalach (ie mus tachair an tachartas). Thathas den bheachd gu bheil seo na bhrosnachadh “làimhe” den t-inneal.shown.bs.tooltiphidden.bs.tooltip

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

.tooltip('dispose')

A 'falach agus a' sgrios inneal inneal eileamaid. Chan urrainnear molaidhean innealan a chleachdas tiomnadh (a tha air an cruthachadh leis an selectorroghainn ) a sgrios leotha fhèin air eileamaidean brosnachaidh sliochd.

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

.tooltip('enable')

A’ toirt comas do chomhairle inneal eileamaid a bhith air a shealltainn. Tha molaidhean innealan air an comasachadh gu bunaiteach.

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

.tooltip('disable')

A’ toirt air falbh comas inneal-inneal eileamaid a shealltainn. Cha bhith e comasach an t-inneal-toisich a shealltainn ach ma tha e air ath-chomasachadh.

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

.tooltip('toggleEnabled')

Togaidh seo comas inneal eileamaid a shealltainn no fhalach.

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

.tooltip('update')

Ag ùrachadh suidheachadh comhairle inneal eileamaid.

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

Tachartasan

Seòrsa Tachartas Tuairisgeul
taisbean.bs.toolt Bidh an tachartas seo a’ losgadh sa bhad nuair showa chanar ris an dòigh eisimpleir.
air a thaisbeanadh.bs.tooltip Thèid an tachartas seo a chuir às nuair a bhios an inneal ri fhaicinn don neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh).
seiche.bs.tooltip Thèid an tachartas seo a losgadh sa bhad nuair a chaidh an hidedòigh eisimpleir a ghairm.
falaichte.bs.tooltip Thèid an tachartas seo a losgadh nuair a tha an inneal deiseil air a bhith falaichte bhon neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh).
cuir a-steach.bs.tooltip Thèid an tachartas seo a losgadh às deidh an show.bs.tooltiptachartais nuair a chaidh an teamplaid tooltip a chuir ris an DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})