Popovers (Popovers) ye

Sɛbɛnw ni misaliw walasa ka Bootstrap popovers fara ɲɔgɔn kan, i n’a fɔ minnu bɛ sɔrɔ iOS kɔnɔ, fɛn o fɛn na i ka siti kan.

Kuma bɛɛ lajɛlen

Fɛn minnu ka kan ka dɔn ni i bɛ baara kɛ ni popover plugin ye:

Popovers bɛ u jigi da 3nan ka bibliothèque Popper kan jɔyɔrɔko la. Aw ka kan ka popper.min.js don a kɔnɔ ka kɔn bootstrap.js ɲɛ walima ka baara kɛ ni bootstrap.bundle.min.js/ bootstrap.bundle.jsye min kɔnɔ Popper bɛ yen walasa popovers ka baara kɛ!
Popovers bɛ tooltip plugin de wajibiya i n’a fɔ dependency.
N'i bɛ an ka JavaScript jɔ ka bɔ source la, a bɛ wajibiyautil.js .
Popovers ye opt-in ye baarakɛcogo kunw na, o la aw yɛrɛ ka kan k’u daminɛ .
Zero-janya titleni contentnafaw tɛna popover jira abada.
A jira container: 'body'walasa ka i yɛrɛ tanga ɲɛfɔli gɛlɛyaw ma yɔrɔw la minnu ka gɛlɛn kosɛbɛ (i n’a fɔ an ka donnakow kuluw, butɔni kuluw, a ɲɔgɔnnaw).
Popovers (popovers) daminɛni fɛn dogolenw kan, o tɛna baara kɛ.
Popovers for .disabledwalima disabledelements ka kan ka daminɛ wrapper element kan.
Ni a bɛ daminɛ ka bɔ jɛgɛw la minnu bɛ siri tigɛli caman na, popovers bɛna kɛ cɛmancɛ la jɛgɛw bɛɛ bonya bɛɛ cɛ. Aw .text-nowrapbɛ baara kɛ ni aw ka <a>s ye walasa ka aw yɛrɛ tanga nin kɛcogo in ma.
Popovers ka kan ka dogo sani u bɛnkanw ka bɔ DOM kɔnɔ.
Popovers bɛ se ka daminɛ k’a sababu kɛ fɛn dɔ ye min bɛ DOM biɲɛ dɔ kɔnɔ.

A daminɛ na, nin yɔrɔ in bɛ baara Kɛ ni kɔnɔkow saniyalan ye min bɛ Dòn a kɔnɔ, o min bɛ HTML fɛn o fɛn Bɔ min ma Sɔn k’a jɛya. Aw ye saniya yɔrɔ lajɛ an ka JavaScript sɛbɛnw kɔnɔ walasa ka kunnafoni wɛrɛw sɔrɔ.

Nin yɔrɔ in ka animation nɔ bɛ bɔ prefers-reduced-motionmedia ɲininkali de la. aw ye an ka sɔrɔli sɛbɛnw yɔrɔ lajɛ min bɛ lamaga dɔgɔyalen na .

Aw bɛ to ka kalan kɛ walasa ka a dɔn popoverw bɛ baara kɛ cogo min na ni misali dɔw ye.

Misali: Popoverw daminɛ yɔrɔ bɛɛ

Popoverw bɛɛ daminɛcogo dɔ ɲɛ dɔ kan o ye k’u sugandi u ka data-togglefɛnɲɛnɛma fɛ:

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

Misali: Baara kɛ ni `container`sugandili ye

Ni i ye cogoya dɔw Sɔrɔ bangebaga-yɔrɔ dɔ kan minnu bɛ popover dɔ bali, i b’a fɛ ka ladamu dɔ Jira containerwalasa popover ka HTML ka Bɔ o element ‘kɔnɔ o nɔ na.

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

Misaliya

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

Sira naani

Sugandili naani bɛ yen: sanfɛ, kinin fɛ, duguma ani numan fɛ.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
  Popover on left
</button>

Dismiss kan nata digi

Baara kɛ ni focustrigger ye walasa ka popovers (popovers) bɔ kɛnɛ kan baarakɛla ka fɛn wɛrɛ digilen na min tɛ toggle element ye.

