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>