Bootstrap JS Tooltip
Подсказка JS
Подсказка представляет собой маленькое всплывающее окно, которое появляется, когда пользователь перемещает указатель мыши на элемент.
В учебнике по всплывающей подсказке Читайте наш учебник по bootstrap.
Через 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 или логическое значение false | false | Добавляет подсказку к указанному селектору | |
| template | string | Базовый HTML-код для использования при создании подсказки. Заголовок подсказки будет вставлен в элемент, имеющий класс. ToolTip-внутренняя и элемент с классом. ToolTip-стрелка станет стрелкой подсказки. Внешний элемент оболочки должен иметь класс. ToolTip. |
||
| title | string | "" | Задает текст, который должен отображаться в подсказке | |
| trigger | string | "hover focus" | Указывает способ срабатывания всплывающей подсказки. Возможные значения:
|
|
| offset | number or a string | 0 | Смещение подсказки относительно целевого объекта | |
| fallbackPlacement | string or an aray | "flip" | Указывает, какую позицию использует Поппер в запасном варианте | |
| boundary | string or element | "scrollParent" | Граница ограничения переполнения всплывающей подсказки. Принимает значения "видовой экран", "окно" или "скроллпарент", или HTML-элемент |
Методы подсказки
В следующей таблице перечислены все доступные методы подсказки.
| Метод | Описание | |
|---|---|---|
| .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) |