Source

Dikeletšo tša didirišwa

Ditokomane le mehlala ya go tlaleletša didirišwa tša tlwaelo tša Bootstrap ka CSS le JavaScript ka go šomiša CSS3 bakeng sa ditshwantšho tša dipopaye le dika tša datha tša polokelo ya thaetlele ya selegae.

Kakaretšo

Dilo tšeo o swanetšego go di tseba ge o diriša polaka ya keletšo ya sedirišwa:

  • Tooltips itšetlehile ka 3rd mokga bokgobapuku Popper.js bakeng sa positioning. O swanetše go akaretša popper.min.js pele ga bootstrap.js goba o šomiše bootstrap.bundle.min.js/ bootstrap.bundle.jsyeo e nago le Popper.js gore dipolelo tša didirišwa di šome!
  • Ge e ba o aga JavaScript ya rena go tšwa mothopong, e nyakautil.js .
  • Dikeletšo tša didirišwa ke tša go kgetha go tsena ka mabaka a tshepedišo, ka fao o swanetše go di thoma ka bowena .
  • Dikeletšo tša didirišwa tšeo di nago le dihlogo tša botelele bja lefela ga di ke di bontšhwa.
  • Laetša container: 'body'go efoga mathata a go tšweletša ka dikarolo tše di raraganego kudu (go swana le dihlopha tša rena tša go tsenya, dihlopha tša dikonope, bj.bj.).
  • Go hlohleletša maele a didirišwa go dielemente tše di utilwego go ka se šome.
  • Dikeletšo tša didirišwa tša .disabledgoba disableddielemente di swanetše go hlohleletša godimo ga elemente ya sephuthelwana.
  • Ge e hlohleletšwa go tšwa go dikgokagano tša godimo tšeo di akaretšago mela ye mentši, ditlhagišo tša didirišwa di tla ba bogareng. Diriša white-space: nowrap;go s ya gago <a>go efoga boitshwaro bjo.
  • Dikeletšo tša didirišwa di swanetše go utilwe pele ga ge dielemente tša tšona tše di swanetšego di tlošitšwe go tšwa go DOM.
  • Tooltips ka hlohleletšwa ka lebaka la elemente ka gare ga moriti DOM.

Phello ya dipopaye ya karolo ye e ithekgile ka prefers-reduced-motionpotšišo ya methopo ya ditaba. Bona karolo ya tšhišinyego ye e fokoditšwego ya ditokomane tša rena tša phihlelelo .

O na le tšeo ka moka? E kgolo, a re boneng kamoo ba šomago ka gona ka mehlala e mengwe.

Mohlala: Kgontšha ditšhišinyo tša didirišwa gohle

Tsela e nngwe ya go thoma ditšhišinyo ka moka tša didirišwa letlakaleng e tla ba go di kgetha ka data-toggleseka sa tšona:

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

Mehlala

Beakanya godimo ga dikgokagano tše di lego ka mo tlase go bona ditšhišinyo tša didirišwa:

Tight pants next level keffiyeh mohlomongwe ga se wa kwa ka tšona. Photo lephephe ditedu tala denim letterpress vegan moromiwa mokotla stumptown. Polase-ho-tafoleng seitan, mcsweeney o fixie tšoarellang quinoa 8-bit american liaparo na le terry richardson vinyl chambray. Ditedu stumptown, di-cardigan banh mi lomo dikatse tša diaduma. Tofu biodiesel williamsburg marfa, tse 'nè loko mcsweeney o hloekisa vegan chambray. A hlile ironic artisan eng kapa eng keytar , scenester polasi-ho-tafoleng banksy Austin twitter sebetsana freegan cred tala denim e le 'ngoe-tšimoloho kofi kokoana-hloko.

Beakanya godimo ga dikonope tše di lego ka mo tlase go bona ditaelo tše nne tša dikeletšo tša didirišwa: godimo, ka go le letona, tlase le ka go le letshadi.

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

Gomme ka HTML ya tlwaelo yeo e okeditšwego:

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

