П_popup Bootstrap 5

Попап

Компонент Popover resembles Tooltips; это弹出框, который появляется при нажатии на элемент. Разница в том, что попап может содержать больше контента.

Как создать попап

Чтобы создать попап, установите 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, чтобы они работали.

Следующий код активирует все弹出框 в документе:

Пример

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

Попробуйте сами

Определение местоположения弹出框

По умолчанию,弹出框会出现在元素的右侧。

Используйте data-bs-placement Настройка位置的弹出框在元素顶部、底部、左侧或右侧：

Пример

<a href="#" title="Заголовок" data-bs-toggle="popover" data-bs-placement="top" data-content="Содержание">Верх</a>
<a href="#" title="Заголовок" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Содержание">Низ</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-content="Content"> Левый</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="Content">Правый</a>

Попробуйте сами

Примечание:Если места недостаточно, атрибут placement не будет работать так, как вы ожидаете. Например: если вы используете топ placement на странице без места (например, вверху), всплывающее окно будет отображаться под элементом или справа (в любом месте, где есть место).

Закрыть всплывающее окно

По умолчанию всплывающее окно закрывается при повторном клике на элемент. Однако вы можете использовать data-bs-trigger="focus" Атрибуты, установленные этим свойством, позволяют закрывать всплывающее окно при клике вне элемента:

Пример

<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Нажмите на любое место в документе, чтобы закрыть это всплывающее окно">Нажмите на меня</a>

Попробуйте сами

Всплывающее окно при наведении

Совет:Если вы хотите, чтобы всплывающее окно отображалось при наведении курсора на элемент, используйте значение "hover" data-bs-trigger Атрибуты:

Пример

<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Текст всплывающего окна">Наведите курсор на меня</a>

Попробуйте сами