Source

Bafutsana

Litokomane le mehlala ea ho kenyelletsa li-popovers tsa Bootstrap, joalo ka tse fumanehang ho iOS, nthong efe kapa efe sebakeng sa hau sa marang-rang.

Kakaretso

Lintho tseo u lokelang ho li tseba ha u sebelisa plugin ea popover:

Bo-Popovers ba itšetlehile ka laeborari ea mokha oa boraro ea Popper.js bakeng sa maemo. U tlameha ho kenyelletsa popper.min.js pele ho bootstrap.js kapa sebelisa bootstrap.bundle.min.js/ bootstrap.bundle.jse nang le Popper.js e le hore popover e sebetse!
Li-Popovers li hloka plugin ea tooltip e le ho itšetleha.
Haeba u theha JavaScript ea rona ho tsoa mohloling, e hlokautil.js .
Li-Popovers li khetha ho kena ka mabaka a ts'ebetso, kahoo u tlameha ho li qala ka bouena .
Bolelele ba zero titlele contentlitekanyetso li ke ke tsa bontša popover.
Hlakisa container: 'body'ho qoba ho fana ka mathata ka likarolo tse rarahaneng (joalo ka lihlopha tsa rona tsa ho kenya, lihlopha tsa likonopo, joalo-joalo).
Ho kenya li-popover linthong tse patiloeng ho ke ke ha sebetsa.
Li-Popovers tsa .disabledkapa disabledli-elementi li tlameha ho hlahisoa holim'a karolo ea wrapper.
Ha li ts'oaroa ho tsoa ho li-ankora tse pota-potileng mela e mengata, li-popover li tla behoa bohareng ba bophara ba li-ankora. Sebelisa .text-nowrapho hao <a>ho qoba boitšoaro bona.
Li-Popovers li tlameha ho patoa pele likarolo tsa tsona tse tsamaellanang li tlosoa ho DOM.
Popovers e ka hlahisoa ka lebaka la ntho e ka hare ho moriti oa DOM.

Liphetho tsa animation tsa karolo ena li ipapisitse le prefers-reduced-motionpotso ea media. Sheba karolo e fokolitsoeng ea motsamao oa litokomane tsa phihlello ea rona .

Tsoela pele ho bala ho bona hore na popover e sebetsa joang ka mehlala e meng.

Mohlala: Lumella li-popovers hohle

Mokhoa o mong oa ho qala li-popovers tsohle leqepheng e tla ba ho li khetha ho latela data-togglesemelo sa tsona:

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

Mohlala: Ho sebelisa `container`khetho

Ha u e-na le mekhoa e meng ea ntho ea motsoali e sitisang popover, u tla batla ho hlalosa tloaelo containere le hore HTML ea popover e hlahe ka har'a ntho eo ho e-na le hoo.

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

Litsela tse 'ne

Ho na le likhetho tse 'nè: holimo, ho le letona, ka tlase, le ho le letšehali.

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

Tlosa ho tobetsa e latelang

Sebelisa focusseqhutsu ho leleka li-popovers ha mosebelisi a tobetsa ntho e latelang e fapaneng le ea toggle element.

Ho hlokahala letšoao le ikhethileng bakeng sa ho penya-ha-e latelang

Bakeng sa boits'oaro bo nepahetseng ba sebatli le sethala, o tlameha ho sebelisa tag <a>, eseng<button> tag, hape o tlameha ho kenyelletsa tabindextšobotsi.

Popover e lelekiloeng

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

Lintho tse holofetseng

Lintho tse nang le disabledtšobotsi ha li sebelisane, ho bolelang hore basebelisi ba ke ke ba li sutumelletsa kapa ba li tobetse ho etsa hore popover (kapa tooltip). Joalo ka mokhoa oa ho sebetsa, o tla batla ho tsosa popover ho tsoa ho wrapper <div>kapa <span>le ho feta pointer-eventsntho e holofetseng.

Bakeng sa li-triggers tsa popover tse nang le bokooa, u kanna ua khetha data-trigger="hover"hore popover e hlahe e le maikutlo a hanghang ho basebelisi ba hau kaha ba kanna ba se lebelle ho tobetsa ntho e holofetseng.

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

Lumella li-popover ka JavaScript:

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

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-animation="".

Lebitso	Mofuta	Ea kamehla	Tlhaloso
animation	boolean	'nete	Kenya phetoho ea CSS fade ho popover
setshelo	khoele \| ntho \| bohata	bohata	E eketsa popover ho element e itseng. Mohlala `container: 'body'`:. Khetho ena e bohlokoa haholo hobane e u lumella ho beha popover phallong ea tokomane haufi le ntho e qalang - e tla thibela popover hore e se ke ea phaphamala hole le ntho e bakang nakong ea ho fetola boholo ba fensetere.
dikahare	khoele \| ntho \| tshebetso	''	Boleng ba litaba bo ka rekoang haeba `data-content`semelo se le sieo. Haeba ts'ebetso e fanoe, e tla bitsoa ka `this`litšupiso tsa eona ho element eo popover e khomaretsoeng ho eona.
lieha	nomoro \| ntho	0	Ho lieha ho bonts'a le ho pata popover (ms) - ha e sebetse ho mofuta oa mochini oa ho qala Haeba nomoro e fanoe, ho lieha ho sebelisoa ho pata/show ka bobeli Sebopeho sa ntho ke:`delay: { "show": 500, "hide": 100 }`
html	boolean	bohata	Kenya HTML ho popover. Haeba e le leshano, mokhoa oa jQuery `text`o tla sebelisoa ho kenya litaba ho DOM. Sebelisa mongolo haeba u tšoenyehile ka litlhaselo tsa XSS.
ho beha	khoele \| tshebetso	'ho lokile'	Mokhoa oa ho beha popover - auto \| holimo \| tlase \| le letšehali \| hantle. Ha `auto`e hlalositsoe, e tla fetola popover ka mokhoa o matla. Ha ts'ebetso e sebelisoa ho fumana sebaka sa ho beoa, e bitsoa le node ea popover DOM e le khang ea eona ea pele le ntho e qalang ea DOM node e le ea bobeli. Boemo `this`bo behiloe ho mohlala oa popover.
mokhethi	khoele \| bohata	bohata	Haeba ho fanoe ka khetho, lintho tsa popover li tla abeloa ho sepheo se boletsoeng. Ha e le hantle, sena se sebelisetsoa ho nolofalletsa litaba tsa HTML tse matla hore li eketsoe ke popover. Bona sena le mohlala o rutang .
template	khoele	`'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'`	HTML ea mantlha eo u ka e sebelisang ha u theha popover. Li-popover li `title`tla kenngoa ka har'a `.popover-header`. Li-popover li `content`tla kenngoa ka har'a `.popover-body`. `.arrow`e tla fetoha motsu oa popover. Karolo e ka ntle ea wrapper e lokela ho ba le `.popover`sehlopha.
sehlooho	khoele \| ntho \| tshebetso	''	Boleng ba sehlooho sa kamehla haeba `title`semelo se le sieo. Haeba ts'ebetso e fanoe, e tla bitsoa ka `this`litšupiso tsa eona ho element eo popover e khomaretsoeng ho eona.
qhoqhoa	khoele	'tobetsa'	Popover e qala joang - tlanya \| hloella \| tsepamisa \| tataiso. U ka 'na ua fetisa li-triggers tse ngata; di arole ka sebaka. `manual`e ke ke ea kopanngoa le ntho leha e le efe e qalang.
offset	nomoro \| khoele	0	Phetoho ea popon e ipapisitse le sepheo sa eona. Ho fumana lintlha tse ling, sheba ho Popper.js's offset docs .
fallbackPlacement	khoele \| array	'phetla'	Lumella ho hlakisa hore na Popper e tla sebelisa boemo bofe ha ho khutla. Ho fumana lintlha tse ling, sheba ho Popper.js's behaviour docs
moeli	khoele \| element	'scrollParent'	Moeli oa litšitiso tse ngata tsa popover. E amohela boleng ba `'viewport'`, `'window'`, `'scrollParent'`, kapa HTMLElement reference (JavaScript feela). Ho fumana lintlha tse ling, sheba ho Popper.js's preventOverflow docs .

Litšobotsi tsa data bakeng sa li-popovers ka bomong

Likhetho bakeng sa li-popovers ka bomong li ka hlalosoa ka tšebeliso ea litšobotsi tsa data, joalo ka ha ho hlalositsoe ka holimo.

Mekhoa

Mekhoa ea Asynchronous le liphetoho

Mekhoa eohle ea API ha e- synchronous 'me e qala phetoho . Ba khutlela ho motho ea letselitseng hang ha phetoho e qala empa pele e fela . Ho feta moo, mohala oa mokhoa ho karolo ea phetoho o tla hlokomolohuoa .

Sheba litokomane tsa rona tsa JavaScript bakeng sa lintlha tse ling .

`$().popover(options)`

E qala popovers bakeng sa pokello ea lintho.

`.popover('show')`

E hlahisa poover ea element. E khutlela ho ea letselitseng pele popover e bonts'oa (ke hore pele shown.bs.popoverketsahalo e etsahala). Sena se nkuoa e le "manual" e tsosang popo. Li-Popovers tseo sehlooho le litaba tsa tsona li leng bolelele ba lefela ha ho mohla li hlahisoang.

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

`.popover('hide')`

E pata popo ea lintho. E khutlela ho ea letselitseng pele popover e patiloe (ke hore pele hidden.bs.popoverketsahalo e etsahala). Sena se nkuoa e le "manual" e tsosang popo.

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

`.popover('toggle')`

E fetola popover ea element. E khutlela ho ea letselitseng pele popover e bonts'oa kapa e patiloe (ke hore pele ketsahalo shown.bs.popoverkapa hidden.bs.popoverketsahalo e etsahala). Sena se nkuoa e le "manual" e tsosang popo.

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

`.popover('dispose')`

E pata le ho senya popover ea element. Li-Popovers tse sebelisang moifo (tse entsoeng ho sebelisoa khetho selector) li ke ke tsa senngoa ka bonngoe ho latela likarolo tse qalang.

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

`.popover('enable')`

E fa element's popover bokhoni ba ho bonts'a. Li-Popovers li lumelloa ka mokhoa oa kamehla.

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

`.popover('disable')`

E tlosa bokhoni ba ho hlahisa popover ea element. Popover e tla bonts'oa feela ha e buletsoe hape.

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

`.popover('toggleEnabled')`

E fetola bokhoni ba popover ea element hore e bontšoe kapa e patehe.

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

`.popover('update')`

E kaonefatsa boemo ba elemente popover.

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

Liketsahalo

Mofuta oa Ketsahalo	Tlhaloso
bonts'a.bs.popover	Ketsahalo ena e tuka hang hang ha `show`mokhoa oa mohlala o bitsoa.
bontshitsweng.bs.popover	Ketsahalo ena e lelekoa ha popover e se e bonahala ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe).
pata.bs.popover	Ketsahalo ena e lelekoa hang hang ha `hide`mokhoa oa mohlala o bitsoa.
patiloeng.bs.popover	Ketsahalo ena e ts'oaroa ha popover e qetile ho patoa ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe).
kentse.bs.popover	Ketsahalo ena e lelekoa kamora `show.bs.popover`ketsahalo ea ha template ea popover e kentsoe ho DOM.

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})