Ebikozesebwa
Ebiwandiiko n'ebyokulabirako eby'okugattako ebikozesebwa bya Bootstrap eby'enjawulo ne CSS ne JavaScript nga okozesa CSS3 ku bifaananyi ebirina obulamu ne data-bs-attributes ez'okutereka emitwe egy'omu kitundu.
Okulaba okutwalira awamu
Ebintu by’olina okumanya ng’okozesa plugin ya tooltip:
- Ebikozesebwa byesigamye ku tterekero ly’ebitabo erya 3rd party Popper okusobola okuteeka mu kifo. Olina okussaamu popper.min.js nga tonnaba bootstrap.js oba kozesa
bootstrap.bundle.min.js
/bootstrap.bundle.js
erimu Popper okusobola obukodyo bw'ebikozesebwa okukola! - Tooltips are opt-in for performance reasons, kale olina okuzitandika ggwe kennyini .
- Ebikozesebwa ebirina emitwe egy’obuwanvu bwa zero tebiragibwangako.
- Laga
container: 'body'
okwewala ebizibu by'okulaga mu bitundu ebizibu ennyo (nga ebibinja byaffe eby'okuyingiza, ebibinja bya button, n'ebirala). - Okutandika obukodyo bw'ebikozesebwa ku bintu ebikwekebwa tekujja kukola.
- Tooltips for
.disabled
obadisabled
elements zirina okutandikibwa ku elementi y'okuzinga. - Bwe kitandika okuva ku hyperlinks eziwanvuwa layini eziwera, obukodyo bw’ebikozesebwa bujja kuba wakati. Kozesa
white-space: nowrap;
ku<a>
s yo okwewala enneeyisa eno. - Ebikozesebwa birina okukwekebwa nga elementi zaabwe ezikwatagana tezinnaggyibwa mu DOM.
- Tooltips zisobola okutandika okwebaza elementi munda mu shadow DOM.
prefers-reduced-motion
kubuuza kw'emikutu. Laba ekitundu
ky'ekiteeso ekikendeezeddwa mu biwandiiko byaffe eby'okutuuka ku bantu .
Ebyo byonna obifunye? Kirungi nnyo, ka tulabe engeri gye bakolamu n'ebyokulabirako ebimu.
Okugeza: Ssobozesa obukodyo bw’ebikozesebwa buli wamu
Engeri emu ey’okutandikawo obukodyo bwonna obw’ebikozesebwa ku lupapula yandibadde okubironda okusinziira ku ngeri yaabwe data-bs-toggle
:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
Eby’okulabirako
Hover ku links wammanga olabe ebikozesebwa:
Ekiwandiiko ky'ekifo okulaga ebimu ku biyungo ebiri mu layini n'obukodyo bw'ebikozesebwa. Ono kati filler yokka, tewali killer. Ebirimu ebiteekeddwa wano okukoppa okubeerawo kw'ebiwandiiko ebituufu byokka . Era ebyo byonna okusobola okukuwa ekirowoozo ku ngeri obukodyo bw’ebikozesebwa gye bwandirabise nga bukozesebwa mu mbeera ez’ensi entuufu. Kale nsuubira kati olabye engeri obukodyo buno ku links gye buyinza okukola mu nkola, bw’omala okubukozesa ku mukutu gwo oba pulojekiti yo.
Hover ku buttons wansi olabe ebiragiro ebina eby’okukozesa: waggulu, ku ddyo, wansi, ne kkono. Endagiriro ziraga endabirwamu nga okozesa Bootstrap mu 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>
Era nga HTML eya custom eyongezeddwaako:
<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>
Nga olina SVG:
Sass nga bwe kiri
Enkyukakyuka ezikyukakyuka
$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;
Enkozesa
Plugin y'obukodyo bw'ebikozesebwa ekola ebirimu n'obubonero ku bwetaavu, era nga bwe kibadde eteeka obukodyo bw'ebikozesebwa oluvannyuma lw'ekintu kyabwe ekiziyiza.
Trigger the tooltip nga oyita mu JavaScript:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
Okujjula auto
nescroll
Ekifo ky'ekintu ekikozesebwa kigezaako okukyusa mu ngeri ey'otoma nga ekintu ekizadde kirina overflow: auto
oba overflow: scroll
nga kyaffe .table-responsive
, naye kikyakuuma ekifo eky'okuteeka eky'olubereberye. Okugonjoola kino, teeka boundary
eky'okulonda (ku flip modifier ng'okozesa popperConfig
eky'okulonda) ku HTMLElement yonna okusazaamu omuwendo ogusookerwako, 'clippingParents'
, nga document.body
:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
Okuteeka obubonero
Markup ekyetaagisa ku tooltip ye data
attribute yokka era title
ku HTML element oyagala okuba ne tooltip. Obubonero obukoleddwa obw'ekintu ekiyitibwa tooltip kyangu nnyo, wadde nga kyetaaga ekifo (nga bwe kibadde, kiteekeddwawo ku top
by the plugin).
Okufuula obukodyo bw’ebikozesebwa okukola eri abakozesa kiiboodi ne tekinologiya ayamba
Olina okwongerako ebikozesebwa byokka ku bintu bya HTML ebitera okussa essira ku kibboodi era ebikwatagana (nga enkolagana oba ebifuga foomu). Newankubadde nga ebintu bya HTML ebitali bya bulijjo (nga <span>
s) bisobola okufuulibwa ebiteekeddwako essira nga kwongerako tabindex="0"
ekintu, kino kijja kwongerako okuyimirira kwa tabu okuyinza okunyiiza era okutabula ku bintu ebitali bikwatagana eri abakozesa kiiboodi, era tekinologiya asinga okuyamba mu kiseera kino talangirira kikozesebwa mu mbeera eno. Okugatta ku ekyo, tewesigama ku yokka hover
ng’ekiziyiza ky’ekintu kyo eky’ebikozesebwa, kubanga kino kijja kufuula obukodyo bwo obutasoboka kusitula eri abakozesa kiiboodi.
<!-- 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>
Ebintu ebilema
Elements ezirina disabled
attribute tezikwatagana, ekitegeeza nti abakozesa tebasobola kussa maanyi, hover, oba okuzinyiga okutandika tooltip (oba popover). Nga workaround, ojja kwagala okutandika tooltip okuva mu wrapper <div>
oba <span>
, ekisinga obulungi ekoleddwa keyboard-focusable nga okozesa 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>
Eby’okulondako
Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-bs-
, nga mu data-bs-animation=""
. Kakasa nti okyusa ekika kya case eky'erinnya ly'okulonda okuva ku camelCase okudda ku kebab-case ng'oyisa eby'okulonda ng'oyita mu data attributes. Okugeza, mu kifo ky’okukozesa data-bs-customClass="beautifier"
, kozesa data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
,
allowList
n'eby'okulonda tebisobola kuweebwa nga okozesa ebikwata ku data.
Erinnya | Okuwandiika | Okukosamu | Okunnyonnyola |
---|---|---|---|
animation |
boolean | true |
Kozesa enkyukakyuka ya CSS fade ku tooltip |
container |
olunyiriri | elementi | -kyaamu | false |
Egattako ekintu ekikozesebwa ku kintu ekigere. Okugeza: |
delay |
ennamba | ekintu | 0 |
Okulwawo okulaga n'okukweka tooltip (ms) - tekikwata ku kika kya manual trigger Singa ennamba eweebwa, okulwawo kukozesebwa ku byombi okukweka/okulaga Ensengeka y’ekintu eri nti: |
html |
boolean | false |
Kiriza HTML mu tooltip. Bwe kiba kituufu, HTML tags mu tooltip's Kozesa ebiwandiiko bw'oba weeraliikirira obulumbaganyi bwa XSS. |
placement |
olunyiriri | enkola | 'top' |
Engeri y'okuteeka ekintu ekikozesebwa mu kifo - auto | waggulu | wansi | ku kkono | kituufu. Omulimu bwe gukozesebwa okuzuula ekifo, guyitibwa nga tooltip DOM node ye argument yaayo esooka ate triggering element DOM node nga eyookubiri. Ensonga |
selector |
olunyiriri | -kyaamu | false |
Singa omusunsula aweebwa, ebintu ebikozesebwa bijja kuweebwa ebigendererwa ebiragiddwa. Mu nkola, kino kikozesebwa n’okukozesa ebikozesebwa ku bintu bya DOM ebigattibwako mu ngeri ey’amaanyi ( jQuery.on obuwagizi). Laba kino n'ekyokulabirako ekirimu amawulire . |
template |
akaguwa | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Base HTML okukozesa nga okola tooltip. Tooltip's
Ekintu eky'okuzinga ekisinga ebweru kirina okuba ne |
title |
olunyiriri | elementi | enkola | '' |
Omuwendo gw'omutwe ogusookerwako singa Singa omulimu guweebwa, gujja kuyitibwa nga |
trigger |
akaguwa | 'hover focus' |
Engeri tooltip gy'etandikibwamu - nyweza | hover | okussa essira | maniyo. Oyinza okuyisa ebizibu ebiwerako; zaawule n’ekifo.
|
fallbackPlacements |
ensengekera | ['top', 'right', 'bottom', 'left'] |
Lambulula ebifo eby'okudda emabega ng'owa olukalala lw'ebifo mu nsengekera (mu nsengeka y'okwegomba). Okumanya ebisingawo laba Popper's behavior docs |
boundary |
olunyiriri | ekintu | 'clippingParents' |
Ensalosalo y'okuziyiza okujjula okw'ekintu ekikozesebwa (ekola ku Popper's preventOverflow modifier yokka). Nga bwekiba 'clippingParents' era esobola okukkiriza HTMLElement reference (nga eyita mu JavaScript yokka). Okumanya ebisingawo laba Popper's detectOverflow docs . |
customClass |
olunyiriri | enkola | '' |
Okwongera kiraasi ku tooltip nga kiragiddwa. Weetegereze nti kiraasi zino zijja kwongerwako nga kwotadde ne kiraasi zonna eziragiddwa mu kifaananyi. Okwongerako kiraasi eziwera, zaawule n’ebifo: Osobola n'okuyisa omulimu ogulina okuzzaayo olunyiriri lumu olulimu amannya ga kiraasi ag'enjawulo. |
sanitize |
boolean | true |
Ssobozesa oba okulemesa okuyonja. Singa ekolebwa 'template' era 'title' options zijja sanitized. Laba ekitundu kya sanitizer mu biwandiiko byaffe ebya JavaScript . |
allowList |
ekintu | Omuwendo ogusookerwako | Ekintu ekirimu ebifaananyi ebikkirizibwa ne tags |
sanitizeFn |
null | enkola | null |
Wano osobola okugabira omulimu gwo ogw’okusiiga (sanitize function). Kino kiyinza okuba eky’omugaso singa oba oyagala okukozesa etterekero ly’ebitabo eryetongodde okukola sanitization. |
offset |
ensengekera | olunyiriri | enkola | [0, 0] |
Offset ya tooltip okusinziira ku target yaayo. Osobola okuyisa olunyiriri mu data attributes nga zirina emiwendo egyawuddwamu comma nga: Omulimu bwe gukozesebwa okuzuula offset, guyitibwa n’ekintu ekirimu popper placement, reference, ne popper rects nga argument yaayo esooka. Ekintu ekivaako DOM node kiyisibwa nga ensonga eyokubiri. Omulimu gulina okuzzaayo ensengekera erimu ennamba bbiri: . Okumanya ebisingawo laba Popper's offset docs . |
popperConfig |
null | ekintu | enkola | null |
Okukyusa ensengeka ya Popper eya Bootstrap esookerwako, laba ensengeka ya Popper . Omulimu bwe gukozesebwa okukola ensengeka ya Popper, guyitibwa n'ekintu ekirimu ensengeka ya Popper eya Bootstrap eya bulijjo. Kikuyamba okukozesa n'okugatta ekisookerwako n'ensengeka yo. Omulimu gulina okuzzaayo ekintu eky'okusengeka ekya Popper. |
Ebikwata ku data ku bikozesebwa ssekinnoomu
Enkola z’ebikozesebwa ssekinnoomu zisobola okulagibwa mu ngeri endala okuyita mu kukozesa ebikwata ku data, nga bwe kinnyonnyoddwa waggulu.
Okukozesa function nepopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Enkola
Enkola ezitakwatagana n’enkyukakyuka
Enkola zonna eza API tezikwatagana era zitandika enkyukakyuka . Zidda eri oyo akubye amangu ddala ng'enkyukakyuka etandise naye nga tennaggwa . Okugatta ku ekyo, okuyita enkola ku kitundu ekikyukakyuka kujja kubuusibwa amaaso .
Laba ebiwandiiko byaffe ebya JavaScript okumanya ebisingawo .
okulaga
Abikkula ekiwandiiko ky'ekintu ekiyitibwa tooltip. Edda eri oyo akubira nga tooltip tennalagibwa ddala (kwe kugamba nga shown.bs.tooltip
ekintu tekinnabaawo). Kino kitwalibwa nga “manual” triggering ya tooltip. Ebikozesebwa ebirina emitwe egy’obuwanvu bwa zero tebiragibwangako.
tooltip.show()
okweekweeka
Ekweka ekiwandiiko ky'ekintu ekiyitibwa tooltip. Edda eri oyo akubira nga tooltip tennakwekebwa ddala (kwe kugamba nga hidden.bs.tooltip
ekintu tekinnabaawo). Kino kitwalibwa nga “manual” triggering ya tooltip.
tooltip.hide()
okukyusakyusa
Ekyusakyusa ekintu ekiyitibwa tooltip. Edda eri oyo akubira nga tooltip tennalagibwa oba okukwekebwa ddala (kwe kugamba nga shown.bs.tooltip
oba hidden.bs.tooltip
ekintu tekinnabaawo). Kino kitwalibwa nga “manual” triggering ya tooltip.
tooltip.toggle()
okusuula
Ekweka era n'esaanyaawo ekintu ekikozesebwa (Eggyawo data eterekeddwa ku kintu kya DOM). Tooltips ezikozesa delegation (ezitondebwa nga tukozesa option )selector
teziyinza kusaanawo kinnoomu ku descendant trigger elements.
tooltip.dispose()
okuyinzisa
Ewa ekintu ekiyitibwa tooltip obusobozi okulagibwa. Ebikozesebwa bikozesebwa nga bwe kibadde.
tooltip.enable()
okulemala
Eggyawo obusobozi bw'ekintu ekiyitibwa tooltip okulagibwa. Ekiwandiiko ky'ebikozesebwa kijja kusobola okulagibwa singa kiddamu okusobozesa.
tooltip.disable()
toggleEsobozeseddwa
Ekyusa obusobozi bw'ekintu ekiyitibwa tooltip okulagibwa oba okukwekebwa.
tooltip.toggleEnabled()
okututegeza
Ezza obuggya ekifo ky'ekintu ekiyitibwa tooltip.
tooltip.update()
getEkyokulabirako
Enkola ya static ekusobozesa okufuna tooltip instance ekwatagana ne DOM element
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
funaObaTondawoEkifaananyi
Enkola ya static ekusobozesa okufuna tooltip instance ekwatagana ne DOM element, oba okukola empya singa teyali etandikibwawo
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
Ebibaddewo
Ekika ky’ekintu ekibaawo | Okunnyonnyola |
---|---|
show.bs.tooltip |
Ekintu kino kikuba amangu ddala nga show enkola ya instance eyitiddwa. |
shown.bs.tooltip |
Ekintu kino kikubwa nga tooltip ekoleddwa okulabika eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa). |
hide.bs.tooltip |
Ekintu kino kikubwa amangu ddala nga hide enkola ya instance eyitiddwa. |
hidden.bs.tooltip |
Ekintu kino kikubwa nga tooltip emaze okukwekebwa okuva eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa). |
inserted.bs.tooltip |
Ekintu kino kigobwa oluvannyuma show.bs.tooltip lw'ekintu nga ekifaananyi ky'ekikozesebwa kyongeddwa ku DOM. |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()