Source

Dipopovers

Ditokomane le mehlala ya go oketša di-popover tša Bootstrap, go swana le tšeo di hwetšwago go iOS, go elemente efe goba efe mo saeteng ya gago.

Kakaretšo

Dilo tšeo o swanetšego go di tseba ge o diriša plugin ya popover:

  • Popovers 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 di-popovers di šome!
  • Popovers hloka tooltip plugin e le itšetlehile.
  • Ge e ba o aga JavaScript ya rena go tšwa mothopong, e nyakautil.js .
  • Popovers ke opt-in ka mabaka a tshebetso, kahoo o lokela ho initialize bona ka bowena .
  • Zero-bolelele titlele contentboleng ba ke ke ba bontša popover.
  • 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 di-popovers go dielemente tše di utilwego go ka se šome.
  • Dipopo tša .disabledgoba disableddielemente di swanetše go hlohleletša godimo ga elemente ya go phuthela.
  • Ge di hlohleletšwa go tšwa go ditshetledi tšeo di phuthelago go putla mela e mentši, di-popover di tla tsepama magareng ga bophara bja kakaretšo bja ditshetledi. Diriša .text-nowrapgo s ya gago <a>go efoga boitshwaro bjo.
  • Dipopovers 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.
  • Popovers ka hlohleletšwa ka lebaka la elemente ka gare ga DOM ya moriti.

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 .

Tšwela pele o bala go bona kamoo di-popover di šomago ka gona ka mehlala e mengwe.

Mohlala: Kgontšha di-popovers gohle

Tsela e nngwe ya go thoma di-popover ka moka letlakaleng e be e tla ba go di kgetha ka data-toggleseka sa tšona:

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

Mohlala: Go šomiša containerkgetho

Ge o na le ditaele tše dingwe go elemente ya motswadi tšeo di šitišago popover, o tla nyaka go laetša tlwaelo containergore HTML ya popover e tšwelele ka gare ga elemente yeo go e na le moo.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Mohlala

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Ditaelo tše nne

Dikgetho tše nne di a hwetšagala: di logagantšwe ka godimo, ka go le letona, ka tlase le ka go le letshadi.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

Raka ka tobetsa e latelang

Šomiša focussešušumeletši go lahla dipopover go klika ye e latelago ya mosediriši ya elemente ye e fapanego go feta elemente ya go fetoša.

Go nyakega go swaya mo go itšego bakeng sa go raka-go-klika-go-kgotla mo go latelago

Bakeng sa boitshwaro bjo bo swanetšego bja sefapano sa sephephediši le sefapano sa sefala, o swanetše go šomiša <a>leswao, e sego<button> leswao, gomme gape o swanetše go akaretša tabindexseka.

Popover yeo e lahlwago 
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
  trigger: 'focus'
})

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 kgone go hover goba go di klika go hlohleletša popover (goba tooltip). Bjalo ka tharollo, o tla nyaka go hlohleletša popover go tšwa go sephuthedi <div>goba <span>le go tloša ka pointer-eventsgodimo ga elemente ye e golofetšego.

Bakeng sa dihlohleletši tša popover tše di golofetšego, o ka rata gape data-trigger="hover"gore popover e tšwelele bjalo ka ditshwaotshwao tša pono tša ka pela go badiriši ba gago ka ge ba ka no se letele go kgotla elemente ye e golofetšego.

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Tšhomišo

Kgontšha di-popover ka JavaScript:

$('#example').popover(options)

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 popover
setshelo thapo ya | elemente | maaka maaka

E tlaleletša popover go elemente ye e itšego. Mohlala: container: 'body'. Kgetho ye e na le mohola kudu ka gore e go dumelela go bea popover ka go elela ga tokumente kgauswi le elemente ya go hlohleletša - yeo e tlago thibela popover go phaphamala kgole le elemente ya go hlohleletša nakong ya go fetoša bogolo bja lefasetere.
diteng thapo ya | elemente | mošomo '' .

Boleng bja diteng bja maitirelo ge e data-contentle gore seka se se gona.

