Подсказке Plugin
Подсказке плагин небольшое всплывающее окно, которое появляется, когда пользователь перемещает указатель мыши на элемент:
Совет: Плагины могут быть включены в индивидуальном порядке ( с использованием Bootstrap's отдельных "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>
Попробуй сам " Позиционирование Tooltips
По умолчанию подсказка появится в верхней части элемента.
Использование 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 Tooltip Reference
Для полного ведения всех подсказках вариантов, методов и событий, перейдите на наш Bootstrap JS Tooltip Reference .