in English

Ebikozesebwa

Ebiwandiiko n'ebyokulabirako eby'okugattako ebikozesebwa eby'enjawulo ebya Bootstrap ne CSS ne JavaScript nga okozesa CSS3 ku animations ne data-attributes okutereka emitwe egy'omu kitundu.

Okulaba okutwalira awamu

Ebintu by’olina okumanya ng’okozesa plugin ya tooltip:

  • Tooltips zeesigamye ku 3rd party library 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!
  • Bw'oba ozimba JavaScript yaffe okuva ku nsibuko, kyetaagisautil.js .
  • 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 okubilonda okusinziira ku ngeri yaabwe data-toggle:

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

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.

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

Era nga HTML eya custom eyongezeddwaako:

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

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:

$('#example').tooltip(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, teeka boundaryeky'okulonda ku kintu kyonna okuggyako omuwendo ogusookerwako, 'scrollParent', nga 'window':

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

Okuteeka obubonero

Markup ekyetaagisa ku tooltip ye dataattribute yokka era titleku HTML element oyagala okuba ne tooltip. Obubonero obukoleddwa obw'ekintu ekikozesebwa buba bwangu nnyo, wadde nga kyetaagisa ekifo (nga bwe kibadde, kiteekeddwawo topnga 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 eby’okwesalirawo (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-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>

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 ku wrapper <div>oba <span>, ekirungi ekoleddwa keyboard-focusable nga okozesa tabindex="0", era override the pointer-eventsku elementi eremeddwa.

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

Eby’okulondako

Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-, nga mu data-animation="".

Weetegereze nti olw'ensonga z'obukuumi sanitize, sanitizeFnn'eby'okulonda whiteListtebisobola kuweebwa nga okozesa ebikwata ku data.
Erinnya Okuwandiika Okukosamu Okunnyonnyola
okukola ebifaananyi ebirina obulamu boolean kituufu Kozesa enkyukakyuka ya CSS fade ku tooltip
ekintu ekirimu ebintu olunyiriri | elementi | -kyaamu -kyaamu

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.
okulwawo ennamba | ekintu 0.

Okulwawo okulaga n'okukweka tooltip (ms) - tekukwata 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 -kyaamu

Kiriza HTML mu tooltip.

Bwe kiba kituufu, HTML tags mu tooltip's titlezijja kulagibwa mu tooltip. Bwe kiba kya bulimba, enkola ya jQuery textejja kukozesebwa okuyingiza ebirimu mu DOM.

Kozesa ebiwandiiko bw'oba weeraliikirira obulumbaganyi bwa XSS.
okuteekebwa mu kifo olunyiriri | enkola 'waggulu'

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 thiseteekebwa ku nkola ya tooltip.
omusunsuzi olunyiriri | -kyaamu -kyaamu 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 .
ekifaananyi ky’ebifaananyi akaguwa '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML okukozesa nga okola tooltip.

Tooltip's titlezijja kufukibwa mu .tooltip-inner.

.arrowejja kufuuka akasaale k'ekintu ekikozesebwa.

Ekintu eky'okuzinga ekisinga ebweru kirina okuba ne .tooltipkiraasi ne role="tooltip".
omutwe olunyiriri | elementi | enkola '' .

Omuwendo gw'omutwe ogusookerwako singa titleekintu tekibaawo.

Singa omulimu guweebwa, gujja kuyitibwa nga thisreference yaago eteekeddwa ku elementi tooltip gye yegattibwako.
okusiikula akaguwa 'okussa essira ku 'hover'.

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 .tooltip('show'), .tooltip('hide')n’enkola .tooltip('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.
offset ennamba | olunyiriri | enkola 0.

Offset ya tooltip okusinziira ku target yaayo.

Omulimu bwe gukozesebwa okuzuula offset, guyitibwa n’ekintu ekirimu data ya offset nga ensonga yaakyo esooka. Omulimu gulina okuzzaayo ekintu ekirina ensengeka y’emu. Ekintu ekivaako DOM node kiyisibwa nga ensonga eyokubiri.

Okumanya ebisingawo laba Popper's offset docs .
fallbackOkuteeka mu kifo olunyiriri | ensengekera 'okukyuusa' Kiriza okulaga ekifo Popper ky'anaakozesa ku fallback. Okumanya ebisingawo laba Popper's behavior 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: 'a b'.

Osobola n'okuyisa omulimu ogulina okuzzaayo olunyiriri lumu olulimu amannya ga kiraasi ag'enjawulo.
ensalo olunyiriri | ekintu 'omuzadde omuzingo'. Overflow constraint ensalosalo y'ekintu ekikozesebwa. Ekkiriza emiwendo gya 'viewport', 'window', 'scrollParent', oba ekijuliziddwa HTMLElement (JavaScript yokka). Okumanya ebisingawo laba Popper's preventOverflow docs .
okuyonja boolean kituufu Ssobozesa oba okulemesa okuyonja. Singa ekolebwa 'template'era 'title'options zijja sanitized. Laba ekitundu kya sanitizer mu biwandiiko byaffe ebya JavaScript .
olukalala oluzungu ekintu Omuwendo ogusookerwako Ekintu ekirimu ebifaananyi ebikkirizibwa ne tags
okuyonjaFn null | enkola tekili mu mateeka Wano osobola okugabira omulimu gwo ogwa sanitize. Kino kiyinza okuba eky’omugaso singa oba oyagala okukozesa etterekero ly’ebitabo eryetongodde okukola sanitization.
popperConfig nga bwe kiri null | ekintu tekili mu mateeka Okukyusa ensengeka ya Popper eya Bootstrap eya bulijjo, laba ensengeka ya 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.

Enkola

Enkola ezitakwatagana n’enkyukakyuka

Enkola zonna eza API tezikwatagana era zitandika enkyukakyuka . Zidda eri oyo akubye amangu ddala ng'enkyukakyuka etandise naye nga tennaggwaako . Okugatta ku ekyo, okuyita enkola ku kitundu ekikyukakyuka kujja kubuusibwa amaaso .

Laba ebiwandiiko byaffe ebya JavaScript okumanya ebisingawo .

$().tooltip(options)

Egattako omukwasi w'ebikozesebwa ku kukungaanya elementi.

.tooltip('show')

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.

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

.tooltip('hide')

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.

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

.tooltip('toggle')

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.

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

.tooltip('dispose')

Ekweka n'okusaanyaawo ekintu ekiyitibwa tooltip. Tooltips ezikozesa delegation (ezitondebwa nga tukozesa option )selector teziyinza kusaanawo kinnoomu ku descendant trigger elements.

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

.tooltip('enable')

Ewa ekintu ekiyitibwa tooltip obusobozi okulagibwa. Ebikozesebwa bikozesebwa nga bwe kibadde.

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

.tooltip('disable')

Eggyawo obusobozi bw'ekintu ekiyitibwa tooltip okulagibwa. Ekiwandiiko ky'ebikozesebwa kijja kusobola okulagibwa singa kiddamu okusobozesa.

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

.tooltip('toggleEnabled')

Ekyusa obusobozi bw'ekintu ekiyitibwa tooltip okulagibwa oba okukwekebwa.

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

.tooltip('update')

Ezza obuggya ekifo ky'ekintu ekiyitibwa tooltip.

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

Ebibaddewo

Ekika ky’Ekibaddewo Okunnyonnyola
show.bs.ekintu eky'okukozesa Ekintu kino kikuba amangu ddala nga showenkola ya instance eyitiddwa.
eragiddwa.bs.ekintu ekikozesebwa Ekintu kino kikubwa nga tooltip ekoleddwa okulabika eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa).
hide.bs.ekintu eky'okukozesa Ekintu kino kikubwa amangu ddala nga hideenkola ya instance eyitiddwa.
ekiwandiiko ekikwekebwa.bs.tooltip Ekintu kino kikubwa nga tooltip emaze okukwekebwa okuva eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa).
eyingiziddwa.bs.ekintu ekikozesebwa Ekintu kino kigobwa oluvannyuma show.bs.tooltiplw'ekintu nga ekifaananyi ky'ekikozesebwa kyongeddwa ku DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})