Popovers

Nā palapala a me nā laʻana no ka hoʻohui ʻana i nā popovers Bootstrap, e like me nā mea i loaʻa ma iOS, i kekahi mea ma kāu pūnaewele.

Nānā nui

Nā mea e ʻike ai i ka hoʻohana ʻana i ka popover plugin:

Ke hilinaʻi nei nā Popovers i ka waihona puke ʻaoʻao 3 Popper no ka hoʻonohonoho ʻana. Pono ʻoe e hoʻokomo i ka popper.min.js ma mua o ka bootstrap.js a i ʻole ka hoʻohana ʻana bootstrap.bundle.min.js/ bootstrap.bundle.jsi loaʻa iā Popper i mea e hana ai nā popovers!
Pono nā Popovers i ka plugin tooltip ma ke ʻano he hilinaʻi.
Inā ʻoe e kūkulu nei i kā mākou JavaScript mai ke kumu, ponoutil.js ia .
Hoʻokomo ʻia nā Popovers no nā kumu hana, no laila pono ʻoe e hoʻomaka iā lākou iho .
ʻAʻole loa e hōʻike ʻia kahi popover ka lōʻihi ʻole titlea me nā waiwai.content
E wehewehe container: 'body'i mea e pale aku ai i nā pilikia i loko o nā ʻāpana paʻakikī (e like me kā mākou pūʻulu hoʻokomo, pūʻulu pihi, a pēlā aku).
ʻAʻole e holo ka hoʻoulu ʻana i nā popovers ma nā mea huna.
Pono e ho'āla ʻia nā popovers no a i .disabledʻole disablednā mea ʻeleʻele ma luna o kahi mea ʻōwili.
Ke hoʻāla ʻia mai nā heleuma e ʻōwili i nā laina he nui, e kau ʻia nā popovers ma waena o ka laula holoʻokoʻa o nā heleuma. E hoʻohana .text-nowrapi kāu <a>s e pale i kēia ʻano.
Pono e hūnā ʻia nā popover ma mua o ka wehe ʻia ʻana o kā lākou mau mea pili mai ka DOM.
Hiki ke hoʻoulu ʻia nā popovers i kahi mea i loko o kahi DOM shadow.

Ma ka maʻamau, hoʻohana kēia ʻāpana i ka mea hoʻomaʻemaʻe maʻiʻo i kūkulu ʻia, kahi e wehe ai i nā mea HTML i ʻae ʻole ʻia. E ʻike i ka ʻāpana sanitizer i kā mākou palapala JavaScript no nā kikoʻī hou aku.

ʻO ka hopena animation o kēia māhele e pili ana i ka prefers-reduced-motionnīnau media. E ʻike i ka ʻāpana hoʻohaʻahaʻa o kā mākou palapala hiki ke komo .

E hoʻomau i ka heluhelu e ʻike i ka hana ʻana o nā popovers me kekahi mau laʻana.

Laʻana: Hoʻā i nā popovers ma nā wahi āpau

ʻO kahi ala e hoʻomaka ai i nā popovers a pau ma kahi ʻaoʻao ʻo ke koho ʻana iā lākou ma ko lākou data-toggleʻano:

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

Laʻana: Ke hoʻohana nei i ke `container`koho

Ke loaʻa iā ʻoe kekahi mau kaila ma kahi mea makua e hoʻopilikia i kahi popover, makemake ʻoe e kuhikuhi i kahi maʻamau containeri ʻike ʻia ka HTML o ka popover i loko o ia mea.

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

Laʻana

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

ʻEhā kuhikuhi

Loaʻa nā koho ʻehā: luna, ʻākau, lalo, a hema.

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

Hoʻokuʻu i ke kaomi aʻe

E hoʻohana i ke focuskumu no ka hoʻokuʻu ʻana i nā popovers ma ke kaomi aʻe a ka mea hoʻohana i kekahi mea ʻokoʻa ma mua o ka mea hoʻololi.

Pono ka māka kikoʻī no ka hoʻokuʻu ʻana ma ka kaomi aʻe

No ka hoʻohana ʻana i ka <a>lepili, ʻaʻole ka <button>tag, a pono ʻoe e hoʻokomo i kahi tabindexʻano.

Hoʻopau popover

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

Nā mea hoʻopale

ʻAʻole pili nā mea me ka disabledhiʻohiʻona, ʻo ia hoʻi, ʻaʻole hiki i nā mea hoʻohana ke hoʻoluli a kaomi paha iā lākou no ka hoʻomaka ʻana i kahi popover (a i ʻole tooltip). Ma ke ʻano he hana hoʻoponopono, makemake ʻoe e hoʻomaka i ka popover mai kahi wīwī a i <div>ʻole <span>a hoʻopau i ka mea pointer-eventsma ka mea kīnā.

