Прескокнете до главната содржина Прескокнете до навигацијата со документи
in English

Поповери

Документација и примери за додавање Bootstrap popovers, како оние што се наоѓаат во iOS, на кој било елемент на вашата страница.

Преглед

Работи што треба да ги знаете кога го користите приклучокот за поповер:

  • Поповерите се потпираат на библиотеката од трета страна 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медиумското барање. Погледнете го делот за намалено движење од нашата документација за пристапност .

Продолжете да читате за да видите како функционираат поповерите со некои примери.

Пример: овозможете popovers насекаде

Еден начин да се иницијализираат сите поповери на страницата би било да ги изберете според нивниот 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);

Употреба

Овозможете popovers преку 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 во ќебап-футрола кога ги пренесувате опциите преку атрибути на податоци. На пример, наместо да користите data-bs-customClass="beautifier", користете data-bs-custom-class="beautifier".

Забележете дека од безбедносни причини опциите sanitize, sanitizeFn, и allowListне може да се обезбедат со користење на атрибути на податоци.
Име Тип Стандардно Опис
animation булови true Примени CSS Fade транзиција на поповер
container низа | елемент | лажни false

Го додава поповерот на одреден елемент. Пример: container: 'body'. Оваа опција е особено корисна со тоа што ви овозможува да го поставите поповерот во текот на документот во близина на елементот за активирање - што ќе го спречи скокачот да лебди подалеку од елементот за активирање при промена на големината на прозорецот.

content низа | елемент | функција ''

Стандардна вредност на содржината ако data-bs-contentатрибутот не е присутен.

Ако е дадена функција, таа ќе се повика со нејзиното thisреферентно множество до елементот на кој е прикачен поповерот.

delay број | објект 0

Одложено прикажување и сокривање на поповер (ms) - не важи за рачниот тип на активирач

Ако е доставен број, одложувањето се применува и на двете сокриј/прикажи

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

html булови false Вметнете HTML во поповерот. Ако е неточно, 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' Границата на ограничување за прелевање на поповерот (важи само за модификаторот на Popper preventOverflow). Стандардно, тоа е 'clippingParents'и може да прифати референца HTMLElement (само преку JavaScript). За повеќе информации погледнете ги Popper's detectOverflow docs .
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()

овозможи

Дава можност за прикажување на popover на елементот. Поповерите се стандардно овозможени.

myPopover.enable()

оневозможи

Ја отстранува можноста за прикажување на popover на елементот. Поповерот ќе може да се прикаже само ако е повторно овозможен.

myPopover.disable()

вклучи Овозможено

Ја исклучува можноста за прикажување или сокривање на popover на елементот.

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ќе се повика методот на пример.
прикажани.бс.поповер Овој настан се активира кога поповерот е видлив за корисникот (ќе чека да се завршат транзициите на CSS).
скриј.бс.поповер Овој настан се активира веднаш кога hideќе се повика методот на пример.
скриени.бс.поповер Овој настан се активира кога поповерот ќе заврши со криење од корисникот (ќе почека да се завршат транзициите на CSS).
вметната.бс.поповер Овој настан се активира по show.bs.popoverнастанот кога шаблонот за поповер е додаден во DOM.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})