Holo i ka ʻike nui Holo i ka hoʻokele docs
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.
  • 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-bs-toggleʻano:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

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.

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

Laʻana

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-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. Hoʻohālikelike ʻia nā kuhikuhi i ka wā e hoʻohana ai iā Bootstrap ma RTL.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-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.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  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>, i hana maikaʻi ʻia ʻo keyboard-focusable me ka hoʻohana ʻana i tabindex="0".

No nā mea hoʻomaka popover kīnā ʻole, makemake paha ʻoe i data-bs-trigger="hover focus"ʻ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" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Sass

Nā mea hoʻololi

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

Hoʻohana

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

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

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

No ka ʻae ʻana i nā mea hoʻohana papapā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 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 e 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, manaʻo ikaika 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 ke 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 kekahi, ʻ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 allowLista me nā hōʻailona i ʻae ʻia), e hoʻomaopopo ʻoe ʻaʻole e hoʻokele 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-bs-, e like me ka data-bs-animation="". E hōʻoia e hoʻololi i ke ʻano hihia o ka inoa koho mai camelCase i kebab-case i ka wā e hāʻawi ai i nā koho ma o nā ʻano ʻikepili. No ka laʻana, ma kahi o ka hoʻohana ʻana data-bs-customClass="beautifier", hoʻohana data-bs-custom-class="beautifier".

sanitizeE hoʻomanaʻo ʻaʻole hiki ke hāʻawi ʻia nā , sanitizeFn, a me nā koho no nā kumu palekana allowListme ka hoʻohana ʻana i nā ʻano ʻikepili.
inoa ʻAno Default wehewehe
animation boolean true E noi i kahi hoʻololi fade CSS i ka popover
container kaula | mea | wahahee false

Hoʻopili i ka popover i kahi mea kikoʻī. Laʻana: container: 'body'. He mea pono 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.

content kaula | mea | hana ''

Waiwai maʻiʻo paʻamau inā data-bs-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.

delay 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 false E hoʻokomo i ka HTML i ka popover. Inā hewa, innerTexte hoʻohana ʻia ka waiwai 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.
placement kaula | hana 'right'

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.

selector kaula | wahahee false 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 nā ʻike HTML ikaika ke hoʻohui i nā popovers. E ʻike i kēia a me kahi hiʻohiʻona ʻike .
template kaulahao '<div class="popover" role="tooltip"><div class="popover-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.

.popover-arrowe lilo i pua o ka popover.

Pono e loaʻa ka .popoverpapa i ka mea ʻōwili waho loa.

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

trigger kaulahao 'click' 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. manualʻAʻole hiki ke hoʻohui ʻia me kekahi mea hoʻoulu ʻē aʻe.
fallbackPlacements pūʻulu ['top', 'right', 'bottom', 'left'] E wehewehe i nā wahi hāʻule hope ma ka hāʻawi ʻana i kahi papa inoa o nā wahi i ka laha (e like me ka makemake). No ka ʻike hou aku, e nānā i nā palapala hana a Popper
boundary kaula | ʻeleʻele 'clippingParents' ʻO ka palena palena o ka popover (pili wale i ka mea hoʻololi preventOverflow a Popper). Ma ka maʻamau, 'clippingParents'hiki iā ia ke ʻae i kahi kuhikuhi HTMLElement (ma JavaScript wale nō). No ka ʻike hou aku e nānā i nā palapala detectOverflow 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: 'class-1 class-2'.

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.

sanitize boolean true 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 .
allowList mea Waiwai paʻamau He mea i ʻae ʻia nā ʻano a me nā hōʻailona
sanitizeFn 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.
offset laha | kaula | hana [0, 8]

Offset o ka popover e pili ana i kona pahu hopu. Hiki iā ʻoe ke hāʻawi i kahi kaula i nā ʻano ʻikepili me nā koma i hoʻokaʻawale ʻia e like me:data-bs-offset="10,20"

Ke hoʻohana ʻia kahi hana no ka hoʻoholo ʻana i ka offset, ua kapa ʻia ia me kahi mea i loaʻa ka popper placement, ka kuhikuhi, a me ka popper rects e like me kāna hoʻopaʻapaʻa mua. Hoʻoholo ʻia ka mea hoʻomaka DOM node ma ke ʻano he pane ʻelua. Pono ka hana e hoʻihoʻi i kahi lae me nā helu ʻelua: .[skidding, distance]

No ka ʻike hou aku e nānā i nā palapala offset a Popper .

popperConfig null | mea | hana null

No ka hoʻololi i ka hoʻonohonoho Popper paʻamau o Bootstrap, e ʻike i ka hoʻonohonoho ʻana o Popper .

Ke hoʻohana ʻia kahi hana no ka hana ʻana i ka hoʻonohonoho Popper, kāhea ʻia me kahi mea i loaʻa ka hoʻonohonoho Popper paʻamau o Bootstrap. Kōkua ia iā ʻoe e hoʻohana a hoʻohui i ka paʻamau me kāu hoʻonohonoho ponoʻī. Pono e hoʻihoʻi ka hana i kahi mea hoʻonohonoho no Popper.

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

Hiki ke koho ʻia nā koho no kēlā me kēia popovers ma o ka hoʻohana ʻana i nā hiʻohiʻona ʻikepili, e like me ka wehewehe ʻana ma luna.

Ke hoʻohana nei i ka hana mepopperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

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 .

hōʻike

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.

myPopover.show()

huna

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.

myPopover.hide()

hoʻololi

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.

myPopover.toggle()

e hoolei aku

Hūnā a hoʻopau i ka popover o kahi mea (Wehe i ka ʻikepili i mālama ʻia ma ka mea DOM). ʻ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 ).

myPopover.dispose()

hiki

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

myPopover.enable()

hoʻopau

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

myPopover.disable()

hoʻololi

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

myPopover.toggleEnabled()

hōʻano hou

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

myPopover.update()

getInstance

ʻO ke ala static e hiki ai iā ʻoe ke kiʻi i ka laʻana popover e pili ana me kahi mea DOM

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance

ʻO ke ala static e hiki ai iā ʻoe ke kiʻi i ka popover i pili me kahi mea DOM, a i ʻole e hana i kahi mea hou inā ʻaʻole i hoʻomaka ʻia.

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

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.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})