Rach gu prìomh shusbaint Air adhart gu seòladh docs
in English

Molaidhean innealan

Sgrìobhainnean agus eisimpleirean airson molaidhean inneal Bootstrap àbhaisteach a chuir ris le CSS agus JavaScript a’ cleachdadh CSS3 airson beòthachaidhean agus buadhan dàta-bs 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!
  • 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-bs-togglefeart:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

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ì. Tha stiùiridhean air an nochdadh nuair a bhios tu a’ cleachdadh Bootstrap ann an RTL.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-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-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Le SVG:

Sass

Caochlaidhean

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

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:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
Overflow autoagusscroll

Bidh suidheachadh Tooltip a’ feuchainn ri atharrachadh gu fèin-ghluasadach nuair a tha no mar an tè againn aig soitheach pàrant , ach a chumas e fhathast suidheachadh an t-suidheachaidh thùsail. Gus seo fhuasgladh, suidhich an roghainn (airson an inneal flip a’ cleachdadh an roghainn) gu HTMLElement sam bith gus faighinn thairis air an luach bunaiteach, , leithid :overflow: autooverflow: scroll.table-responsiveboundarypopperConfig'clippingParents'document.body

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

Marcaich

Chan eil anns a’ chomharradh a tha a dhìth airson inneal-toisich ach datafeart agus titleair an eileamaid HTML a tha thu ag iarraidh tip inneal. Tha an comharrachadh gineadh de chomhairle inneal caran 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-bs-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="tooltip-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 bhrosnachadh bho phasgan <div>no <span>, air a dhèanamh le fòcas meur-chlàr le bhith a’ cleachdadh tabindex="0".

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" 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-bs-, mar ann an data-bs-animation="". Dèan cinnteach gun atharraich thu an seòrsa cùis den ainm roghainn bho camelCase gu kebab-case nuair a thèid thu seachad air na roghainnean tro bhuadhan dàta. Mar eisimpleir, an àite a bhith a’ cleachdadh data-bs-customClass="beautifier", cleachd data-bs-custom-class="beautifier".

Thoir an aire nach urrainn airson adhbharan tèarainteachd an sanitize, sanitizeFn, agus allowListroghainnean a thoirt seachad a’ cleachdadh buadhan dàta.
Ainm Seòrsa Deònach Tuairisgeul
animation boolean true Cuir a-steach eadar-ghluasad sgàineadh CSS chun a’ phìos inneal
container sreang | eileamaid | breugach false

A’ ceangal a’ bhileag-taice 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.

delay àireamh | nì 0

Dàil a’ sealltainn agus a’ falach an t-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 false

Leig le HTML anns a' ghoireas.

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

Cleachd teacsa ma tha dragh ort mu ionnsaighean XSS.

placement sreang | gnìomh 'top'

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.

selector sreang | breugach false 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 .
template sreang '<div class="tooltip" role="tooltip"><div class="tooltip-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.

.tooltip-arrowbidh e na shaighead na h-inneal.

Bu chòir gum biodh an .tooltipclas agus role="tooltip".

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

trigger sreang 'hover focus'

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 .show(), .hide()agus .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.

fallbackPlacements eagar ['top', 'right', 'bottom', 'left'] Mìnich greisean gnìomhachais le bhith a’ toirt seachad liosta de dh’àiteachan ann an òrdugh (ann an òrdugh roghainn). Airson tuilleadh fiosrachaidh thoir sùil air docaichean giùlan Popper
boundary sreang | eileamaid 'clippingParents' Crìoch cuibhreachaidh thar-shruth den phìos inneal (a ’buntainn a-mhàin ri inneal-atharrachaidh preventOverflow Popper). Gu gnàthach tha e 'clippingParents'agus gabhaidh e ri iomradh HTMLElement (tro JavaScript a-mhàin). Airson tuilleadh fiosrachaidh thoir sùil air na docaichean detectOverflow aig Popper .
customClass 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: 'class-1 class-2'.

Faodaidh tu cuideachd gnìomh a thoirt seachad a bu chòir aon sreang a thilleadh anns a bheil ainmean clas a bharrachd.

sanitize boolean true 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 .
allowList Luach bunaiteach Rud anns a bheil buadhan agus tagaichean ceadaichte
sanitizeFn 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.
offset eagar | sreang | gnìomh [0, 0]

Cuir dheth a’ ghoireas inneal an coimeas ris an targaid aige. Faodaidh tu sreang a thoirt seachad ann am buadhan dàta le luachan sgaraichte le cromag mar:data-bs-offset="10,20"

Nuair a thèid gnìomh a chleachdadh gus an co-chothromachadh a dhearbhadh, canar le nì anns a bheil suidheachadh popper, an iomradh, agus popper a’ chiad argamaid aige. Tha an eileamaid brosnachaidh DOM air a thoirt seachad mar an dàrna argamaid. Feumaidh an gnìomh sreath a thilleadh le dà àireamh: .[skidding, distance]

Airson tuilleadh fiosrachaidh thoir sùil air na docaichean dheth Popper .

popperConfig null | nì | gnìomh null

Gus an rèiteachadh Popper bunaiteach aig Bootstrap atharrachadh, faic rèiteachadh Popper .

Nuair a thèid gnìomh a chleachdadh gus an rèiteachadh Popper a chruthachadh, tha e air a ghairm le nì anns a bheil an rèiteachadh Popper bunaiteach aig Bootstrap. Cuidichidh e thu le bhith a’ cleachdadh agus a’ ceangal a’ bhunait leis an rèiteachadh agad fhèin. Feumaidh an gnìomh rud rèiteachaidh a thilleadh airson 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.

A 'cleachdadh gnìomh lepopperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

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 .

seall

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.

tooltip.show()

seiche

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àmh-làimhe” den t-inneal.

tooltip.hide()

tog

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àmh-làimhe” den t-inneal.shown.bs.tooltiphidden.bs.tooltip

tooltip.toggle()

cuidhteas

A’ falach agus a’ sgrios inneal-inneal eileamaid (A’ toirt air falbh dàta air a stòradh air an eileamaid DOM). Chan urrainnear molaidhean innealan a chleachdas tiomnadh (a thèid a chruthachadh leis an selectorroghainn ) a sgrios leotha fhèin air eileamaidean brosnachaidh sliochd.

tooltip.dispose()

comas a thoirt

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

tooltip.enable()

chur à comas

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.

tooltip.disable()

toggleEnable

Togaidh seo comas inneal eileamaid a shealltainn no fhalach.

tooltip.toggleEnabled()

ùrachadh

Ag ùrachadh suidheachadh comhairle inneal eileamaid.

tooltip.update()

faighinn a-mach

Modh statach a leigeas leat an t-eisimpleir tooltip fhaighinn co-cheangailte ri eileamaid DOM

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

faighOrCreateInstance

Dòigh statach a leigeas leat an t-eisimpleir tooltip fhaighinn co-cheangailte ri eileamaid DOM, no fear ùr a chruthachadh gun fhios nach deach a thòiseachadh

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

Tachartasan

Seòrsa tachartas Tuairisgeul
show.bs.tooltip Bidh an tachartas seo a’ losgadh sa bhad nuair showa chanar ris an dòigh eisimpleir.
shown.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).
hide.bs.tooltip Thèid an tachartas seo a losgadh sa bhad nuair a chaidh an hidedòigh eisimpleir a ghairm.
hidden.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).
inserted.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.
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()