Buuka ku bigambo ebikulu Buuka ku docs navigation
in English

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.jserimu 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 .disabledoba disabledelements 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.
Nga bwekiba, ekitundu kino kikozesa ekizimbiddwamu ekirongoosa ebirimu, ekiggyamu ebintu byonna ebya HTML ebitakkirizibwa mu bulambulukufu. Laba ekitundu kya sanitizer mu biwandiiko byaffe ebya JavaScript okumanya ebisingawo.
Ekikolwa kya animation eky'ekitundu kino kyesigamye ku prefers-reduced-motionkubuuza 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 autonescroll

Ekifo ky'ekintu ekikozesebwa kigezaako okukyusa mu ngeri ey'otoma nga ekintu ekizadde kirina overflow: autooba overflow: scrollnga kyaffe .table-responsive, naye kikyakuuma ekifo eky'okuteeka eky'olubereberye. Okugonjoola kino, teeka boundaryeky'okulonda (ku flip modifier ng'okozesa popperConfigeky'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 dataattribute yokka era titleku HTML element oyagala okuba ne tooltip. Obubonero obukoleddwa obw'ekintu ekiyitibwa tooltip kyangu nnyo, wadde nga kyetaaga ekifo (nga bwe kibadde, kiteekeddwawo ku topby 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 hoverng’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 disabledattribute 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".

Weetegereze nti olw'ensonga z'obukuumi sanitize, sanitizeFn, allowListn'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: container: 'body'. Enkola eno ya mugaso nnyo mu ngeri nti ekusobozesa okuteeka ekintu ekikozesebwa mu kutambula kw'ekiwandiiko okumpi n'ekintu ekitandika - ekijja okulemesa ekintu ekikozesebwa okulengejja okuva ku kintu ekitandika mu kiseera ky'okukyusa obunene bw'eddirisa.

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:delay: { "show": 500, "hide": 100 }

html boolean false

Kiriza HTML mu tooltip.

Bwe kiba kituufu, HTML tags mu tooltip's titlezijja kulagibwa mu tooltip. Bwe kiba kya bulimba, innerTexteby'obugagga bijja kukozesebwa okuyingiza ebirimu mu DOM.

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.
Bwe autokinaalagirwa, kijja kuddamu okulungamya ekintu ekikozesebwa mu ngeri ey’amaanyi.

Omulimu bwe gukozesebwa okuzuula ekifo, guyitibwa nga tooltip DOM node ye argument yaayo esooka ate triggering element DOM node nga eyookubiri. Ensonga thiseteekeddwa ku kifaananyi ky'ekintu ekikozesebwa.

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.onobuwagizi). 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 titlezijja kufukibwa mu .tooltip-inner.

.tooltip-arrowejja kufuuka akasaale k'ekintu ekikozesebwa.

Ekintu eky'okuzinga ekisinga ebweru kirina okuba ne .tooltipkiraasi ne role="tooltip".

title olunyiriri | elementi | enkola ''

Omuwendo gw'omutwe ogusookerwako singa titleekintu tekibaawo.

Singa omulimu guweebwa, gujja kuyitibwa nga thisreference yaago eteekeddwa ku elementi tooltip gye yegattibwako.

trigger akaguwa 'hover focus'

Engeri tooltip gy'etandikibwamu - nyweza | hover | okussa essira | maniyo. Oyinza okuyisa ebizibu ebiwerako; zaawule n’ekifo.

'manual'kiraga nti ekiwandiiko ky’ebikozesebwa kijja kutandikibwawo mu pulogulaamu nga kiyita mu .show(), .hide()n’enkola .toggle(); omuwendo guno teguyinza kugattibwa na kiziyiza kirala kyonna.

'hover'ku bwayo kijja kuvaamu obukodyo bw’ebikozesebwa obutasobola kutandikibwawo nga buyita mu kibboodi, era zirina okukozesebwa singa enkola endala ez’okutuusa amawulire ge gamu eri abakozesa kiiboodi zibaawo.

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: 'class-1 class-2'.

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:data-bs-offset="10,20"

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: .[skidding, distance]

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.tooltipekintu 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.tooltipekintu 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.tooltipoba hidden.bs.tooltipekintu 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 showenkola 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 hideenkola 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.tooltiplw'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()