Markup kɛrɛnkɛrɛnnen wajibiyalen don dismiss-on-next-click kama

Walasa ka cross-browser ni cross-platform kɛcogo ɲuman sɔrɔ, i ka kan ka baara kɛ ni <a>tag ye, i kana baara kɛ ni <button>tag ye, wa i ka kan fana ka tabindexattribut dɔ don a kɔnɔ.

Popover min bɛ se ka bɔ kɛnɛ kan

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

Eleman minnu bɛ se ka baara kɛ

Fɛn minnu bɛ ni fɛn ye disabled, olu tɛ ɲɔgɔndan ye, o kɔrɔ ye ko baarakɛlaw tɛ Se k’u jɔ walima k’u digi walasa ka popover (walima baarakɛminɛnw) dɔ Daminɛ. O cogo la, i b'a fɛ ka popover daminɛ ka bɔ wrapper la <div>walima <span>ka override the pointer-eventson disabled element.

Popover triggers disabled (popover triggers) la, i bɛ se fana k’a fɛ data-trigger="hover"walasa popover ka jira i n’a fɔ teliya yecogo jaabi i ka baarakɛlaw ye i n’a fɔ u tɛ se ka a jira ko u bɛna fɛn dɔ digi disabled element kan.

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

Baarakɛcogo

Popovers baara kɛ JavaScript fɛ:

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

GPU teliya

Popovers bɛ ye tuma dɔw la ka ɲɛ Windows 10 minɛnw kan k’a sababu kɛ GPU teliya ye ani sitɛmu DPI sɛmɛntiyalen ye. O ɲɛnabɔli ye v4 kɔnɔ o ye ka GPU teliya bali i n'a fɔ a mago bɛ cogo min na i ka popovers kan.

Labɛnni min bɛ kɛ ka ɲɛsin furakɛli ma:

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

Popoverw kɛli ka baara kɛ klaviyeti ni dɛmɛni fɛɛrɛw baarakɛlaw ye

Walasa ka sira Di klaviyeti baarakɛlaw ma u k’i ka popoverw baara, i ka kan k’u Fàra HTML yɔrɔw dɔrɔn kan minnu bɛ Se klaviyeti-yɔrɔ-ko laada la ani minnu bɛ Kɛ ɲɔgɔn fɛ (i n’a fɔ jὲɲɔgɔnya walima foroko-kɔlɔsili). Hali n’a y’a Sɔrɔ HTML fɛnɲɛnɛmaw (i n’a fɔ <span>s) bɛ Se ka Kɛ ‘fɛn ye min bɛ Se ka Kɛ ‘fɛn ye min bɛ Se ka Kɛ ‘fɛn ye min bɛ Se ka Kɛ ‘fɛn ye min bɛ Se ka Kɛ ‘fɛn ye min bɛ Se ka Kɛ ‘fɛn ye min bɛ Se ka ‘ tabindex="0"kɔnɔnafili ani k’u hakili ɲagami klaviyeti baarakɛlaw kan minnu tɛ ‘ɲɔgɔndɛmɛ ye, wa dɛmɛn-fɛɛrɛ fanba tɛ popover kɔnɔkow Laseli sisan nin ko in na . Ka fara o kan, i kana i jigi da dɔrɔn kan hoveri n’a fɔ i ka popovers (popovers) daminɛfɛn, bawo o bɛna a to u tɛ se ka daminɛ klaviyeti baarakɛlaw fɛ.

Hali n’i bɛ se ka HTML nafama, sigilen don popovers kɔnɔ ni htmlsugandi ye, an b’a ɲini i fɛ kosɛbɛ i k’i yɛrɛ tanga kunnafoni hakɛ tɛmɛnenw farali kan. Popoverw bɛ baara kɛ cogo min na sisan, o ye ko, n’u jirala dɔrɔn, u kɔnɔkow bɛ siri trigger element la ni aria-describedbyattribut ye. O de kosɔn, popover kɔnɔkow bɛɛ bɛna laseli dɛmɛn fɛɛrɛbɔlaw ma i n’a fɔ jikuru jan kelen min tɛ tigɛ.

