Перайсці да асноўнага зместу Перайсці да навігацыі па дакументах
in English

Папаўеры

Дакументацыя і прыклады дадання ўсплывальных вобразаў Bootstrap, такіх як тыя, што ёсць у iOS, да любога элемента вашага сайта.

Агляд

Што трэба ведаць пры выкарыстанні плагіна Popover:

  • Для пазіцыянавання Popovers разлічваюць на староннію бібліятэку Popper . Вы павінны ўключыць popper.min.js перад bootstrap.js або выкарыстаць bootstrap.bundle.min.js/ bootstrap.bundle.js, які змяшчае Popper, каб усплывальныя ўсплыванні працавалі!
  • Для ўсплывальных праграм у якасці залежнасці патрабуецца ўбудова падказкі .
  • Усплывальныя паказанні з'яўляюцца выбарнымі з меркаванняў прадукцыйнасці, таму вы павінны ініцыялізаваць іх самастойна .
  • Нулявая даўжыня titleі contentзначэнні ніколі не пакажуць усплывальнае значэнне.
  • Укажыце container: 'body', каб пазбегнуць праблем з візуалізацыяй больш складаных кампанентаў (напрыклад, нашых груп уводу, груп кнопак і г.д.).
  • Запуск усплываючых вокнаў на схаваных элементах не будзе працаваць.
  • Усплывальныя вокны для элементаў .disabledабо disabledпавінны запускацца на элеменце-абгортцы.
  • Пры запуску з прывязак, якія пераходзяць на некалькі ліній, усплывальныя вокны будуць размяшчацца па цэнтры агульнай шырыні прывязак. Выкарыстоўвайце .text-nowrapна вашым <a>s, каб пазбегнуць такіх паводзін.
  • Усплывальныя вокны павінны быць схаваныя, перш чым адпаведныя элементы будуць выдалены з DOM.
  • Усплывальныя паказы могуць быць выкліканыя дзякуючы элементу ўнутры ценявога DOM.
Па змаўчанні гэты кампанент выкарыстоўвае ўбудаваны сродак ачысткі змесціва, які выдаляе любыя элементы HTML, якія відавочна не дазволены. Больш падрабязную інфармацыю глядзіце ў раздзеле дэзінфікуючых сродкаў у нашай дакументацыі па JavaScript .
Анімацыйны эфект гэтага кампанента залежыць ад prefers-reduced-motionмедыя-запыту. Глядзіце раздзел аб паменшаным руху нашай дакументацыі па спецыяльных магчымасцях .

Працягвайце чытаць, каб даведацца, як працуюць усплывальныя вобразы з некаторымі прыкладамі.

Прыклад: уключыце ўсплывальныя вокны ўсюды

Адзін са спосабаў ініцыялізаваць усе ўсплывальныя вокны на старонцы - выбраць іх па data-bs-toggleатрыбутах:

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

Прыклад: выкарыстанне containerопцыі

Калі ў вас ёсць некаторыя стылі на бацькоўскім элеменце, якія перашкаджаюць усплываючаму паказу, вы захочаце ўказаць карыстальніцкі container, каб HTML-код усплывальнага элемента з'яўляўся ў гэтым элеменце.

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

Прыклад

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

Чатыры кірункі

Даступныя чатыры варыянты: выраўноўванне паверсе, справа, унізе і па левым краі. Напрамкі адлюстроўваюцца пры выкарыстанні Bootstrap у 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>

Адхіліць пры наступным пстрычцы

Выкарыстоўвайце focusтрыгер, каб адхіліць усплывальныя вокны пры наступным пстрычцы карыстальнікам іншага элемента, чым элемент пераключэння.

Спецыяльная разметка патрабуецца для адхілення пры наступным пстрычцы

Для належнага кросбраўзернага і кросплатформеннага паводзінаў вы павінны выкарыстоўваць <a>тэг, а не тэг <button>, і вы таксама павінны ўключыць tabindexатрыбут.

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

Адключаныя элементы

Элементы з disabledатрыбутам не з'яўляюцца інтэрактыўнымі, што азначае, што карыстальнікі не могуць наводзіць курсор мышы або націскаць на іх, каб выклікаць усплывальнае акно (або падказку). У якасці абыходнага шляху вы захочаце запусціць усплывальнае акно з абгорткі <div>або <span>, у ідэале зробленай з дапамогай клавіятуры, з дапамогай tabindex="0".

Для адключаных усплывальных трыгераў вы таксама можаце аддаць перавагу data-bs-trigger="hover focus", каб усплывальнае акно з'яўлялася як неадкладная візуальная зваротная сувязь для вашых карыстальнікаў, паколькі яны могуць не спадзявацца націснуць на адключаны элемент.

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