Tšhomišo

Plugin ya keletšo ya didirišwa e tšweletša dikagare le go swaya ka nyakego, gomme ka go ikemela e bea ditšhupetšo ka morago ga elemente ya bona ya go hlohleletša.

Hlohleletša keletšo ya sedirišwa ka JavaScript:

$('#example').tooltip(options)
Go tlala autolescroll

Boemo bja Tooltip bo leka go fetoga ka go iketla ge setshelo sa motswadi se na le overflow: autogoba se overflow: scrollswana le sa rena .table-responsive, eupša se sa dutše se boloka boemo bja mathomo bja go bewa. Go rarolla, beakanya boundarykgetho go selo se sengwe le se sengwe ntle le boleng bja go se fetoge, 'scrollParent', go swana le 'window':

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

Go swaya

Tswao ye e nyakegago ya keletšo ya sedirišwa ke dataseka fela gomme titlegodimo ga elemente ya HTML o nyaka go ba le keletšo ya sedirišwa. The generated markup ya tooltip e e-na le bonolo, le hoja e etsa hloka boemo (ka default, beha ho topke plugin).

Go dira gore maele a didirišwa a šome go badiriši ba khiiboto le theknolotši ya go thuša

O swanetše go oketša fela dikeletšo tša didirišwa go dielemente tša HTML tšeo ka setšo di lebanego le khiiboto le tše di dirišanago (go swana le dikgokagano goba ditaolo tša foromo). Le ge e le gore dielemente tša HTML tša boithatelo (go swana le <span>s) di ka dirwa gore di tsepelelwe ka go oketša tabindex="0"seka, se se tla oketša go ema ga dithepo tšeo di ka bago tše di tenago le tše di gakantšhago go dielemente tšeo e sego tša tirišano go badiriši ba khiiboto. Go tlaleletša, bontši bja theknolotši ya go thuša ga bjale ga e tsebiše keletšo ya sedirišwa boemong bjo.

Go tlaleletša, o se ke wa ithekga fela ka hoverbjalo ka sešušumeletši sa keletšo ya gago ya sedirišwa, ka ge se se tla dira gore dikeletšo tša gago tša didirišwa di se kgonege go hlohleletša go badiriši ba khiiboto.

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

Dielemente tše di golofetšego

Dielemente tše di nago le disabledseka ga di na tirišano, go ra gore badiriši ba ka se tsepamiše kgopolo, go di hover, goba go di klika go hlohleletša keletšo ya sedirišwa (goba popover). Bjalo ka tharollo, o tla nyaka go hlohleletša keletšo ya sedirišwa go tšwa go sephuthelwana <div>goba <span>, ka mo go swanetšego e dirilwe gore e tsepamiše khiiboto ka go šomiša tabindex="0", gomme o tloše ka pointer-eventsgodimo ga elemente ye e golofetšego.

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

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-animation="".

Leina Mohuta Hlokomologa Tlhalošo
ditshwantsho tse di phelang boolean ya go swana nnete Diriša phetogo ya go fifala ya CSS go keletšo ya sedirišwa
setshelo thapo ya | elemente | maaka maaka

E tlaleletša keletšo ya sedirišwa go elemente ye e itšego. Mohlala: container: 'body'. Kgetho ye e na le mohola kudu ka gore e go dumelela go bea ntlha ya sedirišwa ka go elela ga tokumente kgauswi le elemente ya go hlohleletša - yeo e tlago thibela ntlha ya sedirišwa go phaphamala go tloga go elemente ya go hlohleletša nakong ya go fetoša bogolo bja lefasetere.
diega nomoro ya | selo 0.

Tiego ya go bontšha le go uta keletšo ya sedirišwa (ms) - ga e šome go mohuta wa go hlohleletša ka seatla

Ge e le gore nomoro e filwe, go diega go dirišwa go bobedi go uta/bontšha

Sebopego sa selo ke:delay: { "show": 500, "hide": 100 }
html boolean ya go swana maaka