No nā mea hoʻomaka popover kīnā ʻole, makemake paha ʻoe i data-trigger="hover"ʻike ʻia ka popover ma ke ʻano he manaʻo ʻike koke i kāu mea hoʻohana no ka mea ʻaʻole lākou e manaʻo e kaomi i kahi mea kīnā.

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

Hoʻohana

E ho'ā i nā popovers ma o JavaScript:

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

ʻO ka wikiwiki GPU

ʻIke ʻia nā popovers i kekahi manawa ma Windows 10 nā mea ma muli o ka wikiwiki GPU a me kahi ʻōnaehana DPI i hoʻololi ʻia. ʻO ka workaround no kēia ma v4 e hoʻopau i ka wikiwiki GPU e like me ka mea e pono ai ma kāu popovers.

Manaʻo ʻia e hoʻoponopono:

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

Hana ʻia nā popovers no nā mea hoʻohana ʻenehana kōkua

No ka ʻae ʻana i nā mea hoʻohana kīpē e hoʻāla i kāu mau popovers, pono ʻoe e hoʻohui iā lākou i nā mea HTML i maʻa mau i ka keyboard-focusable a me ka launa pū ʻana (e like me nā loulou a i ʻole nā mana hoʻoponopono). ʻOiai hiki ke hoʻopaʻa ʻia nā mea HTML ʻokoʻa (e like me <span>s) ma o ka hoʻohui ʻana i ke ʻano tabindex="0", e hoʻohui kēia i nā pahu hoʻonāukiuki a huikau i nā mea pili ʻole no nā mea hoʻohana keyboard, a ʻo ka hapa nui o nā ʻenehana kōkua i kēia manawa ʻaʻole hoʻolaha i ka ʻike o ka popover i kēia kūlana. . Eia hou, mai hilinaʻi wale ma hoverke ʻano he kumu no kāu popovers, no ka mea e hiki ʻole ai iā lākou ke hoʻomaka no nā mea hoʻohana keyboard.

ʻOiai hiki iā ʻoe ke hoʻokomo i ka HTML waiwai, kūkulu ʻia i loko o nā popovers me ke htmlkoho, makemake mākou e hōʻole ʻoe i ka hoʻohui ʻana i ka nui o ka ʻike. ʻO ke ʻano o ka hana ʻana o nā popovers i kēia manawa, i ka manawa i hōʻike ʻia, pili ʻia kā lākou ʻike i ka mea hoʻoulu me ka aria-describedbyʻano. ʻO ka hopena, e hoʻolaha ʻia ka ʻike holoʻokoʻa o ka popover i nā mea hoʻohana ʻenehana kōkua ma ke ʻano he kahawai lōʻihi ʻole.

Eia hou, ʻoiai hiki ke hoʻokomo pū i nā mana pāʻani (e like me nā ʻano kumu a i ʻole nā loulou) i kāu popover (ma ka hoʻohui ʻana i kēia mau mea i nā ʻano whiteLista i ʻae ʻia a me nā hōʻailona), e makaʻala ʻaʻole mālama ka popover i kēia manawa i ka papa kuhikuhi. Ke wehe ka mea hoʻohana keyboard i kahi popover, e kau ka manaʻo ma ka mea hoʻāla, a no ka mea, ʻaʻole e hahai koke ka popover i ke kumu o ka palapala, ʻaʻohe mea e hōʻoiaʻiʻo e neʻe i mua / kaomi.TABe hoʻoneʻe i kahi mea hoʻohana keyboard i loko o ka popover ponoʻī. I ka pōkole, ʻo ka hoʻohui wale ʻana i nā mana interactive i kahi popover e hiki ʻole ai ke hoʻohana ʻia kēia mau mana no nā mea hoʻohana keyboard a me nā mea hoʻohana i nā ʻenehana kōkua, a i ʻole ka mea liʻiliʻi loa e hana i kahi kauoha kikoʻī holoʻokoʻa. I kēia mau hihia, e noʻonoʻo e hoʻohana i kahi kamaʻilio modal.

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-, e like me ka data-animation="".

E hoʻomanaʻo ʻaʻole hiki ke hāʻawi ʻia nā sanitize, sanitizeFna me whiteListnā koho me ka hoʻohana ʻana i nā ʻano ʻikepili.