Ka fara o kan, hali n’a bɛ se ka kɛ fana ka kunnafoni-falen-falen-minɛnw (i n’a fɔ foroko fɛnw walima j��gɛnsira) don i ka popover kɔnɔ (ni i ye o fɛnw fara fɛnw kan whiteListwalima minnu bɛ se ka kɛ fɛnw ni taamasiyɛnw ye), i k’a dɔn ko sisan popover tɛ klaviyeti sinsincogo ɲɛnabɔ. Ni klaviyeti baarakɛla dɔ ye popover da wuli, sinsin bɛ to triggering element kan, wa i n’a fɔ a ka c’a la popover tɛ tugu trigger kɔ teliya la sɛbɛn in jɔcogo la, garanti si tɛ yen ko ka taa ɲɛfɛ/degunTABbɛna klaviyeti baarakɛla dɔ wuli ka don popover yɛrɛ kɔnɔ. Kuma surun na, n’i ye ɲɔgɔndan-minɛnw fara popover kan dɔrɔn, o bɛ se ka kɛ sababu ye ka nin kɔrɔsili ninnu kɛ fɛn ye min tɛ se ka sɔrɔ/min tɛ se ka baara kɛ ni klaviyeti baarakɛlaw ni dɛmɛ-fɛɛrɛw baarakɛlaw ye, walima a dɔgɔyalenba la, o bɛ kɛ sababu ye ka sinsincogo bɛɛ lajɛlen kɛ min tɛ hakili sɔrɔ. O cogo la, aw bɛ jateminɛ kɛ ka baara kɛ ni modal dialogue ye o nɔ na.

Sugandili minnu bɛ kɛ

Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-, i n’a fɔ a bɛ cogo min na data-animation="".

A kɔlɔsi ko lakana kunw kosɔn sanitize, sanitizeFnani whiteListsugandiliw tɛ se ka di ni data attributes ye.

