Для работы с всплывающими подсказками (tooltips) в Bootstrap необходим плагин tooltip.js, подключаемый после jquery и bootstrap.js.
Подключение файлов
Перед началом работы подключите в HTML-документ следующие файлы в указанном порядке:
- jquery.js
- popper.js (важно: перед bootstrap.js)
- bootstrap.js
Создание всплывающей подсказки
Всплывающие подсказки применяются к любым HTML-элементам: кнопкам, ссылкам и т.д. Пример с ссылкой:
<div class="container">
<a href="#" data-toggle="tooltip" title="Что-то не сработало... Сработало!">Наведите курсор</a>
</div>Атрибут data-toggle="tooltip" указывает Bootstrap на использование плагина, а title содержит текст подсказки.
Активация плагина
Для работы всплывающих подсказок инициализируйте плагин с помощью JavaScript:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});Этот код запускает инициализацию при загрузке страницы. Селектор $(‘[data-toggle="tooltip"]’) выбирает все элементы с атрибутом data-toggle="tooltip".
Настройка позиции
По умолчанию, подсказка отображается сверху. Для изменения позиции используется атрибут data-placement:
<button class="btn btn-success" data-toggle="tooltip" title="Исправленная кнопка" data-placement="right">Кнопка</button>Доступные значения для data-placement: top, bottom, right, left. Пример с различными позициями:
<a href="#" data-toggle="tooltip" title="Tooltip сверху" data-placement="top">Tooltip сверху</a><br>
<a href="#" data-toggle="tooltip" title="Tooltip снизу" data-placement="bottom">Tooltip снизу</a><br>
<a href="#" data-toggle="tooltip" title="Tooltip справа" data-placement="right">Tooltip справа</a><br>
<a href="#" data-toggle="tooltip" title="Tooltip слева" data-placement="left">Tooltip слева</a>data-placement="top" — значение по умолчанию.
Целевая селекция
В примерах выше плагин применяется ко всем элементам с атрибутом data-toggle="tooltip". Для более точного управления, например, для отображения подсказок только для ссылок, измените селектор в JavaScript-коде:
$(document).ready(function(){
$('a[data-toggle="tooltip"]').tooltip();
});Создание и настройка всплывающих подсказок в Bootstrap с помощью tooltip.js — простой способ улучшить пользовательский интерфейс. Атрибуты data-toggle, title и data-placement позволяют легко контролировать внешний вид и поведение подсказок.