inoa	ʻAno	Default	wehewehe
hoʻouluulu	boolean	ʻoiaʻiʻo	E noi i kahi hoʻololi fade CSS i ka popover
ipu	kaula \| mea \| wahahee	wahahee	Hoʻopili i ka popover i kahi mea kikoʻī. Laʻana: `container: 'body'`. He mea maikaʻi loa kēia koho no ka mea hiki iā ʻoe ke hoʻonoho i ka popover i ke kahe o ka palapala ma kahi o ka mea hoʻāla - e pale aku i ka popover mai ka lana ʻana mai ka mea hoʻāla i ka wā e hoʻololi ai ka puka makani.
maʻiʻo	kaula \| mea \| hana	''	Waiwai maʻiʻo paʻamau inā `data-content`ʻaʻole i loaʻa ke ʻano. Inā hāʻawi ʻia kahi hana, e kāhea ʻia me kāna `this`kuhikuhi i hoʻonohonoho ʻia i ka mea i hoʻopili ʻia ka popover.
lohi	helu \| mea	0	Hoʻopaneʻe ka hōʻike ʻana a me ka hūnā ʻana i ka popover (ms) - ʻaʻole pili i ke ʻano hoʻoiho manual Inā hāʻawi ʻia kahi helu, hoʻopili ʻia ka lohi i ka huna/hōʻike ʻelua ʻO ka hoʻolālā mea:`delay: { "show": 500, "hide": 100 }`
html	boolean	wahahee	E hoʻokomo i ka HTML i ka popover. Inā he wahaheʻe, `text`e hoʻohana ʻia ke ʻano o jQuery e hoʻokomo i ka ʻike i loko o ka DOM. E hoʻohana i ka kikokikona inā hopohopo ʻoe e pili ana i ka hoʻouka kaua XSS.
hoʻokomo	kaula \| hana	'akau'	Pehea e hoʻonoho ai i ka popover - auto \| luna \| lalo \| waiho \| akau. Ke `auto`kuhikuhi ʻia, e hoʻohuli hou ia i ka popover. Ke hoʻohana ʻia kahi hana no ka hoʻoholo ʻana i ka hoʻokomo ʻana, ua kapa ʻia ʻo ia me ka popover DOM node ma ke ʻano he kumu hoʻopaʻapaʻa mua a ʻo ka mea hoʻomaka DOM node ʻo ia ka lua. Hoʻonohonoho ʻia ka `this`pōʻaiapili i ka laʻana popover.
mea koho	kaula \| wahahee	wahahee	Inā hāʻawi ʻia kahi mea koho, e hāʻawi ʻia nā mea popover i nā pahuhopu i kuhikuhi ʻia. I ka hoʻomaʻamaʻa ʻana, hoʻohana ʻia kēia e hiki ai i ka ʻike HTML dynamic ke hoʻohui i nā popovers. E ʻike i kēia a me kahi laʻana ʻike .
template	kaulahao	`'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'`	Base HTML e hoʻohana i ka hana ʻana i ka popover. E hoʻokomo ʻia ka popover i `title`loko o ka `.popover-header`. E hoʻokomo ʻia ka popover i `content`loko o ka `.popover-body`. `.arrow`e lilo i ka pua popover. Pono e loaʻa ka `.popover`papa i ka mea ʻōwili waho loa.
inoa	kaula \| mea \| hana	''	Waiwai poʻo inoa paʻamau inā `title`ʻaʻole i loaʻa ke ʻano. Inā hāʻawi ʻia kahi hana, e kāhea ʻia me kāna `this`kuhikuhi i hoʻonohonoho ʻia i ka mea i hoʻopili ʻia ka popover.
hoʻomaka	kaulahao	' kaomi '	Pehea e hoʻomaka ai ka popover - kaomi \| lele \| kālele \| manual. Hiki iā ʻoe ke hāʻawi i nā kumu he nui; e hoʻokaʻawale iā lākou me kahi ākea. `manual`ʻAʻole hiki ke hoʻohui ʻia me kekahi mea hoʻoulu ʻē aʻe.
offset	helu \| kaulahao	0	Offset o ka popover e pili ana i kona pahu hopu. No ka ʻike hou aku, e nānā i nā palapala offset a Popper .
hāʻule hopePlacement	kaula \| pūʻulu	'pele'	E ʻae e kuhikuhi i kahi kūlana e hoʻohana ai ʻo Popper ma ka hāʻule hope. No ka ʻike hou aku, e nānā i nā palapala hana a Popper
customClass	kaula \| hana	''	Hoʻohui i nā papa i ka popover ke hōʻike ʻia. E hoʻomaopopo e hoʻohui ʻia kēia mau papa i nā papa i kuhikuhi ʻia i loko o ka template. No ka hoʻohui ʻana i nā papa he nui, e hoʻokaʻawale iā lākou me nā hakahaka: `'a b'`. Hiki iā ʻoe ke hāʻawi i kahi hana e hoʻihoʻi i kahi kaula hoʻokahi i loaʻa nā inoa papa hou.
palena	kaula \| ʻeleʻele	'scrollParent'	palena kaohi o ka popover. ʻAe i nā waiwai o `'viewport'`, `'window'`, `'scrollParent'`, a i ʻole HTMLElement reference (JavaScript wale nō). No ka ʻike hou aku e nānā i nā palapala preventOverflow a Popper .
hoʻomaʻemaʻe	boolean	ʻoiaʻiʻo	E ho'ā a hoʻopau paha i ka hoʻomaʻemaʻe. Inā ho'āla ʻia `'template'`, `'content'`a `'title'`e hoʻomaʻemaʻe ʻia nā koho. E ʻike i ka ʻāpana sanitizer i kā mākou palapala JavaScript .
papa inoa keʻokeʻo	mea	Waiwai paʻamau	He mea i ʻae ʻia nā ʻano a me nā hōʻailona
hoomaemaeFn	null \| hana	null	Maanei hiki iā ʻoe ke hoʻolako i kāu hana hoʻomaʻemaʻe ponoʻī. Hiki ke kōkua inā makemake ʻoe e hoʻohana i kahi waihona i hoʻolaʻa ʻia e hana i ka hoʻomaʻemaʻe.
popperConfig	null \| mea	null	E hoʻololi i ka hoʻonohonoho Popper paʻamau o Bootstrap, e ʻike i ka hoʻonohonoho ʻana o Popper