Tɔ̀gɔ	Ka sɛbɛen masin na	Fɔlɔ	Cogojirali
animation (ɲɛnamaya kɛcogo ɲuman).	boolean ye	sɛbɛ	CSS fade transition dɔ kɛ ka popover kɛ
minɛn kɔnɔ	juru \| element \| nkalon	nkalon	A bɛ popover fara fɛn kɛrɛnkɛrɛnnen dɔ kan. Misali la: `container: 'body'`. O sugandili in nafa ka bon kɛrɛnkɛrɛnnenya la bawo a b’a To i bɛ se ka popover (popover) Blà sɛbɛn in bolicogo la triggering element (daminɛ-yɔrɔ) kɛrɛfɛ - o bɛna popover bali ka pan ka Bɔ triggering (daminɛ-yɔrɔ) la finɛtiri bonya caman cili waati la.
kɔnɔnafɛn	juru \| element \| baarakunda	'' '' .	Kɔnɔkow nafa dafalen ni `data-content`fɛnsɛbɛn tɛ yen. Ni baara dɔ dira, a bɛ Weele n'a ka `this`'reference set ye popover bɛ nɔrɔ min na.
ka mɛ	jate \| minɛn	0 ye	Delay jirali ni a dogo popover (ms) - o tɛ tali kɛ bololabaarakɛlaw ka trigger suguya la Ni nimɔrɔ dɔ dira, delay bɛ kɛ hide/show fila bɛɛ la Fɛnw jɔcogo ye:`delay: { "show": 500, "hide": 100 }`
html ye	boolean ye	nkalon	HTML don popover kɔnɔ. Ni nkalon don, jQuery ka `text`fɛɛrɛ bɛna kɛ ka kɔnɔkow don DOM kɔnɔ. Baara kɛ ni sɛbɛnni ye ni i bɛ hami XSS binkanniw na.
bilali sen kan	juru \| baarakunda	'jo'	Cogo min na ka popover bila - auto \| sanfɛ \| duguma \| kinin fɛ \| jo. Ni `auto`a ɲɛfɔra, a bɛna popover ɲɛsin kokura ni fanga ye. Ni baarakɛcogo dɔ bɛ Kɛ ka jɔyɔrɔko Labɛn, a bɛ Weele ni popover DOM node ye a ka argument fɔlɔ ye ani triggering element DOM node k'a Kɛ a filanan ye. A `this`kɔnɔkow bɛ sigi popover misali la.
sugandilikɛla	juru \| nkalon	nkalon	Ni sugandili dɔ dira, popover fɛnw bɛna di laɲini kofɔlenw ma. Tiɲɛ na, o bɛ Kɛ walasa ka HTML kɔnɔkow dinamikilenw Dɛmɛ ka popovers (popovers) Fàra u kan. Aw ye nin lajɛ ani misali min bɛ kunnafoni di .
jatebɔlan	gaari	`'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'`	Base HTML ka baara kɛ ni popover dabɔli ye. Popover's `title`bɛna pikiri kɛ `.popover-header`. Popover's `content`bɛna pikiri kɛ `.popover-body`. `.arrow`bɛna kɛ popover ka bɛlɛkisɛ ye. Kɛnɛma-datugulan yɔrɔ ka kan ka kɛ ni `.popover`kalasi ye.
titiri	juru \| element \| baarakunda	'' '' .	Title nafa dafalen ni `title`attribut tɛ yen. Ni baara dɔ dira, a bɛ Weele n'a ka `this`'reference set ye popover bɛ nɔrɔ min na.
ka ci	gaari	'kliki' ye.	Popover bɛ daminɛ cogo min na - i ka \| hover \| sinsinnan \| min bɛ fɛn bolo la. Aw bɛ se ka tɛmɛ fɛn caman fɛ minnu bɛ se ka kɛ sababu ye; u fara ɲɔgɔn kan ni yɔrɔ dɔ ye. `manual`tɛ se ka fara ɲɔgɔn kan ni fɛn wɛrɛ ye min bɛ se ka kɛ sababu ye.
offset (fɔcogo ɲuman).	jate \| gaari	0 ye	Offset ka popover ka kɛɲɛ n’a ka laɲini ye. Walasa ka kunnafoni wɛrɛw sɔrɔ, aw ye Popper ka offset docs lajɛ .
fallbackBɔli	juru \| array (ɲɛnajɛ).	'kilape'	A to k’a jira Popper bɛna baara kɛ ni jɔyɔrɔ min ye fallback kan. Walasa ka kunnafoni wɛrɛw sɔrɔ, aw ye Popper ka kɛwale sɛbɛnw lajɛ
ladamuKlass	juru \| baarakunda	'' '' .	Aw bɛ kalanw fara popover kan ni a jirala. A kɔlɔsi ko o kalansenw bɛna fara kalansenw kan minnu kofɔlen don jatebɔsen kɔnɔ. Walasa ka kalansen caman fara ɲɔgɔn kan, aw bɛ u faranfasi ni yɔrɔw ye: `'a b'`. Aw bɛ se fana ka baarakɛcogo dɔ tɛmɛ min ka kan ka sɛrɛ kelen segin min kɔnɔ kalasi tɔgɔ wɛrɛw bɛ sɔrɔ.
dankan	juru \| fɛn	'sɛbɛnni Bangebagaw'.	Overflow constraint dancɛ ka popover. A bɛ Sɔn `'viewport'`, `'window'`, `'scrollParent'`, walima HTMLElement ɲɛfɔli dɔ nafaw ma (JavaScript dɔrɔn). Walasa ka kunnafoni wɛrɛw sɔrɔ, aw ye Popper ka preventOverflow docs lajɛ .
ka saniya kɛ	boolean ye	sɛbɛ	Saniyali in daminɛ walima k’a bali. Ni activated `'template'`, `'content'`ani `'title'`sugandiliw bɛna saniya. aw ye saniya yɔrɔ lajɛ an ka JavaScript sɛbɛnw kɔnɔ .
whiteList ye	minɛn	Nafa min bɛ sɔrɔ a daminɛ na	Fɛn min bɛ ni fɛnw ni taamasiyɛnw ye minnu bɛ Sɔ̀rɔ
sanitizeFn	null ka \| baarakunda	fu	Yan aw bɛ se ka aw yɛrɛ ka sanitize baarakɛcogo di. O bɛ se ka kɛ nafa ye ni aw b’a fɛ ka baara kɛ ni gafemarayɔrɔ kɛrɛnkɛrɛnnen ye walasa ka saniya kɛ.
popperKonfig ye	null ka \| minɛn	fu	Walasa ka Bootstrap ka Popper config default Changer, aw ye Popper ka configuration lajɛ