Сас

Пераменныя

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

Выкарыстанне

Уключыць усплывальныя вокны праз JavaScript:

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

Стварэнне ўсплывальных вобразаў для карыстальнікаў клавіятуры і дапаможных тэхналогій

Каб дазволіць карыстальнікам клавіятуры актываваць вашы ўсплывальныя вобразы, вы павінны дадаваць іх толькі ў элементы HTML, якія традыцыйна з'яўляюцца інтэрактыўнымі і факусуюць з клавіятуры (напрыклад, спасылкі або элементы кіравання формамі). Нягледзячы на ​​тое, што адвольныя элементы HTML (напрыклад, <span>s) можна зрабіць фокуснымі, дадаўшы tabindex="0"атрыбут, гэта дадасць патэнцыйна раздражняльныя і заблытаныя прыпынкі табуляцыі на неінтэрактыўных элементах для карыстальнікаў клавіятуры, і большасць дапаможных тэхналогій у цяперашні час не абвяшчаюць змесціва ўсплывальнага экрана ў гэтай сітуацыі . Акрамя таго, не спадзявайцеся толькі на hoverтое, што гэта будзе трыгер для вашых усплываючых вобразаў, бо гэта зробіць іх немагчымымі для карыстальнікаў клавіятуры.

Нягледзячы на ​​тое, што вы можаце ўставіць насычаны, структураваны HTML ва ўсплывальныя вокны з дапамогай гэтай htmlопцыі, мы настойліва рэкамендуем вам пазбягаць дадання празмернай колькасці змесціва. Тое, як усплывальныя вобразы працуюць у цяперашні час, заключаецца ў тым, што пасля адлюстравання іх змесціва прывязваецца да трыгернага элемента з aria-describedbyатрыбутам. У выніку ўвесь кантэнт popover будзе абвешчаны карыстальнікам дапаможных тэхналогій у выглядзе аднаго доўгага бесперапыннага патоку.

Дадаткова, хоць можна таксама ўключаць інтэрактыўныя элементы кіравання (напрыклад, элементы формы або спасылкі) у ваша ўсплывальнае акно (шляхам дадання гэтых элементаў да allowListдазволеных атрыбутаў і тэгаў), майце на ўвазе, што ў цяперашні час усплывальнае акно не кіруе парадкам фокусу клавіятуры. Калі карыстальнік клавіятуры адкрывае ўсплывальнае акно, фокус застаецца на запускаючым элеменце, і паколькі ўсплывальнае акно звычайна не ідзе адразу пасля трыгера ў структуры дакумента, няма ніякай гарантыі, што рух наперад/націскTABперамясціць карыстальніка клавіятуры ў само ўсплывальнае акно. Карацей кажучы, простае даданне інтэрактыўных элементаў кіравання да ўсплываючага акна, хутчэй за ўсё, зробіць гэтыя элементы кіравання недаступнымі/непрыдатнымі для карыстальнікаў клавіятуры і дапаможных тэхналогій, або, як мінімум, створыць нелагічны агульны парадак фокусу. У такіх выпадках лепш выкарыстоўваць мадальнае дыялогавае акно.

Параметры

Параметры могуць быць перададзены праз атрыбуты дадзеных або JavaScript. Для атрыбутаў дадзеных дадайце назву опцыі да data-bs-, як у data-bs-animation="". Не забудзьцеся змяніць тып рэгістра назвы опцыі з camelCase на kebab-case пры перадачы опцый праз атрыбуты даных. Напрыклад, замест выкарыстання data-bs-customClass="beautifier"выкарыстоўвайце data-bs-custom-class="beautifier".

Звярніце ўвагу, што з меркаванняў бяспекі параметры sanitize, sanitizeFn, і allowListне могуць быць прадастаўлены з выкарыстаннем атрыбутаў даных.
Імя Тып Па змаўчанні Апісанне
animation лагічны true Прымяніце пераход знікнення CSS да ўсплываючага акна
container радок | элемент | ілжывы false

Дадае ўсплывальнае акно да пэўнага элемента. Прыклад: container: 'body'. Гэтая опцыя асабліва карысная ў тым плане, што яна дазваляе размясціць усплывальнае акно ў патоку дакумента побач з запускаючым элементам, што прадухіліць адплыванне ўсплываючага акна ад запускаючага элемента падчас змены памеру акна.

content радок | элемент | функцыя ''

Значэнне змесціва па змаўчанні, калі data-bs-contentатрыбут адсутнічае.

Калі функцыя зададзена, яна будзе выкліканая са thisспасылкай на элемент, да якога далучана ўсплывальнае акно.

delay нумар | аб'ект 0