Dumelela HTML ka go keletšo ya sedirišwa.

Ge e le nnete, dithepo tša HTML ka go tooltip's titledi tla tšweletšwa ka go tooltip. Ge e le maaka, mokgwa wa jQuery texto tla šomišwa go tsenya diteng ka gare ga DOM.

Diriša sengwalwa ge e ba o tshwenyegile ka ditlhaselo tša XSS.
go bewa ga dilo thapo ya | mošomo 'godimo'

Tsela ya go bea tooltip - auto | godimo | tlase | le letšehali | nepagetše.
Ge autoe laeditšwe, e tla lebiša gape ka go fetoga keletšo ya sedirišwa.

Ge mošomo o šomišwa go bona go bewa, o bitšwa ka noutu ya DOM ya ntlha ya sedirišwa bjalo ka ngangišano ya yona ya mathomo le noutu ya DOM ya elemente ye e hlohleletšago bjalo ka noutu ya yona ya bobedi. Seemo thisse beakantšwe go mohlala wa keletšo ya sedirišwa.
mokgethi wa go kgetha thapo ya | maaka maaka Ge e le gore mokgethi o filwe, dilo tša keletšo ya sedirišwa di tla abelwa diphetho tše di laeditšwego. Ka go diragatša, se se šomišwa go diriša gape malebela a didirišwa go dielemente tša DOM tšeo di okeditšwego ka maatla ( jQuery.onthekgo). Bona se le mohlala o rutago .
thempleite ya thapo '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Thea HTML go šomiša ge o hlama keletšo ya sedirišwa.

Di- tooltip's titledi tla hlabja ka gare ga .tooltip-inner.

.arrowe tla ba motsu wa tooltip.

Elemente ya sephuthedi sa ka ntle e swanetše go ba le .tooltipsehlopha le role="tooltip".
thaetlele thapo ya | elemente | mošomo '' .

Boleng bja thaetlele bja maitirelo ge e titlele gore seka se se gona.

Ge e le gore mošomo o filwe, o tla bitšwa ka thissete ya wona ya tšhupetšo go elemente yeo keletšo ya sedirišwa e kgomareditšwego go yona.
šušumetša thapo 'hover tsepamiso ya maikutlo'.

Kamoo tooltip e hlohleletšwago ka gona - klika | hover | go tsepamiša kgopolo | manyuale. O ka feta dihlohleletši tše dintši; di aroganya ka sekgoba.

'manual'e bontša hore tooltip tla qholotsa programmatically ka .tooltip('show'), .tooltip('hide')le .tooltip('toggle')mekgwa ya tshebetso; boleng bjo bo ka se kopanywe le sešušumeletši se sengwe le se sengwe.

'hover'ka boyona e tla feletša ka ditšhišinyo tša didirišwa tšeo di ka se hlohleletšwego ka khiiboto, gomme di swanetše go šomišwa fela ge mekgwa ye mengwe ya go fetišetša tshedimošo ye e swanago go badiriši ba khiiboto e le gona.
offset nomoro ya | thapo 0. Offset ya tooltip leloko le sepheo lona. Bakeng sa tshedimošo e oketšegilego lebelela Popper.js's offset docs .
fallbackGo bewa ga dilo thapo ya | hlophisitsoeng 'phepheula' Dumelela go laetša gore ke maemo afe ao Popper a tlago go a šomiša go fallback. Bakeng sa tshedimošo e oketšegilego lebelela ditokomane tša boitshwaro tša Popper.js
mollwane thapo ya | ntlha 'Motswadi wa go kgokološa'. Overflow thibelo moedi wa tooltip. E amogela dikelo tša 'viewport', 'window', 'scrollParent', goba tšhupetšo ya HTMLElement (JavaScript fela). Bakeng sa tshedimošo e oketšegilego lebelela ditokomane tša preventOverflow tša Popper.js .

Dika tša datha tša didirišwa tša motho ka o tee ka o tee