Data attributes ka ɲɛsin popover kelen-kelen bɛɛ ma

Sugandili minnu bɛ kɛ popover kelen-kelenw na, olu bɛ se ka ɲɛfɔ cogo wɛrɛ la ni kunnafonidilanw ka fɛnw ye, i n’a fɔ a ɲɛfɔlen don cogo min na sanfɛ.

Fɛɛrɛw

Fɛɛrɛ minnu tɛ kelen ye ani fɛn caman tigɛli

API fɛɛrɛw bɛɛ ye asynchrone ye ani ka tɛmɛsira dɔ daminɛ . u bɛ segin welebaga ma ni wuli daminɛna dɔrɔn nka sanni a ka ban . Ka fara o kan, fɛɛrɛ weleli min bɛ kɛ tɛmɛsira yɔrɔ dɔ kan, o bɛna jate .

aw ye an ka JavaScript sɛbɛnw lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ .

`$().popover(options)`

A bɛ popovers daminɛ ka ɲɛsin element collection dɔ ma.

`.popover('show')`

A bɛ element dɔ ka popover jira. A bɛ Segin welebaga ma sani popover ka jira tiɲɛ na (o kɔrɔ ye ko sanni ko shown.bs.popoverin ka Kɛ). O bɛ jate “bolola” ye min bɛ popover (popover) daminɛ. Popovers minnu tɔgɔ ni u kɔnɔkow bɛɛ ye zeru-janya ye, olu tɛ jira abada.

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

`.popover('hide')`

A bɛ element dɔ ka popover dogo. A bɛ Segin welebaga ma sani popover ka dogo tiɲɛ na (o kɔrɔ ye ko sanni ko hidden.bs.popoverin ka Kɛ). O bɛ jate “bolola” ye min bɛ popover (popover) daminɛ.

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

`.popover('toggle')`

A bɛ fɛn dɔ ka popover wuli. A bɛ segin welebaga ma sanni popover ka jira tiɲɛ na walima ka dogo (o kɔrɔ ye ko sanni shown.bs.popoverwalima hidden.bs.popoverko kɛlen ka kɛ). O bɛ jate “bolola” ye min bɛ popover (popover) daminɛ.

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

`.popover('dispose')`

A bɛ element dɔ ka popover dogo ani k’a tiɲɛ. Popovers minnu bɛ baara Kɛ ni delegation ye (minnu bɛ Dabɔ ni option selectorye ) tɛ Se ka Tiɲɛ kelen-kelen na descendant trigger elements kan.

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

`.popover('enable')`

A bɛ element dɔ ka popover seko jira ka jira. Popovers bɛ baara kɛ ni default ye.

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

`.popover('disable')`

A bɛ seko bɔ ka ɲɛsin element dɔ ka popover jirali ma. Popover bɛna se ka jira dɔrɔn ni a daminɛna kokura.

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

`.popover('toggleEnabled')`

A bɛ se ka fɛn dɔ ka popover jira walima ka dogo.

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

`.popover('update')`

A bɛ element dɔ ka popover jɔyɔrɔ kura.

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

Ko minnu kɛra

Ko kɛlen suguya	Cogojirali
jira.bs.popover ye	O ko in bɛ tasuma Bɔ o yɔrɔnin bɛɛ ni `show`misali fɛɛrɛ Weelela.
jirala.bs.popover	O ko in bɛ Bɔ ni popover Kɛra yelen ye baarakɛla fɛ (a bɛna CSS 'tɛmɛsiraw makɔnɔ u ka ban).
dogo.bs.popover ye	O ko in bɛ Fɔ o yɔrɔnin bɛɛ ni `hide`misali fɛɛrɛ Weelera.
dogolen.bs.faantanw	O ko in bɛ Bɔ ni popover dogolen Banna baarakɛla fɛ (a bɛna CSS 'tɛmɛsiraw makɔnɔ u ka ban).
donna.bs.faantanw	O ko in bɛ Bɔ kɛnɛ kan ko kɛlen kɔfɛ `show.bs.popover`ni popover template farala DOM kan.

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