Подсказки

Вдохновленные замечательным плагином jQuery.tipsy, написанным Jason Frame, подсказки являются обновленной версией, которая не использует изображение, использует CSS3 для анимации, и атрибуты данных для хранения локальных заголовков.

Обзор

Что нужно знать при использовании плагина подсказок:

  • Подсказки полагаются на третью библиотеку Tether для позиционирования. Вы должны включить tether.min.js перед bootstrap.js для того, чтобы подсказки работали!
  • Подсказки выбираются по соображениям производительности, поэтому вы должны их инициализировать самостоятельно.
  • Подсказки с названиями нулевой длины никогда не отображаются.
  • Укажите 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>

И добавленный пользовательский HTML:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Использование

Плагин подсказок генерирует содержимое и пометку по запросу, и по умолчанию размещает всплывающие подсказки после элементов, которые их вызвали.

Вызов подсказок через JavaScript:

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

Разметка

Необходимая разметка для всплывающей подсказки - это только атрибут data и title элемента HTML, который вы хотите добавить в подсказку. Сгенерированная разметка всплывающей подсказки довольно проста, хотя для нее требуется позиция (по умолчанию установлено top через плагин).

Создание всплывающих подсказок для пользователей клавиатуры и ассистивных технологий

Вам следует добавлять всплывающие подсказки к HTML-элементам, которые традиционно сфокусированы на клавиатуре и интерактивны (например, ссылки или элементы управления формой). Хотя произвольные HTML-элементы (например, <span>) можно сделать сфокусированными, добавив атрибут tabindex="0", это добавит потенциально раздражающие и путающие табуляции на неинтерактивных элементах для пользователей клавиатуры. Кроме того, большинство ассистивных технологий в настоящее время не объявляет всплывающую подсказку в этой ситуации.

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<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 логический true применяет CSS для плавного перехода к подсказке
container строковый | element | false false

Добавляет всплывающую подсказку к определенному элементу. Пример: container: 'body'. Эта опция особенно полезна в том плане, что она позволяет позиционировать всплывающую подсказку в потоке документа рядом с триггерным элементом - это предотвратит всплытие подсказки от элемента триггера во время изменения размера окна.

delay числовой | object 0

Задержка показа и сокрытия подсказок (ms) - не применяется для ручного типа вызова

Если указывается число, задержка применяется и для сокрытия, и для отображения

Структура объекта: delay: { "show": 500, "hide": 100 }

html логический false

Вставляет HTML в подсказку.

Если true, HTML-теги в title всплывающей подсказки будут отображаться в подсказке. Если false, text метод jQuery будет использоваться для вставки содержимого в DOM.

Используйте текст, если вы беспокоитесь об атаках XSS.

placement строковый | функция 'top'

Как позиционировать подсказку - сверху | снизу | слева | справа.

Когда функция используется для определения места размещения, она вызывается с узлом DOM всплывающей подсказки в качестве первого аргумента, а узел DOM триггера - со вторым. Контекст this устанавливается в экземпляр всплывающей подсказки.

selector строковый false Если предоставлен селектор, объекты всплывающей подсказки будут делегированы указанным целям. На практике это используется для того, чтобы динамический HTML-контент добавлял подсказки. Смотрите это и информативный пример.
template строковый '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Базовый HTML для использования при создании всплывающей подсказки.

title подсказки будет добавлен в .tooltip-inner.

.tooltip-arrow станет стрелкой подсказки.

Внешний элемент-обтекатель должен иметь класс .tooltip.

title строковый | элемент | функция ''

Значение заголовка по умолчанию, если атрибут title отсутствует.

Если функция задана, она будет вызвана с this ссылкой на элемент, к которому прикреплена всплывающая подсказка.

trigger строковый 'hover focus' Как запускается всплывающая подсказка - нажатие | наведение | фокус | manual. Вы можете передавать несколько триггеров; разделите их пробелом. `Manual` не может комбинироваться с любым другим триггером.
constraints массив [] Массив ограничений - передан Tether. Для получения дополнительной информации обратитесь к документам ограничений Tether.
offset строковый '0 0' Смещение всплывающей подсказки относительно ее цели. Для получения дополнительной информации обратитесь к offset docs Tether.

Атрибуты данных для индивидуальных подсказок

Параметры для индивидуальных подсказок еще можете указывать через атрибуты данных, как описано выше.

Методы

$().tooltip(options)

Закрепите обработчик подсказки по набору элементов.

.tooltip('show')

Показывает всплывающую подсказку элемента. Возвращается вызывающей стороне до того, как всплывающая подсказка была фактически показана (то есть до события shown.bs.tooltip). Это считается «ручным» запуском всплывающей подсказки. Подсказки с названиями нулевой длины никогда не отображаются.

$('#element').tooltip('show')

.tooltip('hide')

Скрывает всплывающую подсказку элемента. Возвращает вызывающей стороне до того, как всплывающая подсказка была скрыта (то есть до события hidden.bs.tooltip event occurs). Это считается «ручным» запуском всплывающей подсказки.

$('#element').tooltip('hide')

.tooltip('toggle')

Переключает подсказку элемента. Возвращается вызывающей стороне до того, как всплывающая подсказка была показана или скрыта (то есть до события shown.bs.tooltip или hidden.bs.tooltip). Это считается «ручным» запуском всплывающей подсказки.

$('#element').tooltip('toggle')

.tooltip('dispose')

Скрывает и уничтожает всплывающую подсказку элемента. Всплывающие подсказки, использующие делегирование (которые создаются с помощью the selector option) не могут быть индивидуально уничтожены в элементах триггера-спутника.

$('#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 () {
  // do something…
})