Nā hiʻohiʻona ʻikepili no nā popovers pākahi

Hiki ke koho ʻia nā koho no nā popovers pākahi ma o ka hoʻohana ʻana i nā ʻano ʻikepili, e like me ka wehewehe ʻana ma luna.

Nā ʻano hana

Nā ʻano asynchronous a me nā hoʻololi

Asynchronous nā ala API āpau a hoʻomaka i kahi hoʻololi . Hoʻi lākou i ka mea kelepona i ka wā e hoʻomaka ai ka hoʻololi akā ma mua o ka pau ʻana . Eia kekahi, e nānā ʻole ʻia kahi ala e kāhea ai i kahi mea hoʻololi .

E ʻike i kā mākou palapala JavaScript no ka ʻike hou aku .

`$().popover(options)`

Hoʻomaka i nā popovers no kahi hōʻiliʻili mea.

`.popover('show')`

Hōʻike i ka popover o kekahi mea. Hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka popover (ʻo ia hoʻi ma mua o ka hiki ʻana o ka shown.bs.popoverhanana). Manaʻo ʻia kēia he "manual" triggering o ka popover. ʻAʻole i hōʻike ʻia nā Popovers nona ka inoa a me ka ʻike i ʻole ka lōʻihi.

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

`.popover('hide')`

Hūnā i ka popover o kekahi mea. Hoʻi i ka mea kelepona ma mua o ka hūnā ʻia ʻana o ka popover (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hidden.bs.popoverhanana). Manaʻo ʻia kēia he "manual" triggering o ka popover.

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

`.popover('toggle')`

Hoʻololi i ka popover o kekahi mea. Hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana a huna ʻana paha o ka popover (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hanana shown.bs.popovera i ʻole). hidden.bs.popoverManaʻo ʻia kēia he "manual" triggering o ka popover.

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

`.popover('dispose')`

Huna a luku i ka popover o kekahi mea. ʻAʻole hiki ke hoʻopau pākahi ʻia nā popovers e hoʻohana ana i ka ʻelele (i hana ʻia me ka hoʻohana ʻana i ke selectorkoho ).

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

`.popover('enable')`

Hāʻawi i ka popover o kahi mea i hiki ke hōʻike ʻia. Hoʻohana ʻia nā Popovers ma ka paʻamau.

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

`.popover('disable')`

Wehe i ka hiki ke hōʻike ʻia ka popover o kahi mea. Hiki ke hōʻike ʻia ka popover inā hoʻā hou ʻia.

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

`.popover('toggleEnabled')`

Hoʻololi i ka hiki ke hōʻike ʻia a hūnā ʻia paha ka popover o kekahi mea.

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

`.popover('update')`

Hoʻohou i ke kūlana o ka popover o kekahi mea.

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

Nā hanana

ʻAno Hanana	wehewehe
hōʻike.bs.popover	Hoʻomaka koke kēia hanana i ke `show`kāhea ʻia ʻana o ke ʻano hana.
hoikeia.bs.popover	Hoʻopau ʻia kēia hanana i ka wā i ʻike ʻia ai ka popover i ka mea hoʻohana (e kali no ka hoʻololi ʻana o CSS).
huna.bs.popover	Hoʻopau koke ʻia kēia hanana i ka wā `hide`i kāhea ʻia ai ke ʻano hana.
huna.bs.popover	Hoʻopau ʻia kēia hanana i ka pau ʻana o ka huna ʻana o ka popover mai ka mea hoʻohana (e kali no ka hoʻololi ʻana o CSS).
hookomo.bs.popover	Hoʻopau ʻia kēia hanana ma hope o ka `show.bs.popover`hanana i ka wā i hoʻohui ʻia ai ka template popover i ka DOM.

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