English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Основной учебник Bootstrap

Плагины Bootstrap

Плагин Bootstrap для подсказки (Tooltip)

Когда вы хотите описать ссылку, инструмент подсказки (Tooltip) становится очень полезным. Инструмент подсказки (Tooltip) плагин вдохновлен Jason Frame написал jQuery.tipsy инспирация. Инструмент подсказки (Tooltip) был значительно улучшен, например, вместо использования изображений он использует анимационные эффекты CSS, а информацию о заголовке хранит в атрибуте data.

если вы хотите использовать функции плагина в отдельности, вам нужно ссылаться на tooltip.js. Или, как Обзор плагинов Bootstrap как указано в главе bootstrap.js или сжатую версию bootstrap.min.js.

Методы использования

Инструмент подсказки (Tooltip) создает содержимое и маркеры по запросу, по умолчанию он устанавливает подсказку (tooltip) позади их триггерного элемента. Вы можете добавить подсказку (tooltip) двумя способами:

  • через атрибут dataчтобы добавить инструмент подсказки (tooltip), просто добавьте data-toggle="tooltip" и все. Текст title якоря является текстом подсказки (tooltip). По умолчанию, плагин устанавливает подсказку (tooltip) в верхней части.

    <a href="#" data-toggle="tooltip" title="Example tooltip">Пожалуйста, наведите курсор на меня</a>

  • через JavaScriptчерез JavaScript вызывать инструмент подсказки (tooltip):

    $('#identifier').tooltip(options)

Модуль подсказки (Tooltip) не является чистым CSS-модулем, как обсуждались ранее выпадающие меню и другие модули. Для использования этого модуля вам необходимо активировать его с помощью jQuery (чтение JavaScript). Используйте следующий скрипт для активации всех подсказок (tooltip) на странице: }}

$(function () { $("[data-toggle='tooltip']").tooltip(); });

Онлайн пример

Ниже приведен пример использования модуля подсказки (Tooltip) через атрибуты data.

Онлайн пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Модуль подсказки (Tooltip)</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<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>Модуль подсказки (Tooltip) - Кнопка</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="Tooltip сверху">Tooltip сверху
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip снизу">Tooltip снизу
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip справа">Tooltip справа</button>
<script>
	$(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>
</body>
</html>
Проверьте ‹/›

Результаты представлены ниже:

Параметры

Некоторые параметры добавлены через Bootstrap Data API (Bootstrap Data API) или вызываются через JavaScript. В таблице ниже приведены эти параметры:

Название параметраТип/значение по умолчаниюИмя атрибута данныхОписание
animationboolean
по умолчанию: true		data-animationИнструмент подсказки использует эффект фильтра градиента CSS.
htmlboolean
Значение по умолчанию: false		data-htmlВставка HTML в инструмент подсказки. Если установлено в false, будет использован метод text jQuery для вставки содержимого в DOM. Если вы担心 атаку XSS, используйте text.
placementstring|function
по умолчанию: top		data-placementуказание способа позиционирования инструмента подсказки (т.е. top|bottom|left|right|auto).
при указании auto В этом случае, инструмент подсказки будет динамически调整. Например, если placement установлено на "auto left", инструмент подсказки будет пытаться отображаться справа, только если это невозможно.
selectorstring
Значение по умолчанию: false		data-selectorЕсли предоставлен селектор, объект ToolTip делегируется к указанной цели.
titlestring | function
Значение по умолчанию: ''		data-titleЕсли не указано title Если не указан атрибут, значение title является значением по умолчанию для опции title.
triggerstring
Значение по умолчанию: 'hover focus'		data-triggerОпределение способа триггирования ToolTip: click| hover | focus | manual. Вы можете передать несколько триггеров, разделенных пробелом.
delaynumber | object
Значение по умолчанию: 0		data-delayМиллисекунды задержки для отображения и скрытия ToolTip - не применяется к типу manual (ручной). Если предоставлен номер, то задержка применяется как к отображению, так и к скрытию. Если предоставлен объект, его структура выглядит следующим образом:
delay:
{　show:　500,　hide:　100　}
containerstring | false
Значение по умолчанию: false		data-containerДобавить ToolTip к указанному элементу.
Пример: container: 'body'

Методы

Ниже приведены некоторые полезные методы плагина ToolTip (Tooltip):

МетодыОписаниеПример
Options: .tooltip(options)Добавить обработчик ToolTip к集合у элементов.
$().tooltip(options)
Toggle: .tooltip('toggle')Переключить показ/скрытие ToolTip элемента.
$('#element').tooltip('toggle')
Show: .tooltip('show')Показать ToolTip элемента.
$('#element').tooltip('show')
Hide: .tooltip('hide')Скрыть ToolTip элемента.
$('#element').tooltip('hide')
Destroy: .tooltip('destroy')Скрыть и уничтожить ToolTip элемента.
$('#element').tooltip('destroy')

Онлайн пример

Ниже приведен пример использования метода плагина ToolTip (Tooltip).

Онлайн пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap　示例　-　工具提示(Tooltip)插件方法</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　style="padding:　100px　100px　10px;">
	Это　
	<a href="#" class="tooltip-show" data-toggle="tooltip" title="show">Метод show Tooltip</a>.
	Это　
	<a href="#" class="tooltip-hide" data-toggle="tooltip" data-placement="left" title="hide">Метод hide Tooltip</a>.
	Это　
	<a href="#" class="tooltip-destroy" data-toggle="tooltip" data-placement="top" title="destroy">Метод destroy Tooltip</a>.
	Это　
	<a href="#" class="tooltip-toggle" data-toggle="tooltip" data-placement="bottom" title="toggle">Метод toggle Tooltip</a>.
	<br><br><br><br><br><br>
	<p class="tooltip-options">
		Это　
		<a href="#" data-toggle="tooltip" title="<h2>'am Header2 </h2>">Метод options Tooltip</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>
</body>
</html>
Проверьте ‹/›

Результаты представлены ниже:

Событие

В таблице ниже перечислены события, используемые в плагине подсказки (Tooltip). Эти события могут быть использованы в функции в качестве гвоздей.

СобытиеОписаниеПример
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).

Онлайн пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - событие модуля подсказки (Tooltip)</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>Модуль подсказки (Tooltip) - якорь</h4>
Это ссылка <a href="#" class="tooltip-show" data-toggle="tooltip"　
	title="по умолчанию Tooltip">по умолчанию Tooltip
</a>.
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-show').on('show.bs.tooltip', function () {}})
	alert("Alert message on show");
})});
</script>
</body>
</html>
Проверьте ‹/›

Результаты представлены ниже:

Плагин弹出框 BootstrapПлагин вкладок Bootstrap