Информеры

Bootstrap предоставляет информер для отображения небольшой всплывающей подсказки, аналогично имеющейся в iOS. Информер полагается на стороннюю библиотеку Popper для позиционирования, поэтому вам нужно убедиться, что на веб-странице вызывается файл popper.min.js.

Инициализация

Информеры по умолчанию не включены и требуют инициализации до того, как вы сможете их использовать. Один из способов инициализации — разместить следующий код где-нибудь после вызова jQuery.

<script>
$(function () {
  $('[data-toggle="popover"]').popover()
})
</script>

Базовый информер

Вот базовый пример информера — используйте data-toggle="popover" для определения информера и data-content="" для его содержимого.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <button type="button" class="btn btn-primary" data-toggle="popover" data-content="Горные ботинки — тип обуви, используемой в альпинизме." style="margin:20px;"> Нажми на меня </button> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script> $(function () { $('[data-toggle="popover"]').popover() }) </script>

Положение информера

С помощью data-placement вы можете задать, где отображается информер: сверху, снизу, слева или справа. Вот основной пример четырёх информеров с разным положением.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div style="text-align:center"> <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="right" data-content="Челси — плотно прилегающие ботильоны с эластичной боковой панелью." style="margin:40px;"> Нажми на меня </button> <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="bottom" data-content="Классические ботинки — это короткие кожаные ботинки, которые носят мужчины." style="margin:40px;"> Нажми на меня </button> <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="top" data-content="Ковбойские сапоги — для ковбоев." style="margin:40px;"> Нажми на меня </button> <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="left" data-content="Лыжные ботинки — для катания на лыжах… да!" style="margin:40px;"> Нажми на меня </button> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script> $(function () { $('[data-toggle="popover"]').popover() }) </script>

Заголовок информера

Любой атрибут title, указанный вами для элемента, станет заголовком информера.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <button type="button" class="btn btn-primary" title="Ботинки Джодхпур" data-toggle="popover" data-placement="right" data-content="Ботильоны, созданные для верховой езды, с закруглённым носком и низким каблуком." style="margin:40px;"> Нажми на меня </button> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script> $(function () { $('[data-toggle="popover"]').popover() }) </script>

Закрытие информера

По умолчанию информер закрывается, когда пользователь снова щелкает по элементу (тому, который вызвал информер). Вы можете закрыть информер, когда пользователь щёлкает в любом месте документа (в отличие от элемента, который его вызвал). Чтобы закрыть такой информер, используйте data-trigger="focus".

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <button type="button" class="btn btn-primary" data-toggle="popover" data-trigger="focus" data-placement="right" data-content="Теперь нажми где-нибудь в другом месте."> Нажми на меня </button> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script> $(function () { $('[data-toggle="popover"]').popover() }) </script>

Информер при наведении

Вы можете изменить информер так, чтобы он вызывался при наведении мыши, а не по щелчку. Для этого используйте data-trigger="hover".

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <button type="button" class="btn btn-primary" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Теперь уйди от меня"> Наведи на меня </button> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script> $(function () { $('[data-toggle="popover"]').popover() }) </script>

Автор и редакторы

Автор: Йен Диксон
Последнее изменение: 12.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты