Последние учебники веб-разработки
 

Bootstrap Плагин Tooltip


Подсказке 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 .