Bootstrap JS Подсказки
JS-подсказка (ToolTip. js)
Подсказка плагин небольшой всплывающее окно, которое появляется, когда пользователь перемещает указатель мыши на элемент.
В учебнике по всплывающей подсказке Читайте наш учебник по начальной загрузке.
Через Data-* атрибуты
data-toggle="tooltip" активирует всплывающую подсказку.
title атрибут задает текст, который должен отображаться в подсказке.
Пример
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Через JavaScript
Подсказки не являются подключаемыми модулями CSS и поэтому должны быть инициализированы с помощью jQuery: выберите указанный элемент и вызовите tooltip() метод.
Пример
// Select all
elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();
// Select a specified
element
$('#myTooltip').tooltip();
Параметры всплывающей подсказки
Параметры могут быть переданы через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра в Data-, как при размещении данных = "".
| Имя | Тип | По умолчанию | Описание | |
|---|---|---|---|---|
| animation | boolean | true |
Признак добавления эффекта затухания CSS при отображении и скрытии подсказки
|
|
| container | string, or the boolean false | false | Добавляет подсказку к определенному элементу. Пример: контейнер: ' Body ' |
|
| delay | number, or object | 0 | Указывает количество миллисекунд, которое потребуется для отображения и скрытия подсказки. Чтобы указать задержку отображения и другую для скрытия, используйте структуру объекта: Задержка: {Показать: 500, скрыть: 100}-который будет принимать 500 MS, чтобы показать подсказку, но только 100 MS, чтобы скрыть это |
|
| html | boolean | false | Указывает, следует ли принимать HTML-теги во всплывающей подсказке:
Если задано значение false (по умолчанию), будет использоваться метод Text () jQuery. Используйте это, если вы беспокоитесь о XSS-атаках |
|
| placement | string | "top" | Задает положение подсказки. Возможные значения:
|
|
| selector | string, or the boolean false | false | Добавляет подсказку к указанному селектору | |
| template | string | Базовый HTML-код для использования при создании подсказки. Заголовок подсказки будет вставлен в элемент, имеющий класс. ToolTip-внутренняя и элемент с классом. ToolTip-стрелка станет стрелкой подсказки. Внешний элемент оболочки должен иметь класс. ToolTip. |
||
| title | string | "" | Задает текст, который должен отображаться в подсказке | |
| trigger | string | "hover focus" | Указывает способ срабатывания всплывающей подсказки. Возможные значения:
|
|
| viewport | string, or object | {selector: "body", padding: 0} | Сохраняет подсказку в границах этого элемента. Пример: видовой экран: "#viewport" или {selector: '#viewport', padding: 0} |
Методы подсказки
В следующей таблице перечислены все доступные методы подсказки.
| Метод | Описание | |
|---|---|---|
| .tooltip(options) | Активирует всплывающую подсказку с опцией. Приведенные выше параметры для допустимых значений | |
| .tooltip("show") | Отображает всплывающую подсказку | |
| .tooltip("hide") | Скрытие подсказки | |
| .tooltip("toggle") | Переключает всплывающую подсказку | |
| .tooltip("destroy") | Скрывает и уничтожает подсказку |
События подсказки
В следующей таблице перечислены все доступные события ToolTip.
| Событие | Описание | |
|---|---|---|
| show.bs.tooltip | Происходит, когда всплывающая подсказка будет показана | |
| shown.bs.tooltip | Происходит при полном отображении подсказки (после завершения переходов CSS) | |
| hide.bs.tooltip | Происходит, когда всплывающая подсказка будет скрыта | |
| hidden.bs.tooltip | Происходит, когда всплывающая подсказка полностью скрыта (после завершения переходов CSS) |
Другие примеры
Пользовательский дизайн всплывающей подсказки
Используйте CSS для настройки внешнего вид подсказки:
Пример
/* Tooltip */
.test + .tooltip > .tooltip-inner {
background-color: #73AD21;
color: #FFFFFF;
border: 1px solid green;
padding: 15px;
font-size: 20px;
}
/* Tooltip on top */
.test + .tooltip.top > .tooltip-arrow {
border-top: 5px solid green;
}
/* Tooltip on bottom */
.test + .tooltip.bottom > .tooltip-arrow {
border-bottom: 5px solid blue;
}
/* Tooltip on left */
.test + .tooltip.left > .tooltip-arrow {
border-left: 5px solid red;
}
/* Tooltip on right */
.test + .tooltip.right > .tooltip-arrow {
border-right: 5px solid black;
}