Ge mošomo o filwe, o tla bitšwa ka thissete ya yona ya tšhupetšo go elemente yeo popover e kgomareditšwego go yona.
diega nomoro ya | selo 0.

Tiego ya go bontšha le go uta popover (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 Tsenya HTML ka gare ga popover. 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 'nepagetše'

Tsela ya go bea popover - auto | godimo | tlase | le letšehali | nepagetše.
Ge autoe laeditšwe, e tla fetolela popover ka go fetoga.

Ge mošomo o šomišwa go bona go bewa, o bitšwa ka noutu ya DOM ya popover 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 popover.
mokgethi wa go kgetha thapo ya | maaka maaka Ge e le gore mokgethi o filwe, dilo tša popover di tla abelwa diphetho tše di laeditšwego. Ka go diragatša, se se šomišwa go kgontšha diteng tša HTML tše di fetogago go ba le dipopovers tše di okeditšwego. Bona se le mohlala o rutago .
thempleite ya thapo '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Thea HTML go šomiša ge o hlama popover.

Popover's e titletla hlabja ka gare ga .popover-header.

Popover's e contenttla hlabja ka gare ga .popover-body.

.arrowe tla fetoga motsu wa popover.

The ka ntle ka ho fetisisa wrapper elements lokela ho ba le .popoversehlopha.
thaetlele thapo ya | elemente | mošomo '' .

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

Ge mošomo o filwe, o tla bitšwa ka thissete ya yona ya tšhupetšo go elemente yeo popover e kgomareditšwego go yona.
šušumetša thapo 'klika'. Kamoo popover e hlohleletšwago ka gona - tobetsa | hover | go tsepamiša kgopolo | manyuale. O ka feta dihlohleletši tše dintši; di aroganya ka sekgoba. manuale ka se kopanywe le selo le ge e le sefe se sengwe seo se hlohleletšago.
offset nomoro ya | thapo 0. Offset ya popover 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 moeli oa popover. 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 .

Data litšobotsi bakeng sa popovers motho ka mong

Dikgetho tša dipopovers ka botee di ka laetšwa ka tsela ye nngwe 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 .

$().popover(options)

E thoma di-popovers bakeng sa kgoboketšo ya elemente.

.popover('show')

E utolla popover ya elemente. E boela go mogala pele ga ge popover e bontšhitšwe e le ka kgonthe (ke gore pele ga ge shown.bs.popovertiragalo e direga). Se se lebelelwa e le go hlohleletša “ka seatla” ga popover. Di-popover tšeo bobedi sehlogo le diteng tša tšona e lego tša botelele bja lefela ga di ke di bontšhwa.

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

.popover('hide')

Pata popover ya elemente. E boela go mogala pele ga ge popover e tloga e utilwe (ke gore pele ga ge hidden.bs.popovertiragalo e direga). Se se lebelelwa e le go hlohleletša “ka seatla” ga popover.

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

.popover('toggle')

Toggles popover ya elemente. E boela go mogala pele ga ge popover e tloga e bontšhitšwe goba e utilwe (ke gore pele ga ge tiragalo ya shown.bs.popovergoba hidden.bs.popovere direga). Se se lebelelwa e le go hlohleletša “ka seatla” ga popover.

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

.popover('dispose')

Pata le go senya popover ya elemente. Popovers hore sebelisa kabo (tseo di bōptjoa sebelisa kgetho selector) ke ke ka bomong senya ka setloholo qholotsa elements.

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

.popover('enable')

E fa popover ya elemente bokgoni bja go bontšhwa. Popovers di kgontšhwa ka go ikemela.

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

.popover('disable')

E tloša bokgoni bja gore popover ya elemente e bontšhwe. Popover e tla kgona go bontšhwa fela ge e kgontšhitšwe gape.

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

.popover('toggleEnabled')

E fetola bokgoni bja gore popover ya elemente e bontšhwe goba e utilwe.

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

.popover('update')

E mpshafatša maemo a popover ya elemente.

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

Ditiragalo

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