Konsiletoj
Dokumentado kaj ekzemploj por aldoni kutimajn Bootstrap-konsiletojn kun CSS kaj JavaScript uzante CSS3 por kuraĝigoj kaj datumoj-bs-atributoj por loka titolstokado.
Superrigardo
Aferoj sciindaj kiam uzado de la konsileto-kromaĵo:
- Konsiletoj dependas de la tria-partia biblioteko Popper por poziciigado. Vi devas inkluzivi popper.min.js antaŭ bootstrap.js aŭ uzi
bootstrap.bundle.min.js
/bootstrap.bundle.js
kiu enhavas Popper por ke konsiletoj funkciu! - Konsiletoj estas elekteblaj pro agado-kialoj, do vi devas pravigi ilin mem .
- Konsiletoj kun nullongaj titoloj neniam estas montrataj.
- Specifu
container: 'body'
por eviti bildigajn problemojn en pli kompleksaj komponantoj (kiel niaj eniggrupoj, butongrupoj, ktp). - Deĉenigi konsiletojn pri kaŝitaj elementoj ne funkcios.
- Konsiletoj por
.disabled
aŭdisabled
elementoj devas esti ekigitaj sur envolvaĵelemento. - Kiam ĝi estas ekigita de hiperligoj kiuj ampleksas plurajn liniojn, konsiletoj estos centritaj. Uzu
white-space: nowrap;
sur via<a>
por eviti ĉi tiun konduton. - Konsiletoj devas esti kaŝitaj antaŭ ol iliaj respondaj elementoj estis forigitaj de la DOM.
- Konsiletoj povas esti ekigitaj danke al elemento ene de ombro DOM.
prefers-reduced-motion
amaskomunikila demando. Vidu la
sekcion pri reduktita moviĝo de nia dokumentaro pri alirebleco .
Ĉu vi havas ĉion tion? Bonege, ni vidu kiel ili funkcias kun kelkaj ekzemploj.
Ekzemplo: Ebligu konsiletojn ĉie
Unu maniero pravalorigi ĉiujn konsiletojn sur paĝo estus elekti ilin laŭ ilia data-bs-toggle
atributo:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
Ekzemploj
Ŝvebu super la subaj ligiloj por vidi konsiletojn:
Anstataŭilo-teksto por montri kelkajn enliniajn ligilojn kun konsiletoj. Ĉi tio nun estas nur plenigaĵo, neniu murdinto. Enhavo metita ĉi tie nur por imiti la ĉeeston de reala teksto . Kaj ĉio tio nur por doni al vi ideon pri kiel aspektus konsiletoj se uzataj en realaj situacioj. Do espereble vi nun vidis kiel ĉi tiuj konsiletoj pri ligiloj povas funkcii praktike, post kiam vi uzas ilin en via propra retejo aŭ projekto.
Ŝvebu super la subaj butonoj por vidi la kvar konsiletojn: supre, dekstre, malsupre kaj maldekstre. Direktoj estas spegulitaj kiam vi uzas Bootstrap en 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>
Kaj kun kutima HTML aldonita:
<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>
Kun SVG:
Sass
Variabloj
$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;
Uzado
La kromkonsileto generas enhavon kaj markadon laŭpeto, kaj defaŭlte metas konsiletojn post ilia ellasilelemento.
Ekfunkciigu la konsileton per JavaScript:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
Superfluo auto
kajscroll
Konsileto-pozicio provas aŭtomate ŝanĝiĝi kiam gepatra ujo havas overflow: auto
aŭ overflow: scroll
ŝatas nian .table-responsive
, sed daŭre konservas la poziciigon de la origina lokigo. Por solvi ĉi tion, agordu la boundary
opcion (por la flip modifilo uzante la popperConfig
opcion) al iu ajn HTMLElement por anstataŭi la defaŭltan valoron, 'clippingParents'
kiel ekzemple document.body
:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
Markado
La bezonata markado por konsileto estas nur data
atributo kaj title
sur la HTML-elemento vi deziras havi konsileton. La generita markado de konsileto estas sufiĉe simpla, kvankam ĝi postulas pozicion (defaŭlte, agordita top
de la kromaĵo).
Funkcii konsiletojn por uzantoj de klavaro kaj helpteknologio
Vi nur aldonu konsiletojn al HTML-elementoj, kiuj tradicie estas klavar-fokuseblaj kaj interagaj (kiel ekzemple ligiloj aŭ formularaj kontroloj). Kvankam arbitraj HTML-elementoj (kiel <span>
s) povas esti enfokusigitaj per aldonado de la tabindex="0"
atributo, tio aldonos eble ĝenajn kaj konfuzajn tabuladojn sur ne-interagaj elementoj por klavaruzantoj, kaj la plej multaj helpaj teknologioj nuntempe ne anoncas la konsileton en ĉi tiu situacio. Aldone, ne fidu nur hover
kiel la ellasilon por via konsileto, ĉar ĉi tio faros viajn konsiletojn neeble ekfunkcieblaj por klavaruzantoj.
<!-- 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>
Malebligitaj elementoj
Elementoj kun la disabled
atributo ne estas interagaj, tio signifas, ke uzantoj ne povas fokusi, ŝvebi aŭ klaki ilin por ekigi konsileton (aŭ popover). Kiel solvo, vi volos ekigi la konsileton de envolvaĵo <div>
aŭ <span>
, ideale farita klavar-fokusebla per 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>
Opcioj
Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-bs-
, kiel en data-bs-animation=""
. Nepre ŝanĝu la kazon de la opcionomo de camelCase al kebab-case kiam vi transdonas la opciojn per datumaj atributoj. Ekzemple, anstataŭ uzi data-bs-customClass="beautifier"
, uzu data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, kaj
allowList
ne povas esti provizitaj per datumaj atributoj.
Nomo | Tajpu | Defaŭlte | Priskribo |
---|---|---|---|
animation |
bulea | true |
Apliki CSS-fade-transiron al la konsileto |
container |
ŝnuro | elemento | malvera | false |
Aldonas la konsileton al specifa elemento. Ekzemplo: |
delay |
nombro | objekto | 0 |
Prokrasto montri kaj kaŝi la konsileton (ms) - ne validas por mana ellasiltipo Se nombro estas provizita, prokrasto estas aplikata al ambaŭ kaŝi/montri Objekta strukturo estas: |
html |
bulea | false |
Permesu HTML en la konsileto. Se vera, HTML-etikedoj en la konsileto Uzu tekston se vi zorgas pri XSS-atakoj. |
placement |
ŝnuro | funkcio | 'top' |
Kiel poziciigi la konsileton - aŭtomata | supro | fundo | maldekstra | ĝuste. Kiam funkcio estas uzata por determini la lokigon, ĝi estas vokita kun la konsileto DOM-nodo kiel sia unua argumento kaj la ekiganta elemento DOM-nodo kiel sia dua. La |
selector |
ŝnuro | malvera | false |
Se elektilo estas disponigita, konsiletaj objektoj estos delegitaj al la specifitaj celoj. En praktiko, ĉi tio ankaŭ estas uzata por apliki konsiletojn al dinamike aldonitaj DOM-elementoj ( jQuery.on subteno). Vidu ĉi tion kaj informan ekzemplon . |
template |
ŝnuro | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Baza HTML por uzi dum kreado de la konsileto. La konsileto
La plej ekstera envolvaĵelemento devus havi la |
title |
ŝnuro | elemento | funkcio | '' |
Defaŭlta titolvaloro se Se funkcio estas donita, ĝi estos vokita kun ĝia |
trigger |
ŝnuro | 'hover focus' |
Kiel la konsileto estas ekigita - alklaku | ŝvebi | fokuso | manlibro. Vi povas pasi plurajn ellasilon; apartigu ilin per spaco.
|
fallbackPlacements |
tabelo | ['top', 'right', 'bottom', 'left'] |
Difinu rezervlokigojn disponigante liston de allokigoj en tabelo (laŭ ordo de prefero). Por pliaj informoj referu al la kondutdokumentoj de Popper |
boundary |
ŝnuro | elemento | 'clippingParents' |
Superflua limlimo de la konsileto (validas nur por la modifilo preventOverflow de Popper). Defaŭlte ĝi estas 'clippingParents' kaj povas akcepti HTMLElement-referencon (nur per JavaScript). Por pliaj informoj, rigardu la dokumentojn de detectOverflow de Popper . |
customClass |
ŝnuro | funkcio | '' |
Aldonu klasojn al la konsileto kiam ĝi montriĝas. Notu, ke ĉi tiuj klasoj estos aldonitaj aldone al iuj klasoj specifitaj en la ŝablono. Por aldoni plurajn klasojn, apartigu ilin per spacoj: Vi ankaŭ povas pasi funkcion, kiu devus resendi ununuran ĉenon enhavantan kromajn klasnomojn. |
sanitize |
bulea | true |
Ebligu aŭ malŝalti la sanigon. Se aktivigitaj 'template' kaj 'title' opcioj estos sanigitaj. Vidu la sekcion pri sanigilo en nia JavaScript-dokumentaro . |
allowList |
objekto | Defaŭlta valoro | Objekto kiu enhavas permesitajn atributojn kaj etikedojn |
sanitizeFn |
nulo | funkcio | null |
Ĉi tie vi povas provizi vian propran sanigan funkcion. Ĉi tio povas esti utila se vi preferas uzi dediĉitan bibliotekon por fari sanigon. |
offset |
tabelo | ŝnuro | funkcio | [0, 0] |
Ofseto de la konsileto rilate al ĝia celo. Vi povas pasi ĉenon en datumaj atributoj kun komoj apartigitaj valoroj kiel: Kiam funkcio estas uzata por determini la ofseton, ĝi estas vokita kun objekto enhavanta la popper-lokigon, la referencon kaj popper-rektojn kiel sia unua argumento. La ekiga elemento DOM-nodo estas pasita kiel la dua argumento. La funkcio devas redoni tabelon kun du nombroj: . Por pliaj informoj raportu al la ofsetaj dokumentoj de Popper . |
popperConfig |
nulo | objekto | funkcio | null |
Por ŝanĝi la defaŭltan Popper-agordon de Bootstrap, vidu la agordon de Popper . Kiam funkcio estas uzata por krei la Popper-agordon, ĝi estas vokita kun objekto kiu enhavas la defaŭltan Popper-agordon de Bootstrap. Ĝi helpas vin uzi kaj kunfandi la defaŭltan kun via propra agordo. La funkcio devas resendi agordan objekton por Popper. |
Datumaj atributoj por individuaj konsiletoj
Opcioj por individuaj konsiletoj povas alternative esti specifitaj per la uzo de datumaj atributoj, kiel klarigite supre.
Uzante funkcion kunpopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Metodoj
Nesinkronaj metodoj kaj transiroj
Ĉiuj API-metodoj estas nesinkronaj kaj komencas transiron . Ili revenas al la alvokanto tuj kiam la transiro estas komencita sed antaŭ ol ĝi finiĝas . Krome, metodovoko sur transira komponento estos ignorita .
montri
Rivelas la konsileton de elemento. Revenas al la alvokanto antaŭ ol la konsileto efektive estis montrita (te antaŭ ol la shown.bs.tooltip
evento okazas). Ĉi tio estas konsiderata "mana" ekigado de la konsileto. Konsiletoj kun nullongaj titoloj neniam estas montrataj.
tooltip.show()
kaŝi
Kaŝas la konsileton de elemento. Revenas al la alvokanto antaŭ ol la konsileto efektive estis kaŝita (te antaŭ ol la hidden.bs.tooltip
evento okazas). Ĉi tio estas konsiderata "mana" ekigado de la konsileto.
tooltip.hide()
baskuli
Ŝaltas la konsileton de elemento. Revenas al la alvokanto antaŭ ol la konsileto efektive estis montrita aŭ kaŝita (t.e. antaŭ ol la shown.bs.tooltip
evento hidden.bs.tooltip
okazas). Ĉi tio estas konsiderata "mana" ekigado de la konsileto.
tooltip.toggle()
disponi
Kaŝas kaj detruas la konsileton de elemento (Forigas konservitajn datumojn sur la DOM-elemento). Konsiletoj kiuj uzas delegacion (kiuj estas kreitaj per la selector
opcio ) ne povas esti individue detruitaj sur posteulaj ellasilelementoj.
tooltip.dispose()
ebligi
Donas al la konsileto de elemento la kapablon esti montrita. Konsiletoj estas ebligitaj defaŭlte.
tooltip.enable()
malŝalti
Forigas la kapablon por montri la konsileton de elemento. La konsileto nur povos esti montrita se ĝi estas reebligita.
tooltip.disable()
baskuligi Ebligita
Ŝaltas la kapablon por ke la konsileto de elemento estu montrita aŭ kaŝita.
tooltip.toggleEnabled()
ĝisdatigo
Ĝisdatigas la pozicion de la konsileto de elemento.
tooltip.update()
getInstance
Senmova metodo, kiu ebligas al vi akiri la konsileton asociitan kun DOM-elemento
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
getOrCreateInstance
Senmova metodo, kiu ebligas al vi akiri la konsileton-instancon asociitan kun DOM-elemento, aŭ krei novan se ĝi ne estis pravigita.
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
Eventoj
Eventa tipo | Priskribo |
---|---|
show.bs.tooltip |
Ĉi tiu evento tuj ekfunkciigas kiam la show ekzempla metodo estas vokita. |
shown.bs.tooltip |
Ĉi tiu evento estas lanĉita kiam la konsileto estas videbla por la uzanto (atendos ke CSS-transiroj finiĝos). |
hide.bs.tooltip |
Ĉi tiu evento estas lanĉita tuj kiam la hide ekzempla metodo estas vokita. |
hidden.bs.tooltip |
Ĉi tiu evento estas lanĉita kiam la konsileto finiĝis kaŝita de la uzanto (atendos ke CSS-transiroj finiĝos). |
inserted.bs.tooltip |
Ĉi tiu evento estas lanĉita post la show.bs.tooltip evento kiam la konsileto ŝablono estis aldonita al la DOM. |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()