Ruka hadi kwa yaliyomo kuu Ruka hadi kwenye urambazaji wa hati
in English

Popovers

Nyaraka na mifano ya kuongeza popover za Bootstrap, kama zile zinazopatikana katika iOS, kwa kipengele chochote kwenye tovuti yako.

Katika ukurasa huu

Muhtasari

Mambo ya kujua unapotumia programu-jalizi ya popover:

  • Popovers wanategemea maktaba ya wahusika wengine Popper kwa nafasi. Lazima ujumuishe popper.min.js kabla ya bootstrap.js au utumie bootstrap.bundle.min.js/ bootstrap.bundle.jsambayo ina Popper ili popover kufanya kazi!
  • Popover zinahitaji programu- jalizi ya kidokezo kama tegemezi.
  • Popover wamejijumuisha kwa sababu za utendakazi, kwa hivyo ni lazima uanzishe wewe mwenyewe .
  • Urefu wa sifuri titlena contentmaadili hayatawahi kuonyesha popover.
  • Bainisha container: 'body'ili kuepuka kutoa matatizo katika vipengele changamano zaidi (kama vile vikundi vyetu vya ingizo, vikundi vya vitufe, n.k).
  • Kuanzisha popover kwenye vipengee vilivyofichwa haitafanya kazi.
  • Popovers kwa .disabledau disabledvipengele lazima kuanzishwa kwenye kipengele wrapper.
  • Inapoanzishwa kutoka kwa nanga zinazozunguka mistari mingi, popover zitawekwa katikati kati ya upana wa jumla wa nanga. Tumia .text-nowrapkwenye yako <a>ili kuepuka tabia hii.
  • Watu masikini lazima wafichwe kabla vipengele vyao vinavyolingana viondolewe kwenye DOM.
  • Popovers inaweza kuanzishwa shukrani kwa kipengele ndani ya kivuli DOM.
Kwa chaguomsingi, kipengee hiki hutumia kisafishaji cha maudhui kilichojengewa ndani, ambacho huondoa vipengele vyovyote vya HTML ambavyo haviruhusiwi kwa uwazi. Tazama sehemu ya sanitizer katika hati zetu za JavaScript kwa maelezo zaidi.
Athari ya uhuishaji ya kipengele hiki inategemea prefers-reduced-motionhoja ya midia. Tazama sehemu ya mwendo iliyopunguzwa ya hati zetu za ufikivu .

Endelea kusoma ili kuona jinsi popover hufanya kazi na baadhi ya mifano.

Mfano: Washa popover kila mahali

Njia moja ya kuanzisha popover zote kwenye ukurasa itakuwa kuzichagua kulingana na data-bs-togglesifa zao:

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

Mfano: Kutumia containerchaguo

Unapokuwa na mitindo fulani kwenye kipengee kikuu ambacho huingilia popover, utataka kubainisha desturi containerili HTML ya popover ionekane ndani ya kipengele hicho badala yake.

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

Mfano

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

Maelekezo manne

Chaguzi nne zinapatikana: juu, kulia, chini, na kushoto iliyokaa. Maelekezo yanaangaziwa unapotumia Bootstrap katika 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>

Ondoa kwa kubofya ijayo

Tumia focuskichochezi ili kuondoa popover kwenye mbofyo unaofuata wa mtumiaji wa kipengele tofauti na kipengele cha kugeuza.

Lebo maalum inahitajika kwa ajili ya kuondoa-on-ifuatayo

Kwa tabia sahihi ya kivinjari na jukwaa-tofauti, lazima utumie <a>lebo, sio lebo <button>, na lazima pia ujumuishe tabindexsifa.

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

Vipengele vilivyozimwa

Vipengele vilivyo na disabledsifa havitumiki, kumaanisha kuwa watumiaji hawawezi kuelea au kuvibofya ili kuanzisha popover (au kidokezo). Kama suluhisho, utataka kuibua popover kutoka kwa kanga <div>au <span>, iliyofanywa kwa njia bora ya kulenga kibodi kwa kutumia tabindex="0".

Kwa vichochezi vya popover vilivyozimwa, unaweza pia kupendelea data-bs-trigger="hover focus"ili popover ionekane kama maoni ya papo hapo kwa watumiaji wako kwani hawatarajii kubofya kipengele kilichozimwa.

<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

Vigezo

$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);

Matumizi

Washa popover kupitia JavaScript:

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

