in English

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 containerkoho

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 thiskuhikuhi 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, texte 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 autokuhikuhi ʻ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 thispōʻ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 titleloko o ka .popover-header.

E hoʻokomo ʻia ka popover i contentloko o ka .popover-body.

.arrowe lilo i ka pua popover.

Pono e loaʻa ka .popoverpapa 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 thiskuhikuhi 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 showkā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ā hidei 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.popoverhanana i ka wā i hoʻohui ʻia ai ka template popover i ka DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})