Bootstrap 4 Popover
Bootstrap 4 Попов
Компонент "Попов" аналогичен всплывающим подсказкам; Это всплывающее окно, которое появляется, когда пользователь щелкает элемент. Разница в том, что в нем может содержаться гораздо больше контента.
Toggle popoverКак создать Попов
Для создания всплывающего data-toggle="popover" элемента добавьте атрибут к элементу.
Используйте title атрибут, чтобы указать текст заголовка всплывающего окна, и используйте data-content атрибут для указания текста, который должен отображаться внутри тела участника.
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Примечание: Необходимо инициализировать всплывающие элементы с помощью jQuery: выберите указанный элемент и вызовите popover() метод.
Следующий код позволит все всплывающие в документе:
Пример
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Позиционирование Попов
По умолчанию, в правой части элемента появится всплывающее заданное значение.
Используйте data-placement атрибут, чтобы задать положение всплывающего окна сверху, снизу, слева или справа от элемента:
Пример
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
Закрытие Попов
По умолчанию, при повторном щелчке на элементе, он закрывается. Однако можно использовать data-trigger="focus" атрибут, который закроет всплывающее окно при щелчке за пределами элемента:
Пример
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
Совет: Если вы хотите, чтобы всплывающий элемент отображался при наведении на него указателя мыши, используйте data-trigger атрибут со значением "Hover":
Пример
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
Полный Справочник на загрузочный Попов
Для полной ссылки на все варианты, методы и события, зайдите на наш Справочник Bootstrap JS.