Затрымка паказу і схавання ўсплываючага акна (мс) - не прымяняецца да ручнога тыпу запуску

Калі ўказана лічба, затрымка прымяняецца як для схавання, так і для паказу

Структура аб'екта:delay: { "show": 500, "hide": 100 }

html лагічны false Устаўце HTML ва ўсплывальнае акно. Калі false, innerTextуласцівасць будзе выкарыстоўвацца для ўстаўкі змесціва ў DOM. Выкарыстоўвайце тэкст, калі вы турбуецеся аб атаках XSS.
placement радок | функцыя 'right'

Як размясціць повер - аўто | уверх | унізе | злева | справа.
Калі autoпазначана, гэта будзе дынамічна пераарыентаваць усплывальнае вобраз.

Калі функцыя выкарыстоўваецца для вызначэння размяшчэння, яна выклікаецца з усплывальным вузлом DOM у якасці першага аргумента і запускаючым элементам вузла DOM у якасці другога. Кантэкст thisусталяваны для ўсплывальнага асобніка.

selector радок | ілжывы false Калі прадастаўляецца селектар, усплывальныя аб'екты будуць дэлегаваны ўказаным мэтам. На практыцы гэта выкарыстоўваецца для таго, каб у дынамічны HTML-кантэнт дадаваліся ўсплывальныя вобразы. Глядзіце гэта і інфарматыўны прыклад .
template радок '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Базавы HTML для выкарыстання пры стварэнні ўсплывальнага акна.

Поповер titleбудзе ўведзены ў .popover-header.

Поповер contentбудзе ўведзены ў .popover-body.

.popover-arrowстане стралой паповера.

Самы знешні элемент-абгортка павінен мець .popoverклас.

title радок | элемент | функцыя ''

Значэнне назвы па змаўчанні, калі titleатрыбут адсутнічае.

Калі функцыя зададзена, яна будзе выкліканая са thisспасылкай на элемент, да якога далучана ўсплывальнае акно.

trigger радок 'click' Як спрацоўвае ўсплывальнае акно - націсніце | лунаць | фокус | кіраўніцтва. Вы можаце перадаць некалькі трыгераў; падзяліце іх прабелам. manualнельга спалучаць з любым іншым трыгерам.
fallbackPlacements масіў ['top', 'right', 'bottom', 'left'] Вызначце рэзервовыя месцы размяшчэння, прадставіўшы спіс месцаў размяшчэння ў масіве (у парадку перавагі). Для атрымання дадатковай інфармацыі звярніцеся да дакументацыі паводзін Попера
boundary радок | элемент 'clippingParents' Мяжа абмежавання перапаўнення ўсплываючага акна (прымяняецца толькі да мадыфікатара preventOverflow Попера). Па змаўчанні гэта 'clippingParents'і можа прымаць спасылку HTMLElement (толькі праз JavaScript). Для атрымання дадатковай інфармацыі звярніцеся да дакументаў Popper's detectOverflow .
customClass радок | функцыя ''

Дадайце класы ва ўсплывальнае акно, калі яно паказана. Звярніце ўвагу, што гэтыя класы будуць дададзены ў дадатак да любых класаў, указаных у шаблоне. Каб дадаць некалькі класаў, падзяліце іх прабеламі: 'class-1 class-2'.

Вы таксама можаце перадаць функцыю, якая павінна вяртаць адзіны радок, які змяшчае дадатковыя імёны класаў.

sanitize лагічны true Уключыце або выключыце дэзінфекцыю. Калі актывавана 'template', 'content'і 'title'параметры будуць ачышчаны. Глядзіце раздзел дэзінфікуючых сродкаў у нашай дакументацыі па JavaScript .
allowList аб'ект Значэнне па змаўчанні Аб'ект, які змяшчае дазволеныя атрыбуты і тэгі
sanitizeFn нуль | функцыя null Тут вы можаце паставіць сваю ўласную функцыю дэзінфекцыі. Гэта можа быць карысна, калі вы аддаеце перавагу выкарыстоўваць спецыяльную бібліятэку для правядзення дэзінфекцыі.
offset масіў | радок | функцыя [0, 8]

Зрушэнне ўсплывальнага экрана адносна яго мэты. Вы можаце перадаць радок у атрыбутах дадзеных са значэннямі, падзеленымі коскамі, напрыклад:data-bs-offset="10,20"

Калі функцыя выкарыстоўваецца для вызначэння зрушэння, яна выклікаецца з аб'ектам, які змяшчае размяшчэнне попера, спасылку і прамастаянні попера ў якасці першага аргумента. Запускаючы элемент DOM вузел перадаецца ў якасці другога аргумента. Функцыя павінна вяртаць масіў з двума лікамі: .[skidding, distance]

