Плагин всплывающей подсказки Bootstrap
Плагин всплывающей подсказки
Плагин Tooltip представляет собой небольшое всплывающее окно, которое появляется, когда пользователь наводит указатель мыши на элемент:
Совет. Плагины можно включать по отдельности (используя отдельный файл Bootstrap «tooltip.js») или все сразу (используя «bootstrap.js» или «bootstrap.min.js»).
Как создать всплывающую подсказку
Чтобы создать всплывающую подсказку, добавьте data-toggle="tooltip"
атрибут к элементу.
Используйте titleатрибут, чтобы указать текст, который должен отображаться внутри всплывающей подсказки:
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Примечание. Всплывающие подсказки должны быть инициализированы с помощью jQuery: выберите указанный элемент и вызовите tooltip()метод.
Следующий код активирует все всплывающие подсказки в документе:
Пример
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Подсказки по позиционированию
По умолчанию всплывающая подсказка будет отображаться поверх элемента.
Используйте data-placementатрибут, чтобы установить положение всплывающей подсказки сверху, снизу, слева или справа от элемента:
Пример
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>
Совет: Вы также можете использовать data-placementатрибут со значением " auto", что позволит браузеру определить положение всплывающей подсказки. Например, если значение равно " auto left", всплывающая подсказка по возможности будет отображаться слева, в противном случае - справа.
Полный справочник по всплывающим подсказкам Bootstrap
Полный справочник по всем параметрам, методам и событиям всплывающих подсказок см. в нашем Справочнике по всплывающим подсказкам Bootstrap JS .