Kufanya popover kufanya kazi kwa watumiaji wa kibodi na teknolojia saidizi

Ili kuruhusu watumiaji wa kibodi kuwezesha popover zako, unapaswa kuziongeza tu kwenye vipengele vya HTML ambavyo kwa kawaida vinaweza kuangazia kibodi na shirikishi (kama vile viungo au vidhibiti vya fomu). Ingawa vipengele vya HTML vya kiholela (kama vile <span>s) vinaweza kuzingatiwa kwa kuongeza tabindex="0"sifa, hii itaongeza vichupo vinavyoweza kuudhi na kutatanisha kwenye vipengele visivyoingiliana kwa watumiaji wa kibodi, na teknolojia nyingi za usaidizi kwa sasa hazitangazi maudhui ya popover katika hali hii. . Zaidi ya hayo, usitegemee pekee hoverkama kichochezi cha popover zako, kwa kuwa hii itawafanya wasiweze kuwasha watumiaji wa kibodi.

Ingawa unaweza kuingiza HTML tajiri, iliyopangwa katika popover na htmlchaguo, tunapendekeza sana uepuke kuongeza maudhui mengi kupita kiasi. Jinsi popover hufanya kazi kwa sasa ni kwamba, mara tu zinapoonyeshwa, maudhui yao yanaunganishwa na kipengele cha trigger na aria-describedbysifa. Kwa hivyo, maudhui yote ya popover yatatangazwa kwa watumiaji wa teknolojia ya usaidizi kama mtiririko mmoja mrefu usiokatizwa.

Zaidi ya hayo, ingawa inawezekana pia kujumuisha vidhibiti shirikishi (kama vile vipengele vya fomu au viungo) kwenye popover yako (kwa kuongeza vipengele hivi kwenye allowListsifa na lebo zinazoruhusiwa), fahamu kwamba kwa sasa popover haidhibiti mpangilio wa ulengaji wa kibodi. Mtumiaji wa kibodi anapofungua popover, umakini hubaki kwenye kipengee cha kuamsha, na kwa vile popover kwa kawaida hafuati kichochezi mara moja katika muundo wa hati, hakuna hakikisho kwamba kusonga mbele/kubonyeza.TABitahamisha mtumiaji wa kibodi kwenye popover yenyewe. Kwa kifupi, kuongeza tu vidhibiti shirikishi kwenye popover kuna uwezekano wa kufanya vidhibiti hivi visifikiwe/kutotumika kwa watumiaji wa kibodi na watumiaji wa teknolojia saidizi, au angalau kufanya mpangilio wa umakini wa jumla usio na mantiki. Katika hali hizi, zingatia kutumia mazungumzo ya modal badala yake.

Chaguo

Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-bs-, kama katika data-bs-animation="". Hakikisha umebadilisha aina ya kipochi cha jina la chaguo kutoka kwa camelCase hadi kebab-kesi wakati wa kupitisha chaguo kupitia sifa za data. Kwa mfano, badala ya kutumia data-bs-customClass="beautifier", tumia data-bs-custom-class="beautifier".

Kumbuka kuwa kwa sababu za usalama sanitize, sanitizeFn, na allowListchaguzi haziwezi kutolewa kwa kutumia sifa za data.
Jina Aina Chaguomsingi Maelezo
animation boolean true Tumia mpito wa kufifisha wa CSS kwenye popover
container kamba | kipengele | uongo false

Huongeza popover kwa kipengele maalum. Mfano container: 'body':. Chaguo hili ni muhimu sana kwa kuwa hukuruhusu kuweka popover katika mtiririko wa hati karibu na kipengee cha kuchochea - ambayo itazuia popover kuelea kutoka kwa kipengele cha kuchochea wakati wa kubadilisha ukubwa wa dirisha.
content kamba | kipengele | kazi ''

Thamani chaguo-msingi ya maudhui ikiwa data-bs-contentsifa haipo.

Ikiwa kipengele cha kukokotoa kitatolewa, kitaitwa na thismarejeleo yake yamewekwa kwa kipengele ambacho popover imeambatishwa.
delay nambari | kitu 0

Kuchelewesha kuonyesha na kuficha popover (ms) - haitumiki kwa aina ya kichochezi cha mwongozo

Nambari ikitolewa, ucheleweshaji unatumika kwa Ficha/onyesho zote mbili

