Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.
Вдохновленный отличным навеселе jQuery плагин написанный Jason Frame. Всплывающие подсказки-это обновленная версия, которая не полагаться на изображения, использовать CSS3 для анимации, и сведения-атрибуты для местных Заголовок хранения.
Что нужно знать при использовании плагин всплывающей подсказки:
container: 'body'
чтобы избежать проблем с рендерингом в более сложные компоненты (типа наших групп ввода, групп кнопки и т. д.)..disabled
или disabled
элементы должны быть вызваны на элемент оболочки.white-space: nowrap;
на <a>
, чтобы избежать этого поведения.Получил все это? Отлично, давайте посмотрим, как они работают с некоторыми примерами.
Одним из способов инициализации все подсказки на странице будет выбрать их data-toggle
атрибута:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Наведите курсор на ссылки ниже, чтобы посмотреть подсказки:
Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
Доступны четыре варианта: сверху, справа, снизу и выровнен по левому краю.
Наведите курсор на подписи, чтобы увидеть подсказки.
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
Плагин всплывающей подсказки генерирует контент и разметки по требованию, а по умолчанию места подсказки после запуска элемента.
Вызвать подсказку через JavaScript:
$('#example').tooltip(options)
Требуемая разметка для подсказки только data
атрибут title
на HTML элемент, который вы хотите иметь подсказку. Созданный разметки подсказки достаточно проста, хотя и требует установки (по умолчанию значение top
плагином).
Следует только добавить всплывающие подсказки для элементов HTML, которые традиционно клавиатурой и интерактивным (например, ссылки или элементы управления формы). Хотя произвольный HTML-элементы (такие как <span>
) может быть сделан фокус на добавление tabindex="0"
атрибута, это может Добавить закладку раздражает и смущает останавливается на неинтерактивные элементы для пользователей клавиатуры. Кроме того, большинство технологий, в настоящее время не озвучит подсказки в этой ситуации.
<!-- HTML писать -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Сгенерированной разметке плагин -->
<div class="tooltip tooltip-top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, введите имя параметр data-
, а на data-animation=""
.
Имя | Тип | По умолчанию | Описание |
---|---|---|---|
animation | boolean | true | Нанесите CSS плавного перехода к подсказке |
container | string | false | false |
Добавляет всплывающую подсказку к конкретному элементу. Пример: |
delay | number | object | 0 |
Задержка отображения и скрытия подсказки (мс) - не применяется к ручной запуск Тип Если номер указан, задержка применяется как скрыть/показать Структура объекта: |
html | boolean | false | Вставить HTML в подсказке. Если задано значение false, в jQuery text метод будет использоваться, чтобы вставить содержание в DOM. Используйте текст, если вы беспокоитесь о xss-атак. |
placement | string | function | 'top' |
Как подсказка - сверху | снизу | слева | справа | авто. Когда функция используется для определения размещения, это называется с tooltip DOM узел в качестве первого аргумента и пусковым элемент DOM узле в качестве второго. В |
selector | string | false | Если имеется селектор, объектов пирог будет передана указанным целям. На практике это используется для включения динамического содержимого HTML для эклеров добавил. Смотрите это и информативный пример. |
template | string | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Базовый HTML-для использования при создании всплывающей подсказки. Подсказки
Элемент внешней оболочки должен иметь |
title | string | element | function | '' |
По умолчанию название значение, если атрибут Если дана функция, она будет вызвана с его |
trigger | string | 'hover focus' | Как подсказка срабатывает клик | наведение | фокус | руководство. Вы можете пройти несколько триггеров; разделяйте их пробелом. "вручную" не может сочетаться с любой другой триггер. |
constraints | Array | [] | Множество препятствий - прошел на Tether. Дополнительные сведения см. в разделе Tether'ы ограничение документы. |
offset | string | '0 0' | Смещение окна относительно своей цели. Дополнительные сведения см. в разделе Tether'ы смещение документы. |
Варианты индивидуальных подсказки также может быть задан с помощью атрибутов данных, как описано выше.
$().tooltip(options)
Присоединяет обработчик подсказки к коллекции элементов.
.tooltip('show')
Показывает всплывающая подсказка элемента. Возвращается к абоненту до подсказки было показано (т. е. shown.bs.tooltip
события). Это считается “ручного” срабатывания подсказке. Подсказки с нулевой длины названия не отображаются.
$('#element').tooltip('show')
.tooltip('hide')
Скрытие всплывающей подсказки элемента. Возвращает вызывающему перед подсказкой на самом деле был скрытый (т. е. hidden.bs.tooltip
события). Это считается “ручного” срабатывания подсказке.
$('#element').tooltip('hide')
.tooltip('toggle')
Переключает подсказка элемента. Возвращает вызывающей до подсказки было показано или скрыто (т. е. shown.bs.tooltip
или hidden.bs.tooltip
события). Это считается “ручного” срабатывания подсказке.
$('#element').tooltip('toggle')
.tooltip('dispose')
Скрывает и уничтожает всплывающей подсказки элемента. Подсказки, что использовать делегирование (которые создаются с помощью selector
опция) не может быть индивидуально уничтожен потомок триггерных элементов.
$('#element').tooltip('dispose')
Тип События | Описание |
---|---|
show.bs.tooltip | Это событие возникает сразу же, когда show вызывается способ экземпляра. |
shown.bs.tooltip | Это событие запускается, когда подсказка была сделана видимой для пользователя (будет ждать CSS переходы для завершения). |
hide.bs.tooltip | Это событие сразу же уволили, когда hide метод экземпляра называется. |
hidden.bs.tooltip | Это событие запускается, когда подсказка закончит быть скрыта от пользователя (будет ждать CSS переходы для завершения). |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// сделать что-то...
})