Попови

Документация и примери за добавяне на изскачащи елементи на Bootstrap, като тези в iOS, към всеки елемент на вашия сайт.

Преглед

Неща, които трябва да знаете, когато използвате плъгина popover:

• Popovers разчитат на библиотеката на трета страна Popper за позициониране. Трябва да включите popper.min.js преди bootstrap.js или да използвате bootstrap.bundle.min.js/ bootstrap.bundle.js, който съдържа Popper, за да работят popovers!
• Popovers изискват приставката за подсказки като зависимост.
• Ако изграждате нашия JavaScript от изходния код, той изискваutil.js .
• Popovers са включени поради причини, свързани с производителността, така че трябва да ги инициализирате сами .
• Нулевата дължина titleи contentстойностите никога няма да показват изскачане.
• Посочете container: 'body', за да избегнете проблеми с рендирането в по-сложни компоненти (като нашите входни групи, групи бутони и т.н.).
• Задействането на изскачащи съобщения върху скрити елементи няма да работи.
• Изскачащи съобщения за .disabledили disabledелементи трябва да се задействат върху обвиващ елемент.
• Когато се задействат от анкери, които преминават през множество линии, изскачащите екрани ще бъдат центрирани между общата ширина на котвите. Използвайте .text-nowrapна вашия <a>s, за да избегнете това поведение.
• Popovers трябва да бъдат скрити, преди съответните им елементи да бъдат премахнати от DOM.
• Popovers могат да бъдат задействани благодарение на елемент в DOM в сянка.

Продължете да четете, за да видите как работят изскачащите екрани с някои примери.

Пример: Активиране на изскачащи прозорци навсякъде

Един от начините за инициализиране на всички изскачащи съобщения на страница е да ги изберете по техния data-toggleатрибут:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Пример: Използване на containerопцията

Когато имате някои стилове на родителски елемент, които пречат на изскачащ прозорец, ще искате да посочите персонализиран container, така че HTML на изскачащия елемент да се показва вместо това в този елемент.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Пример

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

Четири посоки

Налични са четири опции: подравнени отгоре, отдясно, отдолу и отляво.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
  Popover on left
</button>

Отхвърляне при следващо щракване

Използвайте focusспусъка, за да отхвърлите изскачащи съобщения при следващото щракване на потребителя върху елемент, различен от превключващия елемент.

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

Деактивирани елементи

Елементите с disabledатрибута не са интерактивни, което означава, че потребителите не могат да задържат курсора или да щракнат върху тях, за да задействат изскачащ прозорец (или подсказка). Като заобиколно решение ще искате да задействате изскачащия прозорец от обвивка <div>или да <span>замените pointer-eventsелемента на деактивирания елемент.

За забранени изскачащи тригери може също да предпочетете data-trigger="hover"изскачащия прозорец да се показва като незабавна визуална обратна връзка за вашите потребители, тъй като те може да не очакват да щракнат върху деактивиран елемент.

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

Използване

Активиране на изскачащи прозорци чрез JavaScript:

$('#example').popover(options)

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

Настроики

Опциите могат да се предават чрез атрибути на данни или JavaScript. За атрибути на данни добавете името на опцията към data-, както в data-animation="".

Методи

$().popover(options)

Инициализира изскачащи прозорци за колекция от елементи.

.popover('show')

Разкрива изскачане на елемент. Връща се към повикващия, преди изскачащият прозорец действително да е бил показан (т.е. преди да shown.bs.popoverнастъпи събитието). Това се счита за „ръчно“ задействане на popover. Изскачащи съобщения, чието заглавие и съдържание са с нулева дължина, никога не се показват.

$('#element').popover('show')

.popover('hide')

Скрива изскачащия прозорец на елемент. Връща се към повикващия, преди изскачащото съобщение да е действително скрито (т.е. преди да hidden.bs.popoverсе случи събитието). Това се счита за „ръчно“ задействане на popover.

$('#element').popover('hide')

.popover('toggle')

Превключва изскачащия прозорец на елемент. Връща се към повикващия, преди изскачащият прозорец действително да е бил показан или скрит (т.е. преди събитието shown.bs.popoverили да hidden.bs.popoverсе появи). Това се счита за „ръчно“ задействане на popover.

$('#element').popover('toggle')

.popover('dispose')

Скрива и унищожава popover на елемент. Popovers, които използват делегиране (които се създават с помощта на selectorопцията ), не могат да бъдат унищожени поотделно на елементи на задействане на потомък.

$('#element').popover('dispose')

.popover('enable')

Дава възможност за показване на popover на елемент. Изскачащите екрани са активирани по подразбиране.

$('#element').popover('enable')

.popover('disable')

Премахва възможността за показване на изскачащ прозорец на елемент. Изскачащият прозорец ще може да се показва само ако бъде активиран отново.

$('#element').popover('disable')

.popover('toggleEnabled')

Превключва възможността изскачащият прозорец на елемент да бъде показан или скрит.

$('#element').popover('toggleEnabled')

.popover('update')

Актуализира позицията на изскачащия прозорец на елемент.

$('#element').popover('update')

събития

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})