Source

Подсказки

Документация и примеры добавления настраиваемых всплывающих подсказок Bootstrap с помощью CSS и JavaScript с использованием CSS3 для анимации и атрибутов данных для локального хранения заголовков.

Обзор

Что нужно знать при использовании плагина всплывающей подсказки:

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

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

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

Один из способов инициализировать все всплывающие подсказки на странице — выбрать их по их 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)

Переполнение `auto`и`scroll`

Позиция всплывающей подсказки пытается автоматически измениться, когда родительский контейнер имеет overflow: autoили overflow: scrollпохож на наш .table-responsive, но по-прежнему сохраняет исходное положение размещения. Чтобы решить эту проблему, установите для boundaryпараметра значение, отличное от значения по умолчанию 'scrollParent', например 'window':

$('#example').tooltip({ boundary: 'window' })

Разметка

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

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

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

Кроме того, не полагайтесь исключительно на hoverтриггер всплывающей подсказки, так как это сделает ваши всплывающие подсказки невозможными для пользователей клавиатуры.

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

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Отключенные элементы

Элементы с этим disabledатрибутом не являются интерактивными, то есть пользователи не могут сфокусироваться, навести курсор или щелкнуть их, чтобы вызвать всплывающую подсказку (или всплывающее окно). В качестве обходного пути вы захотите вызвать всплывающую подсказку из оболочки <div>или <span>, в идеале сделать ее фокусируемой на клавиатуре с помощью tabindex="0", и переопределить pointer-eventsотключенный элемент.

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Опции

Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data-, как в data-animation="".

Имя	Тип	По умолчанию	Описание
анимация	логический	истинный	Применить CSS-переход затухания к всплывающей подсказке
контейнер	строка \| элемент \| ЛОЖЬ	ЛОЖЬ	Добавляет всплывающую подсказку к определенному элементу. Пример: `container: 'body'`. Этот параметр особенно удобен тем, что позволяет расположить всплывающую подсказку в потоке документа рядом с инициирующим элементом, что предотвратит всплывающую подсказку от инициирующего элемента во время изменения размера окна.
задерживать	номер \| объект	0	Задержка отображения и скрытия всплывающей подсказки (мс) — не относится к ручному типу триггера. Если указано число, задержка применяется как к скрытию, так и к показу. Структура объекта:`delay: { "show": 500, "hide": 100 }`
HTML	логический	ЛОЖЬ	Разрешить HTML в подсказке. Если задано значение true, теги HTML во всплывающей подсказке `title`будут отображаться во всплывающей подсказке. Если false, `text`метод jQuery будет использоваться для вставки содержимого в DOM. Используйте текст, если вы беспокоитесь о XSS-атаках.
размещение	строка \| функция	'Топ'	Как расположить всплывающую подсказку - авто \| топ \| дно \| слева \| Правильно. Когда `auto`указано, он будет динамически переориентировать всплывающую подсказку. Когда функция используется для определения размещения, она вызывается с узлом DOM всплывающей подсказки в качестве первого аргумента и узлом DOM триггерного элемента в качестве второго. Контекст `this`устанавливается на экземпляр всплывающей подсказки.
селектор	строка \| ЛОЖЬ	ЛОЖЬ	Если предоставлен селектор, объекты всплывающей подсказки будут делегированы указанным целям. На практике это используется для включения всплывающих окон в динамический HTML-контент. См. это и информативный пример .
шаблон	нить	`'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'`	Базовый HTML для использования при создании всплывающей подсказки. Всплывающая подсказка `title`будет внедрена в файл `.tooltip-inner`. `.arrow`станет стрелкой всплывающей подсказки. Самый внешний элемент-оболочка должен иметь `.tooltip`класс и `role="tooltip"`.
заглавие	строка \| элемент \| функция	''	Значение заголовка по умолчанию, если `title`атрибут отсутствует. Если задана функция, она будет вызываться со `this`ссылкой на элемент, к которому прикреплена всплывающая подсказка.
курок	нить	«наведение фокуса»	Как срабатывает всплывающая подсказка - нажмите \| парить \| фокус \| руководство. Вы можете передать несколько триггеров; разделяйте их пробелом. `'manual'`указывает, что всплывающая подсказка будет запускаться программно с помощью методов `.tooltip('show')`, `.tooltip('hide')`и ; `.tooltip('toggle')`это значение нельзя комбинировать ни с каким другим триггером. `'hover'`само по себе приведет к появлению всплывающих подсказок, которые нельзя вызвать с помощью клавиатуры, и их следует использовать только в том случае, если существуют альтернативные методы передачи той же информации для пользователей клавиатуры.
компенсировать	номер \| нить	0	Смещение всплывающей подсказки относительно ее цели. Для получения дополнительной информации обратитесь к документации по смещению Popper.js .
резервное размещение	строка \| множество	'кувырок'	Позволяет указать, какую позицию Поппер будет использовать при откате. Для получения дополнительной информации обратитесь к документации по поведению Popper.js.
граница	строка \| элемент	'scrollParent'	Граница ограничения переполнения всплывающей подсказки. Принимает значения `'viewport'`, `'window'`, `'scrollParent'`или ссылку HTMLElement (только для JavaScript). Для получения дополнительной информации обратитесь к документации по предотвращению переполнения Popper.js .

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

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

Методы

Асинхронные методы и переходы

Все методы API являются асинхронными и запускают переход . Они возвращаются к вызывающей стороне сразу после начала перехода, но до его завершения . Кроме того, вызов метода переходного компонента будет игнорироваться .

См. нашу документацию по JavaScript для получения дополнительной информации.

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

`.tooltip('enable')`

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

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

`.tooltip('disable')`

Удаляет возможность отображения всплывающей подсказки элемента. Всплывающая подсказка будет отображаться только в том случае, если она снова включена.

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

`.tooltip('toggleEnabled')`

Переключает возможность отображения или скрытия всплывающей подсказки элемента.

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

`.tooltip('update')`

Обновляет положение всплывающей подсказки элемента.

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

События

Тип события	Описание
show.bs.tooltip	Это событие срабатывает сразу же при `show`вызове метода экземпляра.
показанная.bs.подсказка	Это событие запускается, когда всплывающая подсказка становится видимой для пользователя (будет ожидать завершения переходов CSS).
hide.bs.подсказка	Это событие запускается сразу после `hide`вызова метода экземпляра.
скрытая.bs.подсказка	Это событие запускается, когда всплывающая подсказка перестает быть скрытой от пользователя (будет ждать завершения переходов CSS).
вставленная.bs.подсказка	Это событие запускается после `show.bs.tooltip`события, когда шаблон всплывающей подсказки был добавлен в DOM.

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

Подсказки

Обзор

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

Примеры

Применение

Переполнение autoиscroll

Разметка

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

Отключенные элементы

Опции

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

Методы

Асинхронные методы и переходы

$().tooltip(options)

.tooltip('show')

.tooltip('hide')

.tooltip('toggle')

.tooltip('dispose')

.tooltip('enable')

.tooltip('disable')

.tooltip('toggleEnabled')

.tooltip('update')