Tooltips

Обзор

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

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

Эффект анимации этого компонента зависит от prefers-reduced-motion медиа-запроса. См. раздел с уменьшенным движением в нашей документации по специальным возможностям .

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

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

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

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { 
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Примеры

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

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

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Подсказка вверху">
  Подсказка вверху
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Подсказка справа">
  Подсказка справа
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Подсказка внизу">
  Подсказка внизу
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Подсказка слева">
  Подсказка слева
</button>

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

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Подсказка</em> <u>with</u> <b>HTML</b>">
  Подсказка with HTML
</button>

С SVG:

Применение

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

Запустить всплывающую подсказку через JavaScript:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)

Перелив `auto` и `scroll`

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

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, { 
  boundary: 'window'
})

Разметка

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

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

Вы должны добавлять всплывающие подсказки только к HTML-элементам, которые традиционно ориентированы на клавиатуру и являются интерактивными (например, ссылки или элементы управления формы). Хотя произвольные элементы HTML (например, <span>) можно сделать доступными для фокусировки, добавив 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="tooltip-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="".

Обратите внимание, что по соображениям безопасности параметры sanitize, sanitizeFn и allowList не могут быть предоставлены с использованием атрибутов данных.

имя	Тип	По умолчанию	Описание
`animation`	логический	`true`	Применить переход CSS fade к всплывающей подсказке
`container`	строка \| элемент \| ложный	`false`	Добавляет всплывающую подсказку к определенному элементу. Пример: `container: 'body'`. Этот параметр особенно полезен тем, что позволяет вам размещать всплывающую подсказку в потоке документа рядом с элементом запуска, что предотвратит отрыв всплывающей подсказки от элемента запуска во время изменения размера окна.
`delay`	номер \| объект	`0`	Задержка показа и скрытия всплывающей подсказки (мс) - не относится к ручному типу триггера Если указан номер, задержка применяется как к скрытию, так и к отображению. Структура объекта: `delay: { "show": 500, "hide": 100 }`
`html`	логический	`false`	Разрешить HTML во всплывающей подсказке. Если true, теги HTML во всплывающей подсказке `title`будут отображаться во всплывающей подсказке. Если false, `innerText`свойство будет использоваться для вставки содержимого в DOM. Используйте текст, если вас беспокоят XSS-атаки.
`placement`	строка \| функция	`'top'`	Как разместить всплывающую подсказку - авто \| наверх \| внизу \| слева \| право. Если `auto`указано, всплывающая подсказка будет динамически переориентирована. Когда функция используется для определения размещения, она вызывается с помощью узла DOM всплывающей подсказки в качестве первого аргумента и узла DOM триггерного элемента в качестве второго. `this`Контекст установлен на экземпляр подсказки.
`selector`	строка \| ложный	`false`	Если предусмотрен селектор, объекты всплывающей подсказки будут делегированы указанным целям. На практике это также используется для применения всплывающих подсказок к динамически добавляемым элементам DOM ( `jQuery.on`поддержка). См. Этот и информативный пример .
`template`	строка	`'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'`	Базовый HTML-код для использования при создании всплывающей подсказки. Всплывающая подсказка `title`будет вставлена в `.tooltip-inner`. `.tooltip-arrow` станет стрелкой всплывающей подсказки. Самый внешний элемент оболочки должен иметь `.tooltip`класс и `role="tooltip"`.
`title`	строка \| элемент \| функция	`''`	Значение заголовка по умолчанию, если `title`атрибут отсутствует. Если задана функция, она будет вызываться со `this`ссылкой на элемент, к которому прикреплена всплывающая подсказка.
`trigger`	строка	`'hover focus'`	Как запускается всплывающая подсказка - щелкните \| парить \| фокус \| руководство по эксплуатации. Вы можете передать несколько триггеров; разделите их пробелом. `'manual'`указывает на то, что подсказка будет запускаться программно через `.tooltip('show')`, `.tooltip('hide')`и `.tooltip('toggle')`методов; это значение нельзя комбинировать с другими триггерами. `'hover'` сам по себе приведет к появлению всплывающих подсказок, которые нельзя запустить с клавиатуры, и следует использовать только при наличии альтернативных методов передачи той же информации для пользователей клавиатуры.
`offset`	номер \| строка \| функция	`0`	Смещение всплывающей подсказки относительно цели. Когда функция используется для определения смещения, она вызывается с объектом, содержащим данные смещения в качестве первого аргумента. Функция должна возвращать объект с такой же структурой. Узел DOM запускающего элемента передается в качестве второго аргумента. Дополнительные сведения см. В документации по смещению Popper.js .
`fallbackPlacement`	строка \| массив	`'flip'`	Разрешить указать, какую позицию Поппер будет использовать при откате. Дополнительные сведения см. В документации по поведению Popper.js.
`boundary`	строка \| элемент	`'scrollParent'`	Граница ограничения переполнения всплывающей подсказки. Принимает значения `'viewport'`, `'window'`, `'scrollParent'`или ссылка на HTMLElement (JavaScript только). Для получения дополнительной информации см. Документацию PreventOverflow Popper.js .
`sanitize`	логический	`true`	Включите или отключите дезинфекцию. Если активировано, `'template'`и `'title'`параметры будут очищены.
`allowList`	объект	Значение по умолчанию	Объект, содержащий разрешенные атрибуты и теги
`sanitizeFn`	null \| функция	`null`	Здесь вы можете предоставить свою собственную функцию дезинфекции. Это может быть полезно, если вы предпочитаете использовать специальную библиотеку для выполнения очистки.
`popperConfig`	null \| объект	`null`	Чтобы изменить конфигурацию Popper.js по умолчанию для Bootstrap, см. Конфигурацию Popper.js

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

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

Методы

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

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

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

show (показать)

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

tooltip.show()

hide (скрыть)

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

tooltip.hide()

toggle

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

tooltip.toggle()

dispose

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

tooltip.dispose()

enable

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

tooltip.enable()

disable

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

tooltip.disable()

toggleEnabled

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

tooltip.toggleEnabled()

update

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

tooltip.update()

getInstance

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

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

События

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

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () { 
  // do something...
})

tooltip.hide()