Muundo wa kitu ni:delay: { "show": 500, "hide": 100 }
html boolean false Ingiza HTML kwenye popover. Ikiwa sivyo, innerTextkipengele kitatumika kuingiza maudhui kwenye DOM. Tumia maandishi ikiwa una wasiwasi kuhusu mashambulizi ya XSS.
placement kamba | kazi 'right'

Jinsi ya kuweka popover - otomatiki | juu | chini | kushoto | haki.
Wakati autoimebainishwa, itaelekeza upya popover kwa nguvu.

Chaguo za kukokotoa zinapotumiwa kubainisha uwekaji, huitwa na nodi ya popover DOM kama hoja yake ya kwanza na kipengele cha kuanzisha nodi ya DOM kama ya pili. thisMuktadha umewekwa kwa mfano wa popover .
selector kamba | uongo false Iwapo kiteuzi kitatolewa, vipengee vya popover vitakabidhiwa kwa malengo maalum. Kwa vitendo, hii inatumika kuwezesha maudhui ya HTML yanayobadilika ili kuongezwa popover. Tazama hii na mfano wa kuelimisha .
template kamba '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

HTML msingi ya kutumia wakati wa kuunda popover.

popover's titleitakuwa hudungwa katika .popover-header.

popover's contentitakuwa hudungwa katika .popover-body.

.popover-arrowitakuwa mshale wa popover.

Kipengele cha kanga cha nje kinapaswa kuwa na .popoverdarasa.
title kamba | kipengele | kazi ''

Thamani chaguo-msingi ya kichwa ikiwa titlesifa haipo.

Ikiwa kipengele cha kukokotoa kitatolewa, kitaitwa na thismarejeleo yake yamewekwa kwa kipengele ambacho popover imeambatishwa.
trigger kamba 'click' Jinsi popover inavyoanzishwa - bofya | ruka | kuzingatia | mwongozo. Unaweza kupitisha vichochezi vingi; kuwatenganisha na nafasi. manualhaiwezi kuunganishwa na kichochezi kingine chochote.
fallbackPlacements safu ['top', 'right', 'bottom', 'left'] Bainisha uwekaji nyuma kwa kutoa orodha ya uwekaji katika safu (kwa mpangilio wa upendeleo). Kwa habari zaidi rejelea hati za tabia za Popper
boundary kamba | kipengele 'clippingParents' Kizuizi cha kufurika cha mpaka wa popover (hutumika tu kwa kirekebishaji cha Popper cha kuzuiaOverflow). Kwa chaguo-msingi ni 'clippingParents'na inaweza kukubali rejeleo la HTMLElement (kupitia JavaScript pekee). Kwa maelezo zaidi rejelea hati za detectOverflow za Popper .
customClass kamba | kazi ''

Ongeza madarasa kwenye popover inapoonyeshwa. Kumbuka kuwa madarasa haya yataongezwa pamoja na madarasa yoyote yaliyobainishwa kwenye kiolezo. Ili kuongeza madarasa mengi, yatenganishe na nafasi: 'class-1 class-2'.

Unaweza pia kupitisha chaguo za kukokotoa ambazo zinapaswa kurudisha mfuatano mmoja ulio na majina ya ziada ya darasa.
sanitize boolean true Washa au lemaza usafishaji. Ikiwashwa 'template', 'content'na 'title'chaguzi zitasafishwa. Tazama sehemu ya sanitizer katika hati zetu za JavaScript .
allowList kitu Thamani chaguomsingi Kitu ambacho kina sifa na lebo zinazoruhusiwa
sanitizeFn null | kazi null Hapa unaweza kusambaza kazi yako ya kusafisha. Hii inaweza kuwa muhimu ikiwa unapendelea kutumia maktaba maalum kutekeleza usafi wa mazingira.
offset safu | kamba | kazi [0, 8]

Kukabiliana na popover kuhusiana na lengo lake. Unaweza kupitisha kamba katika sifa za data na maadili yaliyotenganishwa kwa koma kama:data-bs-offset="10,20"

Wakati kipengele cha chaguo za kukokotoa kinapotumiwa kubainisha urekebishaji, huitwa na kitu kilicho na uwekaji wa popper, rejeleo, na miondoko ya popper kama hoja yake ya kwanza. Kipengele cha kuchochea nodi ya DOM hupitishwa kama hoja ya pili. Chaguo la kukokotoa lazima lirudishe safu iliyo na nambari mbili: .[skidding, distance]

