ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

Bootstrap 4 Tutorial

BS4 HOME BS4 Get Started BS4 Grid Basic BS4 Typography BS4 Colors BS4 Tables BS4 Images BS4 Jumbotron BS4 Alerts BS4 Buttons BS4 Button Groups BS4 Badges BS4 Progress Bars BS4 Pagination BS4 List Groups BS4 Cards BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbar BS4 Forms BS4 Inputs BS4 Carousel BS4 Modal BS4 Tooltip BS4 Popover BS4 Scrollspy BS4 Utilities BS4 Flex BS4 Media Objects BS4 Filters

Bootstrap 4 Grid

BS4 Grid System BS4 Stacked/Horizontal BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge BS4 Grid Examples

Bootstrap 4 Theme

BS4 Basic Template

Bootstrap 4 Ref

All Classes JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Tooltip

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.