Всплывающие подсказки

Bootstrap предоставляет функциональность всплывающей подсказки, которая позволяет отображать стилизованную подсказку, когда пользователь наводит курсор на элемент. Текст всплывающей подсказки берётся из атрибута title.

Всплывающие подсказки лучше всего подходят для элементов <a> и <button>.

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

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

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

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

Всплывающая подсказка для ссылок

Вот основной пример применения всплывающей подсказки к ссылке.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <p style="margin:40px;">Посмотри моё <a target="_blank" href="https://www.quackit.com/css/grid/tutorial/" data-toggle="tooltip" data-placement="top" title="Легко создавайте сложные макеты с помощью CSS!"> руководство по Grid</a>, ведь никогда не узнаешь, когда оно может понадобиться!</p> <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="tooltip"]').tooltip() }) </script>

Всплывающая подсказка для кнопок

Вот пример применения всплывающей подсказки к кнопке.

<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="tooltip" title="Популярная обувь" 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="tooltip"]').tooltip() }) </script>

Положение подсказки

Вы можете указать, чтобы всплывающая подсказка отображалась сверху, снизу, слева или справа. Вот основной пример четырёх всплывающих подсказок, каждая из которых имеет разное положение.

<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="tooltip" data-placement="top" title="Сверху" style="margin:20px;"> Туфли </button> <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="right" title="Справа" style="margin:20px;"> Ботинки </button> <button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Снизу" style="margin:20px;"> Угги </button> <button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="left" title="Слева" 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="tooltip"]').tooltip() }) </script>

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

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