Для атрымання дадатковай інфармацыі звярніцеся да афсетнай дакументацыі Попера .

popperConfig нуль | аб'ект | функцыя null

Каб змяніць стандартную канфігурацыю Popper для Bootstrap, глядзіце канфігурацыю Popper .

Калі функцыя выкарыстоўваецца для стварэння канфігурацыі Popper, яна выклікаецца з аб'ектам, які змяшчае канфігурацыю Popper па змаўчанні Bootstrap. Гэта дапаможа вам выкарыстоўваць і аб'яднаць стандартную канфігурацыю з вашай уласнай канфігурацыяй. Функцыя павінна вяртаць аб'ект канфігурацыі для Popper.

Атрыбуты даных для асобных усплываючых акцый

Параметры для асобных усплываючых вобразаў можна ў якасці альтэрнатывы задаць з дапамогай выкарыстання атрыбутаў даных, як тлумачылася вышэй.

Выкарыстанне функцыі зpopperConfig

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

Метады

Асінхронныя метады і пераходы

Усе метады API асінхронныя і пачынаюць пераход . Яны вяртаюцца да абанента, як толькі пачынаецца пераход, але да яго заканчэння . Акрамя таго, выклік метаду пераходнага кампанента будзе ігнаравацца .

Для атрымання дадатковай інфармацыі глядзіце нашу дакументацыю па JavaScript .

паказаць

Выяўляе ўсплывальнае акно элемента. Вяртаецца да абанента да таго, як усплывальнае акно будзе фактычна паказана (г.зн. да таго , як shown.bs.popoverадбудзецца падзея). Гэта лічыцца «ручным» запускам усплывальнага экрана. Усплывальныя вокны, назва і змест якіх маюць нулявую даўжыню, ніколі не адлюстроўваюцца.

myPopover.show()

схаваць

Хавае ўсплывальнае акно элемента. Вяртаецца да абанента да таго, як усплывальнае акно было фактычна схавана (г.зн. да таго , як hidden.bs.popoverадбудзецца падзея). Гэта лічыцца «ручным» запускам усплывальнага экрана.

myPopover.hide()

пераключаць

Пераключае ўсплывальнае акно элемента. Вяртаецца да абанента да таго, як усплывальнае акно было фактычна паказана або схавана (г.зн. да таго , як адбудзецца падзея shown.bs.popoverабо ). hidden.bs.popoverГэта лічыцца «ручным» запускам усплывальнага экрана.

myPopover.toggle()

распараджацца

Хавае і знішчае ўсплывальнае акно элемента (выдаляе захаваныя даныя на элеменце DOM). Усплывальныя вобразы, якія выкарыстоўваюць дэлегаванне (якія ствараюцца з дапамогай параметра ) selector, не могуць быць індывідуальна знішчаны на нашчадных трыгерных элементах.

myPopover.dispose()

уключыць

Дае магчымасць паказу ўсплывальнага вокны элемента. Усплывальныя вокны ўключаны па змаўчанні.

myPopover.enable()

адключыць

Выдаляе магчымасць паказу ўсплывальнага вокны элемента. Усплывальнае акно можна будзе паказаць, толькі калі яно будзе зноў уключана.

myPopover.disable()

пераключацьУключана

Уключае магчымасць паказу або схавання ўсплывальнага вокны элемента.

myPopover.toggleEnabled()

абнаўленне

Абнаўляе пазіцыю ўсплывальнага экрана элемента.

myPopover.update()

getInstance

Статычны метад, які дазваляе атрымаць экзэмпляр усплываючага паведамлення, звязаны з элементам DOM

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

getOrCreateInstance

Статычны метад, які дазваляе атрымаць асобнік усплываючага паведамлення, звязаны з элементам DOM, або стварыць новы, калі ён не быў ініцыялізаваны

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

Падзеі

Тып падзеі Апісанне
show.bs.popover Гэта падзея запускаецца неадкладна пры showвыкліку метаду асобніка.
паказаны.bs.popover Гэта падзея запускаецца, калі ўсплывальнае акно становіцца бачным для карыстальніка (будзе чакаць завяршэння пераходаў CSS).
hide.bs.popover Гэта падзея запускаецца адразу пасля hideвыкліку метаду асобніка.
hidden.bs.popover Гэта падзея запускаецца, калі ўсплывальнае акно перастае быць схаваным ад карыстальніка (будзе чакаць завяршэння пераходаў CSS).
устаўлена.bs.popover Гэта падзея запускаецца пасля show.bs.popoverпадзеі, калі ўсплывальны шаблон быў дададзены ў DOM.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})