Bootstrap 4 Подсказка
Bootstrap 4 Подсказка
Компонент «Подсказка» представляет собой небольшое всплывающее окно, которое появляется, когда пользователь наводит указатель мыши на элемент:
Как создать всплывающую подсказку
Чтобы создать всплывающую подсказку, добавьте 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>
Полный справочник по всплывающим подсказкам Bootstrap
Полный справочник по всем параметрам, методам и событиям всплывающих подсказок см. в нашем Справочнике по всплывающим подсказкам Bootstrap JS .