Bootstrap Плагин Tooltip
Когда вы хотите описать ссылку, плагин Tooltip очень полезен. Плагин Tooltip вдохновлёнJason Frame, написавшимjQuery.tipsy. Плагин Tooltip внёс много улучшений, например, не нужно полагаться на изображения, вместо этого использует CSS для реализации анимационных эффектов и использует атрибуты данных для хранения информации заголовка.
Если вы хотите отдельно подключить функциональность плагина, вам нужно подключитьtooltip.js. Или, как упоминается в главеОбзор плагинов Bootstrap, вы можете подключитьbootstrap.jsили сжатую версиюbootstrap.min.js。
Использование
Плагин Tooltip генерирует содержимое и разметку по требованию и по умолчанию размещает подсказку позади элемента, вызывающего её. Вы можете добавить подсказки следующими двумя способами:
- Через атрибуты данных: чтобы добавить подсказку, просто добавьте в тег якоряdata-toggle="tooltip"и готово. Заголовок якоря — это текст подсказки. По умолчанию плагин размещает подсказку сверху.
<a href="../index.html" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>
- Через JavaScript: запустите подсказку через JavaScript:
$('#identifier').tooltip(options)
Плагин Tooltip не похож на выпадающее меню и другие плагины, рассмотренные ранее; это не чистый CSS-плагин. Чтобы использовать этот плагин, вы должны активировать его с помощью jQuery (читай: JavaScript). Используйте следующий скрипт, чтобы включить все подсказки на странице:
$(function () { $("[data-toggle='tooltip']").tooltip(); });
Примеры
В следующем примере демонстрируется использование плагина Tooltip через атрибуты данных.
Примеры
<h4>Плагин Tooltip — якорь</h4>Это<a href="#" class="tooltip-test" data-toggle="tooltip"
title="Подсказка по умолчанию">Подсказка по умолчанию</a>.
Это<a href="#" class="tooltip-test" data-toggle="tooltip"
data-placement="left" title="Всплывающая подсказка слева">Всплывающая подсказка слева</a>.
Это<a href="#" data-toggle="tooltip" data-placement="top"
title="Всплывающая подсказка сверху">Всплывающая подсказка сверху</a>.
Это<a href="#" data-toggle="tooltip" data-placement="bottom"
title="Всплывающая подсказка снизу">Всплывающая подсказка снизу</a>.
Это<a href="#" data-toggle="tooltip" data-placement="right"
title="Всплывающая подсказка справа">Всплывающая подсказка справа</a>
<br>
<h4>Плагин всплывающих подсказок - Кнопка</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip"
title="Всплывающая подсказка по умолчанию">Всплывающая подсказка по умолчанию</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="left" title="Всплывающая подсказка слева">Всплывающая подсказка слева</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="top" title="Всплывающая подсказка сверху">Всплывающая подсказка сверху</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="bottom" title="Всплывающая подсказка снизу">Всплывающая подсказка снизу</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="right" title="Всплывающая подсказка справа">Всплывающая подсказка справа</button>
<script>
$(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>
Попробуйте сами »
Результат следующий:
Параметры
Некоторые параметры добавляются через Bootstrap Data API или вызываются через JavaScript. В следующей таблице перечислены эти параметры:
| Название параметра | Тип/Значение по умолчанию | Имя data-атрибута | Описание |
|---|---|---|---|
| animation | логическое значение По умолчанию: true | data-animation | Всплывающая подсказка использует эффекты CSS-градиентного фильтра. |
| html | логическое значение По умолчанию: false | data-html | Вставлять HTML во всплывающую подсказку. Если false, для вставки содержимого в DOM будет использоваться метод text из jQuery. Если вы беспокоитесь об XSS-атаках, используйте text. |
| placement | string|function Значение по умолчанию: top | data-placement | Указывает, как позиционировать всплывающую подсказку (т.е. top|bottom|left|right|auto). Если указано какauto, всплывающая подсказка будет динамически корректироваться. Например, если placement имеет значение "auto left", всплывающая подсказка будет отображаться как можно левее, и только когда ситуация не позволяет этого, она будет отображаться справа. |
| selector | string Значение по умолчанию: false | data-selector | Если указан селектор, объекты всплывающих подсказок будут делегированы указанным целям. |
| title | string | function Значение по умолчанию: '' | data-title | Если не указан атрибутtitle, то опция title является значением заголовка по умолчанию. |
| trigger | string Значение по умолчанию: 'hover focus' | data-trigger | Определяет, как срабатывает всплывающая подсказка: click| hover | focus | manual. Можно передать несколько триггеров, разделяя их пробелом. |
| delay | число | объект Значение по умолчанию: 0 | data-delay | Количество миллисекунд для задержки показа и скрытия всплывающей подсказки — не применяется для типа триггера manual. Если указано число, задержка будет применяться как к показу, так и к скрытию. Если указан объект, структура следующая:
delay:
{ show: 500, hide: 100 } |
| container | строка | false Значение по умолчанию: false | data-container | Присоединяет всплывающую подсказку к указанному элементу. Пример: container: 'body' |
Методы
Ниже приведены некоторые полезные методы в плагине Tooltip:
| Метод | Описание | Пример |
|---|---|---|
| Опции: .tooltip(options) | Прикрепляет обработчик подсказки к коллекции элементов. |
$().tooltip(options) |
| Переключить: .tooltip('toggle') | Переключает показ/скрытие подсказки элемента. |
$('#element').tooltip('toggle')
|
| Показать: .tooltip('show') | Показывает подсказку элемента. |
$('#element').tooltip('show')
|
| Скрыть: .tooltip('hide') | Скрывает подсказку элемента. |
$('#element').tooltip('hide')
|
| Уничтожить: .tooltip('destroy') | Скрывает и уничтожает подсказку элемента. |
$('#element').tooltip('destroy')
|
Примеры
Следующий пример демонстрирует использование методов плагина Tooltip.
Примеры
<div style="padding: 100px 100px 10px;">Это<a href="#" class="tooltip-show" data-toggle="tooltip"
title="show">Метод Tooltip show</a>.
Это<a href="#" class="tooltip-hide" data-toggle="tooltip"
data-placement="left" title="hide">Метод Tooltip hide</a>.
Это<a href="#" class="tooltip-destroy" data-toggle="tooltip"
data-placement="top" title="destroy">Метод Tooltip destroy</a>.
Это<a href="#" class="tooltip-toggle" data-toggle="tooltip"
data-placement="bottom" title="toggle">Метод Tooltip toggle</a>.
<br><br><br><br><br><br>
<p class="tooltip-options" >Это<a href="#" data-toggle="tooltip" title="<h2>'am Header2
</h2>">Параметры методов Tooltip</a>.
</p>
<script>
$(.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>
Попробуйте »
Результат следующий:
Events
В следующей таблице перечислены события, используемые в плагине Tooltip. Эти события можно использовать в качестве хуков в функциях.
| Event | Описание | Пример |
|---|---|---|
| show.bs.tooltip | Это событие срабатывает немедленно при вызове метода show экземпляра. |
$('#myTooltip').on('show.bs.tooltip', function () {
// 执行一些动作...
})
|
| shown.bs.tooltip | Это событие срабатывает, когда всплывающая подсказка становится видимой пользователю (оно ждёт завершения CSS-перехода). |
$('#myTooltip').on('shown.bs.tooltip', function () {
// 执行一些动作...
})
|
| hide.bs.tooltip | Это событие срабатывает сразу при вызове метода экземпляра hide. |
$('#myTooltip').on('hide.bs.tooltip', function () {
// 执行一些动作...
})
|
| hidden.bs.tooltip | Это событие срабатывает, когда всплывающая подсказка скрывается от пользователя (оно ждёт завершения CSS-перехода). |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// 执行一些动作...
})
|
Примеры
В следующем примере демонстрируется использование событий плагина Tooltip.
Примеры
<h4>Плагин Tooltip - Якорь</h4>Это<a href="#" class="tooltip-show" data-toggle="tooltip"
title="Всплывающая подсказка по умолчанию">Всплывающая подсказка по умолчанию</a>.
<script>
$(.tooltip () { $('show').tooltip('show');});
$(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
alert("Сообщение при показе");
})
});
</script>
Попробуйте »
Результат следующий:
