Подсказки

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

Содержание

• Содержание
• Обзор
• Пример: Включить подсказки везде
• Примеры
  • Статическая демонстрация
  • Интерактивная демонстрация
• Использование
  • Разметка
  • Опции
  • Методы
    • $().tooltip(options)
    • .tooltip('show')
    • .tooltip('hide')
    • .tooltip('toggle')
    • .tooltip('dispose')
  • События

Обзор

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

• Подсказки полагаются на третью библиотеку Tether для позиционирования. Вы должны включить tether.min.js перед bootstrap.js для того, чтобы подсказки работали!
• Подсказки выбираются по соображениям производительности, поэтому вы должны их инициализировать самостоятельно.
• Подсказки с названиями нулевой длины никогда не отображаются.
• Укажите container: 'body' чтобы избежать проблем с отображением более сложных компонентов (например, групп ввода, групп кнопок и т. д.).
• Запуск подсказок для скрытых элементов не будет работать.
• Подсказки для .disabled или disabled элементов нуждаются в обертывании.
• При запуске из гиперссылок, которые охватывают несколько строк, подсказки будут центрированы. Используйте white-space: nowrap; на ваших <a>, чтобы избежать этого.

Получили все это? Отлично, давайте посмотрим, как они работают с некоторыми примерами.

Пример: Включить подсказки везде

Одним из способов инициализации всех всплывающих подсказок на странице - выбрать их с помощью атрибута data-toggle:

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

Примеры

Наведите курсор мыши на ссылки текста внизу, чтобы увидеть подсказки:

Статическая демонстрация

Доступны четыре варианта: верхнее, правое, нижнее и левыое выравнивание

Интерактивная демонстрация

Чтобы увидеть подсказки, наведите курсор на кнопки ниже.

<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 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="".

Методы

$().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')

События

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})