ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

Bootstrap Tutorial

BS HOME BS Get Started BS Grid Basic BS Typography BS Tables BS Images BS Jumbotron BS Wells BS Alerts BS Buttons BS Button Groups BS Glyphicons BS Badges/Labels BS Progress Bars BS Pagination BS Pager BS List Groups BS Panels BS Dropdowns BS Collapse BS Tabs/Pills BS Navbar BS Forms BS Inputs BS Inputs 2 BS Input Sizing BS Media Objects BS Carousel BS Modal BS Tooltip BS Popover BS Scrollspy BS Affix BS Filters

Bootstrap Grids

BS Grid System BS Stacked/Horizontal BS Grid Small BS Grid Medium BS Grid Large BS Grid Examples

Bootstrap Themes

BS Templates BS Theme "Simply Me" BS Theme "Company" BS Theme "Band"

Bootstrap CSS Ref

CSS All Classes CSS Typography CSS Buttons CSS Forms CSS Helpers CSS Images CSS Tables CSS Dropdowns CSS Navs Glyphicons

Bootstrap JS Ref

JS Affix JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Tooltip


подключаемый модуль подсказки Bootstrap


Плагин подсказки

Всплывающая подсказка-это маленькое окно, которое появляется, когда пользователь перемещает указатель мыши на элемент:

Hover over me

Совет: Плагины могут быть включены индивидуально (с помощью индивидуального файла "ToolTip. js" Bootstrap) или все сразу (с помощью "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>

Размещение всплывающих подсказок

По умолчанию всплывающая подсказка будет отображаться поверх элемента.

Используйте 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", которое позволит браузеру определить положение подсказки. Например, если значение «Авто влево», подсказка будет отображаться на левой стороне, когда это возможно, в противном случае справа.


Полная ссылка на подсказку Bootstrap

Для полной ссылки на все варианты подсказки, методы и события, перейдите на наш Ссылка на подсказку Bootstrap JS.