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