twitter-bootstrap
подсказка
Поиск…
замечания
Всплывающая подсказка представляет собой элемент пользовательского интерфейса, который выглядит как маленький всплывающий ящик. Обычно это срабатывает, когда пользователь наводит указатель на другой элемент, не нажимая его.
По соображениям производительности всплывающие подсказки должны быть инициализированы с помощью jQuery. Следующий код будет включать все всплывающие подсказки в DOM:
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Подсказки по позиционированию
По умолчанию всплывающая подсказка появится поверх элемента. Мы можем использовать атрибут data-placement чтобы установить положение всплывающей подсказки сверху, снизу, слева или справа от элемента.
<a href="#" data-toggle="tooltip" data-placement="top" title="Top tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Bottom tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Left tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Right tooltip">Hover</a
Мы также можем использовать data-placement="auto" , чтобы динамически переориентировать всплывающую подсказку. Всплывающая подсказка в следующем примере подсказка будет отображаться слева, когда это возможно, иначе она будет отображаться справа.
<a href="#" data-toggle="tooltip" data-placement="auto left" title="To the left?">Hover</a
Основной пример
Чтобы создать всплывающую подсказку, нам нужно добавить атрибут data-toggle="tooltip" и title элемента HTML, который будет иметь всплывающую подсказку. Атрибут Title используется для указания текста, отображаемого внутри всплывающей подсказки.
<span data-toggle="tooltip" title="Hello world!">Hover over me</span>
