Popovers

Обзор

Что нужно знать при использовании плагина popover:

• Popovers полагаются на стороннюю библиотеку Popper.js для позиционирования. Вы должны включить popper.min.js перед bootstrap.js или использовать bootstrap.bundle.min.js/, bootstrap.bundle.js который содержит Popper.js, чтобы всплывающие окна работали!
• Для всплывающих окон в качестве зависимости требуется плагин всплывающей подсказки.
• Всплывающие окна включены по соображениям производительности, поэтому вы должны инициализировать их самостоятельно .
• При нулевой длине title и content значениях всплывающее окно никогда не отображается.
• Укажите container: 'body', чтобы избежать проблем с отображением в более сложных компонентах (например, в наших группах ввода, группах кнопок и т.д.).
• Запуск всплывающих окон для скрытых элементов не работает.
• Всплывающие окна для элементов .disabled или disabled должны запускаться для элемента-оболочки.
• При запуске от якорей, которые переносятся по нескольким строкам, всплывающие окна будут центрированы между общей шириной якорей. Используйте .text-nowrap на своем <a>, чтобы избежать такого поведения.
• Всплывающие окна должны быть скрыты до того, как соответствующие им элементы будут удалены из DOM.
• Всплывающие окна могут запускаться благодаря элементу внутри теневой DOM.

Продолжайте читать, чтобы увидеть, как работают всплывающие окна, на некоторых примерах.

Пример: включить всплывающие окна везде

Один из способов инициализировать все всплывающие окна на странице - выбрать их по их data-toggle атрибуту:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-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-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="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  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>

var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), { 
  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:

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

Параметры

Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра data-, как в data-animation="".

Методы

show (показать)

Показывает всплывающее окно элемента. Возврат к вызывающей стороне до фактического отображения всплывающего окна (т. Е. До того, как shown.bs.popover произойдет событие). Это считается «ручным» запуском всплывающего окна. Всплывающие окна, заголовок и содержимое которых имеют нулевую длину, никогда не отображаются.

myPopover.show()

hide (скрыть)

Скрывает всплывающее окно элемента. Возврат к вызывающей стороне до того, как всплывающее окно было фактически скрыто (то есть до того, как hidden.bs.popoverсобытие произойдет). Это считается «ручным» запуском всплывающего окна.

myPopover.hide()

toggle (переключить)

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

myPopover.toggle()

dispose

Скрывает и уничтожает всплывающее окно элемента. Всплывающие окна, использующие делегирование (которые создаются с использованием этой selectorопции ), не могут быть уничтожены индивидуально для дочерних триггерных элементов.

myPopover.dispose()

enable (включить)

Дает возможность отображения всплывающего окна элемента. По умолчанию всплывающие окна включены.

myPopover.enable()

disable (отключить)

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

myPopover.disable()

toggleEnabled

Переключает возможность отображения или скрытия всплывающего окна элемента.

myPopover.toggleEnabled()

update (обновить)

Обновляет позицию всплывающего окна элемента.

myPopover.update()

getInstance

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

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

События

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () { 
  // do something...
})