Dikgetho tša maele a didirišwa ka botee ka tsela ye nngwe di ka laetšwa ka tšhomišo ya dika tša datha, bjalo ka ge go hlalošitšwe ka godimo.

Mekgwa ya go šoma

Mekgwa ya asynchronous le diphetogo

Mekgwa ka moka ya API ga e na asynchronous gomme e thoma phetogo . Ba boela go motho yo a leletšago mogala gateetee ge phetogo e thomilwe eupša pele e fela . Go tlaleletša, pitšo ya mokgwa go karolo ya phetogo e tla hlokomologwa .

Bona ditokomane tša rena tša JavaScript bakeng sa tshedimošo e oketšegilego .

$().tooltip(options)

E kgomaretša sedirišwa sa go swara sedirišwa go kgoboketšo ya elemente.

.tooltip('show')

E utolla keletšo ya sedirišwa ya elemente. E boela go mogala pele ga ge keletšo ya sedirišwa e bontšhitšwe e le ka kgonthe (ke gore pele ga ge shown.bs.tooltiptiragalo e direga). Se se tšewa e le go hlohleletša ga “ka seatla” ga keletšo ya sedirišwa. Dikeletšo tša didirišwa tšeo di nago le dihlogo tša botelele bja lefela ga di ke di bontšhwa.

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

.tooltip('hide')

E uta keletšo ya sedirišwa ya elemente. E boela go mogala pele ga ge keletšo ya sedirišwa e tloga e utilwe (ke gore pele ga ge hidden.bs.tooltiptiragalo e direga). Se se tšewa e le go hlohleletša ga “ka seatla” ga keletšo ya sedirišwa.

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

.tooltip('toggle')

E fetola keletšo ya sedirišwa ya elemente. E boela go mogala pele ga ge keletšo ya sedirišwa e tloga e bontšhitšwe goba e utilwe (ke gore pele ga ge tiragalo ya shown.bs.tooltipgoba hidden.bs.tooltipe direga). Se se tšewa e le go hlohleletša ga “ka seatla” ga keletšo ya sedirišwa.

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

.tooltip('dispose')

E uta le go senya sedirišwa sa elemente. Dikeletšo tša didirišwa tšeo di šomišago kabo (tšeo di hlotšwego ka go šomiša kgetho selector) di ka se senywe ka botee go dielemente tša go hlohleletša tša setlogolo.

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

.tooltip('enable')

E fa sedirišwa sa elemente bokgoni bja go bontšhwa. Dikeletšo tša didirišwa di kgontšhwa ka go ikemela.

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

.tooltip('disable')

E tloša bokgoni bja gore keletšo ya sedirišwa ya elemente e bontšhwe. Keletšo ya sedirišwa e tla kgona go bontšhwa fela ge e kgontšhitšwe gape.

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

.tooltip('toggleEnabled')

E fetola bokgoni bja gore keletšo ya sedirišwa ya elemente e bontšhwe goba e utilwe.

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

.tooltip('update')

E mpshafatša maemo a keletšo ya sedirišwa ya elemente.

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

Ditiragalo

Mohuta wa Tiragalo Tlhalošo
bontša.bs.sedirišwa Tiragalo ye e thunya ka pela ge showmokgwa wa mohlala o bitšwa.
bontšitsoeng.bs.sedirišwa Tiragalo ye e thuntšhwa ge keletšo ya sedirišwa e dirilwe gore e bonagale go modiriši (e tla emela gore diphetogo tša CSS di phethe).
pata.bs.keletšo ya sedirišwa Tiragalo ye e thuntšhwa ka pela ge hidemokgwa wa mohlala o biditšwe.
patilwe.bs.sedirišwa Tiragalo ye e thuntšhwa ge keletšo ya sedirišwa e feditše go utollwa go tšwa go modiriši (e tla emela gore diphetogo tša CSS di phethe).
e tsentšwe.bs.sedirišwa Tiragalo ye e thuntšhwa ka morago ga show.bs.tooltiptiragalo ge thempleite ya keletšo ya sedirišwa e okeditšwe go DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})