Всплывающие подсказки полезны, когда вам нужно описать ссылку. Плагин был вдохновлен плагином jQuery.tipsy, написанным Джейсоном Фреймом. С тех пор всплывающие подсказки были обновлены для работы без изображений, анимации с анимацией CSS и атрибутов данных для локального хранилища.
Если вы хотите включить эту функциональность плагина индивидуально, вам понадобится tooltip.js, после включения bootstrap.js или bootstrap.min.js.
Применение подсказок
Плагин всплывающей подсказки генерирует контент и разметку по запросу и по умолчанию помещает всплывающие подсказки после их триггерного элемента. Вы можете добавить всплывающие подсказки двумя способами:
- Через атрибуты данных. Чтобы добавить всплывающую подсказку, добавьте
data-toggle = "tooltip"в тег привязки. Заголовок якоря будет текстом всплывающей подсказки. По умолчанию всплывающая подсказка установлена в верхнюю часть плагина.<a href = "#" data-toggle = "tooltip" title = "Example tooltip">Hover over me</a>
- Через JavaScript - запуск всплывающей подсказки с помощью JavaScript -
$('#identifier').tooltip(options)
Плагин подсказки - это не только плагины css, такие как выпадающий список или другие плагины, обсуждаемые в предыдущих главах. Чтобы использовать этот плагин, вы ДОЛЖНЫ активировать его с помощью jquery. Чтобы включить все всплывающие подсказки на вашей странице, просто используйте этот скрипт -
$(function () { $("[data-toggle = 'tooltip']").tooltip(); });
В следующем примере показано использование плагина tooltip с помощью атрибутов данных.
<h4>Tooltip examples for anchors</h4>
This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip"
title = "Tooltip on left"> Default Tooltip</a>.
This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip"
data-placement = "left" title = "Tooltip on left">Tooltip on Left</a>.
This is a <a href = "#" data-toggle = "tooltip" data-placement = "top"
title = "Tooltip on top">Tooltip on Top</a>.
This is a <a href = "#" data-toggle = "tooltip" data-placement = "bottom"
title = "Tooltip on bottom">Tooltip on Bottom</a>.
This is a <a href = "#" data-toggle = "tooltip" data-placement = "right"
title = "Tooltip on right">Tooltip on Right</a>
<br>
<h4>Tooltip examples for buttons</h4>
<button type = "button" class = "btn btn-default" data-toggle = "tooltip" title = "Tooltip on left">
Default Tooltip
</button>
<button type = "button" class = "btn btn-default" data-toggle = "tooltip"
data-placement = "left" title = "Tooltip on left">
Tooltip on left
</button>
<button type = "button" class = "btn btn-default" data-toggle = "tooltip"
data-placement = "top" title = "Tooltip on top">
Tooltip on top
</button>
<button type = "button" class = "btn btn-default" data-toggle = "tooltip"
data-placement = "bottom" title = "Tooltip on bottom">
Tooltip on bottom
</button>
<button type = " button" class = " btn btn-default" data-toggle = "tooltip"
data-placement = "right" title = "Tooltip on right">
Tooltip on right
</button>
<script>
$(function () { $("[data-toggle = 'tooltip']").tooltip(); });
</script>
Опции подсказок
Существуют определенные опции, которые можно добавить через API данных Bootstrap или вызвать через JavaScript. В следующей таблице перечислены варианты -
| Название опции | Тип / значение по умолчанию | Имя атрибута данных | Описание |
|---|---|---|---|
| animation | boolean Значение по умолчанию: true | data-animation | Применяет переход с постепенным исчезновением CSS в всплывающую подсказку. |
| html | boolean Значение по умолчанию: false | data-html | Вставляет HTML в всплывающую подсказку. Если false, текстовый метод jQuery будет использоваться для вставки содержимого в dom. Используйте текст, если вас беспокоят атаки XSS. |
| placement | string | function По умолчанию: top | data-placement | Указывает, как расположить всплывающую подсказку (т.е. Верхняя | нижняя | левая | правая | авто). Когда указывается auto , он будет динамически переориентировать всплывающую подсказку. Например, если размещение «авто слева», всплывающая подсказка будет отображаться слева, когда это возможно, иначе оно будет отображаться справа. |
| Selector | string Значение по умолчанию: false | data-selector | Если предусмотрен селектор, объекты подсказки будут делегированы указанным целям. |
| title | string | function По умолчанию: "" | data-title | Опция title является значением названия по умолчанию, если атрибут title отсутствует. |
| trigger | string По умолчанию: 'hover focus' | data-trigger | Определяет способ запуска всплывающей подсказки: click | hover | focus | manual . Вы можете передавать несколько триггеров; отделите их пространством. |
| content | string | function По умолчанию: "" | data-content | Значение по умолчанию для содержимого, если атрибут « контент-контент» отсутствует |
| delay | number | object По умолчанию: 0 | data-delay | Задержки, показывающие и скрывающие всплывающую подсказку в мс, не применяются к ручному типу триггера. Если задано число, задержка применяется как к экрану, так и к экрану. Структура объекта - delay: {show: 500, hide: 100} |
| container | string | false Значение по умолчанию: false | data-container | Добавляет всплывающую подсказку к определенному элементу. Пример: container: 'body' |
Методы подсказок
Ниже приведены некоторые полезные методы для всплывающих подсказок -
| Метод | Описание | Пример |
|---|---|---|
| Options - .tooltip (опции) | Прикрепляет обработчик всплывающей подсказки к коллекции элементов. | $().tooltip(options) |
| Toggle - .tooltip ('toggle') | Переключает подсказку элемента. | $('#element').tooltip('toggle') |
| Show - .tooltip ('show') | Показывает подсказку элемента. | $('#element').tooltip('show') |
| Hide - .tooltip ('hide') | Скрывает всплывающую подсказку элемента. | $('#element').tooltip('hide') |
| Destroy - .tooltip ('destroy') | Скрывает и уничтожает всплывающую подсказку элемента. | $('#element').tooltip('destroy') |
В следующем примере показано использование плагина tooltip с помощью атрибутов данных.
<div style = "padding: 100px 100px 10px;">
This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip"
title = "show">Tooltip on method show</a>.
This is a <a href = "#" class = "tooltip-hide" data-toggle = "tooltip"
data-placement = "left" title = "hide">Tooltip on method hide</a>.
This is a <a href = "#" class = "tooltip-destroy" data-toggle = "tooltip"
data-placement = "top" title = "destroy">Tooltip on method destroy</a>.
This is a <a href = "#" class = "tooltip-toggle" data-toggle = "tooltip"
data-placement = "bottom" title = "toggle">Tooltip on method toggle</a>.
<br><br><br><br><br><br>
<p class = "tooltip-options" >
This is a <a href = "#" data-toggle = "tooltip" title = "<h2>'am Header2
</h2>">Tooltip on method options</a>.
</p>
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-hide').tooltip('hide');});
$(function () { $('.tooltip-destroy').tooltip('destroy');});
$(function () { $('.tooltip-toggle').tooltip('toggle');});
$(function () { $(".tooltip-options a").tooltip({html : true });});
</script>
</div>
События подсказок
В следующей таблице перечислены события для работы с плагином всплывающей подсказки. Это событие может использоваться для подключения к функции.
| События | Описание | Пример |
|---|---|---|
| show.bs.tooltip | Это событие срабатывает сразу же после вызова метода show instance. |
$('#myTooltip').on('show.bs.tooltip', function () {
// do something
}) |
| shown.bs.tooltip | Это событие запускается, когда всплывающая подсказка сделана видимой для пользователя (будет ждать завершения CSS-переходов). |
$('#myTooltip').on('shown.bs.tooltip', function () {
// do something
}) |
| hide.bs.tooltip | Это событие запускается сразу же после вызова метода экземпляра hide. |
$('#myTooltip').on('hide.bs.tooltip', function () {
// do something
}) |
| hidden.bs.tooltip | Это событие запускается, когда всплывающая подсказка закончила скрываться от пользователя (будет ждать завершения CSS-переходов). |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something
})
|
В следующем примере показано использование плагина tooltip с помощью атрибутов данных.
<h4>Tooltip examples for anchors</h4>
This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip"
title = "Default Tooltip">Default Tooltip</a>.
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
alert("Alert message on show");
})});
</script>