Source

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.js no ka hoʻonoho ʻ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.js 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 white-space: nowrap;i 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.

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

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)

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="".

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 | e hoolana | makaikai | manual. Hiki iā ʻoe ke hāʻawi i nā kumu he nui; e hoʻokaʻawale iā lākou me kahi ākea. ʻAʻole hiki ke hoʻohui ʻia ka 'manual' me nā 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.js .
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.js
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.js .

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 hōʻike ʻia nā Popovers nona ke poʻo inoa a me ka ʻike.

$('#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…
})