Popover Plugin
Popover плагин похож на всплывающие подсказки; это всплывающее окно, которое появляется, когда пользователь нажимает на элемент. Разница заключается в том, что popover может содержать гораздо больше контента.
Совет: Плагины могут быть включены в индивидуальном порядке ( с использованием Bootstrap's отдельных "popover.js" файлов), или все сразу ( с помощью "bootstrap.js" или "bootstrap.min.js" ).
Как создать Popover
Чтобы создать popover , добавить data-toggle="popover" атрибута к элементу.
Используйте title атрибута , чтобы задать текст заголовка в пирог, и использовать data-content атрибута , чтобы указать текст , который должен отображаться внутри popover's теле:
<a href="#" data-toggle="popover" title=" Popover
Header" data-content="Some
content inside the popover">Toggle popover</a> Примечание: Popovers должен быть инициализирован с JQuery: выберите заданный элемент и вызовите popover() метод.
Следующий код позволит всем popovers в документе:
пример
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Попробуй сам " Позиционирование Popovers
По умолчанию popover появится на правой стороне элемента.
Использование data-placement атрибута , чтобы установить положение popover сверху, снизу, слева или справа от элемента:
пример
<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>
Попробуй сам " Совет: Вы также можете использовать атрибут данных размещения со значением "auto" , который позволит браузеру решить позицию popover . Например, если значение "auto left" , то popover будет отображаться на левой стороне , когда это возможно, в противном случае с правой стороны .
Закрытие Popovers
По умолчанию popover закрывается при нажатии на элемент снова. Тем не менее, вы можете использовать data-trigger="focus" атрибут , который будет закрывать popover при щелчке вне элемента:
пример
<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>
Попробуй сам " Совет: Если вы хотите, чтобы popover , который будет отображаться при наведении указателя мыши на элемент, с помощью data-trigger атрибут со значением "hover" :
пример
<a href="#" title="Header" data-toggle="popover"
data-trigger="hover" data-content="Some content">Hover
over me</a>
Попробуй сам " Полное Bootstrap Popover Reference
Для полного ведения всех popover вариантов, методов и событий, перейдите на наш Bootstrap JS Popover Reference .