Загрузочный плагин
Плагин "Попов"
Плагин Попов похож на подсказки; Это всплывающее окно, которое появляется, когда пользователь щелкает элемент. Разница в том, что в нем может содержаться гораздо больше контента.
Совет: Плагины могут быть включены в индивидуальном порядке (с помощью индивидуальной Bootstrap-файла "Попов. 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-размещения со значением "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 JS.
