Плагин Bootstrap Popover
Плагин всплывающего окна
Плагин Popover похож на всплывающие подсказки; это всплывающее окно, которое появляется, когда пользователь щелкает элемент. Разница в том, что всплывающее окно может содержать гораздо больше контента.
Совет. Плагины можно включать по отдельности (используя отдельный файл Bootstrap «popover.js») или все сразу (используя «bootstrap.js» или «bootstrap.min.js»).
Как создать всплывающее окно
Чтобы создать всплывающее окно, добавьте 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-placement со значением «auto», что позволит браузеру определить положение всплывающего окна. Например, если значение «авто влево», всплывающее окно будет отображаться слева, когда это возможно, в противном случае — справа.
Закрытие всплывающих окон
По умолчанию всплывающее окно закрывается при повторном нажатии на элемент. Однако вы можете использовать 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
Чтобы получить полную справку обо всех параметрах, методах и событиях всплывающих окон, перейдите в наш справочник по всплывающим окнам Bootstrap JS .