Source

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:

  • Ebikozesebwa byesigamye ku tterekero ly’ebitabo ery’ekibiina eky’okusatu Popper.js okusobola okuteeka mu kifo. Olina okussaamu popper.min.js nga tonnaba bootstrap.js oba kozesa bootstrap.bundle.min.js/ bootstrap.bundle.jserimu Popper.js 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.

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:

Tight pants next level keffiyeh osanga toziwuliddeko . Ekifaananyi ekibanda ekirevu embisi denim letterpress vegan omubaka ensawo stumptown. Seitan okuva ku faamu okutuuka ku mmeeza, engoye za mcsweeney eziyitibwa fixie sustainable quinoa 8-bit american apparel zirina terry richardson vinyl chambray. Ekirevu stumptown, cardigans banh mi lomo okubwatuka. Tofu biodiesel williamsburg marfa, bana loko mcsweeney's okuyonja vegan chambray. A really ironic artisan whatever keytar , scenester faamu-ku-mmeeza banksy Austin twitter okukwata freegan cred embisi denim ensibuko emu kaawa viral.

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 ebitali bituufu (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. Okugatta ku ekyo, tekinologiya asinga okuyamba mu kiseera kino talangirira tooltip 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="".

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 okusobozesa ebirimu bya HTML ebikyukakyuka okuba ne popovers ezigattibwako. 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 | akaguwa 0. Offset ya tooltip okusinziira ku target yaayo. Okumanya ebisingawo laba Popper.js's offset docs .
fallbackOkuteeka mu kifo olunyiriri | ensengekera 'okukyuusa' Kiriza okulaga ekifo Popper ky'anaakozesa ku fallback. Okumanya ebisingawo laba Popper.js's behavior docs
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.js's preventOverflow docs .

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…
})