Bootstrap5 Popover
Плагин Popover похож на всплывающую подсказку; он отображается после щелчка по элементу. В отличие от всплывающей подсказки, он может отображать больше содержимого.
Как создать Popover
Добавив к элементуdata-bs-toggle="popover", чтобы создать поповер.
titleСодержимое атрибута — это заголовок поповера,data-bs-contentатрибут отображает текстовое содержимое поповера:
<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Заголовок всплывающего окна" data-bs-content="Содержимое всплывающего окна">Нажмите меня несколько раз</button>
Примечание:Всплывающее окно должно быть указано в коде инициализации JavaScript.
В следующем примере можно использовать всплывающие окна в любом месте документа:
Пример
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
Попробуйте »
Укажите положение popover
По умолчанию всплывающее окно появляется справа от элемента.
Вы можете использоватьdata-bs-placementатрибут, чтобы задать направление, в котором появляется всплывающее окно: top, bottom, left или right:
Пример
<a href="#" title="Заголовок" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Я — часть содержимого">Нажми на меня</a>
<a href="#" title="Заголовок" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Я — часть содержимого">Нажми меня</a>
<a href="#" title="Заголовок" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Я — часть содержимого">Нажми меня</a>
<a href="#" title="Заголовок" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Я — часть содержимого">Нажми меня</a>
Попробуйте »
Закрыть всплывающее окно
По умолчанию всплывающее окно закроется после повторного нажатия на указанный элемент. Вы можете использоватьdata-bs-trigger="focus"атрибут, чтобы настроить закрытие всплывающего окна при клике вне элемента:
Пример
<a href="#" title="Закрыть всплывающее окно" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Нажмите в другом месте документа, чтобы закрыть меня">Нажми на меня</a>
Попробуйте »
Совет:Если вы хотите добиться эффекта отображения, когда мышь наводится на элемент, и скрытия, когда она уходит, вы можете использоватьdata-bs-triggerатрибут и установить значение "hover":
Пример
<a href="#" title="Заголовок" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Некоторое содержимое">Наведите на меня курсор</a>
Попробуйте » Другие расширения