Kwa maelezo zaidi rejelea hati za kukabiliana na Popper .
popperConfig null | kitu | kazi null

Ili kubadilisha usanidi chaguo-msingi wa Bootstrap wa Popper, angalia usanidi wa Popper .

Chaguo za kukokotoa zinapotumiwa kuunda usanidi wa Popper, huitwa na kitu ambacho kina usanidi chaguo-msingi wa Bootstrap wa Popper. Inakusaidia kutumia na kuunganisha chaguo-msingi na usanidi wako mwenyewe. Chaguo la kukokotoa lazima lirudishe kipengee cha usanidi kwa Popper.

Sifa za data kwa popovers binafsi

Chaguo za popover binafsi zinaweza kubainishwa kwa kutumia sifa za data, kama ilivyoelezwa hapo juu.

Kutumia kipengele napopperConfig

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

Mbinu

Njia za Asynchronous na mabadiliko

Njia zote za API ni za asynchronous na zinaanzisha mpito . Wanarudi kwa mpigaji mara tu mpito unapoanza lakini kabla haujaisha . Kwa kuongeza, simu ya mbinu kwenye sehemu ya mpito itapuuzwa .

Tazama hati zetu za JavaScript kwa maelezo zaidi .

onyesha

Hufichua popover ya kipengele. Hurejesha kwa mpigaji simu kabla ya popover kuonyeshwa (yaani kabla ya shown.bs.popovertukio kutokea). Hii inachukuliwa kuwa "mwongozo" wa kuchochea wa popover. Popovers ambao mada na maudhui yao ni ya urefu wa sufuri kamwe hayaonyeshwi.

myPopover.show()

kujificha

Huficha popover ya kipengele. Hurejesha kwa mpigaji simu kabla popover haijafichwa (yaani kabla ya hidden.bs.popovertukio kutokea). Hii inachukuliwa kuwa "mwongozo" wa kuchochea wa popover.

myPopover.hide()

kugeuza

Hugeuza popover ya kipengele. Hurejesha kwa mpigaji simu kabla popover haijaonyeshwa au kufichwa (yaani kabla ya tukio shown.bs.popoverau hidden.bs.popovertukio). Hii inachukuliwa kuwa "mwongozo" wa kuchochea wa popover.

myPopover.toggle()

tupa

Huficha na kuharibu popover ya kipengele (Huondoa data iliyohifadhiwa kwenye kipengele cha DOM). Popovers zinazotumia utumaji kaumu (ambazo zinaundwa kwa kutumia chaguo )selector haziwezi kuharibiwa kibinafsi kwenye vipengele vya vichochezi vya kizazi.

myPopover.dispose()

wezesha

Huipa popover ya kipengele uwezo wa kuonyeshwa. Popover huwezeshwa kwa chaguo-msingi.

myPopover.enable()

Lemaza

Huondoa uwezo wa popover ya kipengele kuonyeshwa. Popover itaweza tu kuonyeshwa ikiwa imewashwa tena.

myPopover.disable()

kugeuzaImewashwa

Hugeuza uwezo wa popover ya kipengele kuonyeshwa au kufichwa.

myPopover.toggleEnabled()

sasisha

Inasasisha nafasi ya popover ya kipengele.

myPopover.update()

getInstance

Njia tuli ambayo hukuruhusu kupata mfano wa popover unaohusishwa na kipengee cha DOM

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

getOrCreateInstance

Njia tuli ambayo hukuruhusu kupata mfano wa popover unaohusishwa na kipengee cha DOM, au kuunda mpya ikiwa haikuanzishwa.

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

Matukio

Aina ya tukio Maelezo
onyesha.bs.umasikini Tukio hili huwaka mara moja wakati shownjia ya mfano inaitwa.
imeonyeshwa.bs.umasikini Tukio hili linafutwa wakati popover imefanywa kuonekana kwa mtumiaji (itasubiri mabadiliko ya CSS kukamilika).
ficha.bs.umasikini Tukio hili linafutwa mara moja wakati hidenjia ya mfano imeitwa.
siri.bs. popover Tukio hili linafutwa wakati popover imekamilika kufichwa kutoka kwa mtumiaji (itasubiri mabadiliko ya CSS kukamilika).
imeingizwa.bs.popover Tukio hili limefutwa baada ya show.bs.popovertukio wakati kiolezo cha popover kimeongezwa kwenye DOM. 
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})