Подсказки
Документация и примеры добавления настраиваемых всплывающих подсказок Bootstrap с помощью CSS и JavaScript с использованием CSS3 для анимации и data-bs-attributes для локального хранения заголовков.
Обзор
Что нужно знать при использовании плагина всплывающей подсказки:
- Всплывающие подсказки полагаются на стороннюю библиотеку Popper для позиционирования. Вы должны включить popper.min.js перед bootstrap.js или использовать
bootstrap.bundle.min.js
/bootstrap.bundle.js
который содержит Popper, чтобы всплывающие подсказки работали! - Всплывающие подсказки являются обязательными из соображений производительности, поэтому вы должны инициализировать их самостоятельно .
- Подсказки с заголовками нулевой длины никогда не отображаются.
- Укажите
container: 'body'
, чтобы избежать проблем с рендерингом в более сложных компонентах (таких как наши группы ввода, группы кнопок и т. д.). - Запуск всплывающих подсказок для скрытых элементов не будет работать.
- Подсказки для элементов
.disabled
илиdisabled
должны запускаться для элемента-оболочки. - При запуске из гиперссылок, которые охватывают несколько строк, всплывающие подсказки будут центрированы. Используйте
white-space: nowrap;
на вашем<a>
s, чтобы избежать такого поведения. - Всплывающие подсказки должны быть скрыты до того, как соответствующие им элементы будут удалены из модели DOM.
- Всплывающие подсказки могут запускаться благодаря элементу внутри теневого DOM.
prefers-reduced-motion
медиа-запроса. См.
раздел с ограниченным движением в нашей документации по специальным возможностям .
Получил все это? Отлично, давайте посмотрим, как они работают, на нескольких примерах.
Пример: включить всплывающие подсказки везде
Один из способов инициализировать все всплывающие подсказки на странице — выбрать их по их data-bs-toggle
атрибуту:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
Примеры
Наведите указатель мыши на ссылки ниже, чтобы увидеть всплывающие подсказки:
Текст-заполнитель для демонстрации некоторых встроенных ссылок с подсказками. Теперь это просто наполнитель, а не убийца. Контент размещен здесь только для того, чтобы имитировать наличие реального текста . И все это только для того, чтобы дать вам представление о том, как будут выглядеть всплывающие подсказки при использовании в реальных ситуациях. Итак, надеюсь, теперь вы увидели, как эти всплывающие подсказки для ссылок могут работать на практике, как только вы используете их на своем собственном сайте или в проекте.
Наведите указатель мыши на кнопки ниже, чтобы увидеть четыре направления всплывающих подсказок: сверху, справа, снизу и слева. Направления отражаются при использовании Bootstrap в RTL.
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
Tooltip on left
</button>
И с добавлением пользовательского HTML:
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
С SVG:
Сасс
Переменные
$tooltip-font-size: $font-size-sm;
$tooltip-max-width: 200px;
$tooltip-color: $white;
$tooltip-bg: $black;
$tooltip-border-radius: $border-radius;
$tooltip-opacity: .9;
$tooltip-padding-y: $spacer * .25;
$tooltip-padding-x: $spacer * .5;
$tooltip-margin: 0;
$tooltip-arrow-width: .8rem;
$tooltip-arrow-height: .4rem;
$tooltip-arrow-color: $tooltip-bg;
Применение
Плагин всплывающих подсказок генерирует контент и разметку по запросу и по умолчанию размещает всплывающие подсказки после их триггерного элемента.
Запустите всплывающую подсказку через JavaScript:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
Переполнение auto
иscroll
Позиция всплывающей подсказки пытается автоматически измениться, когда родительский контейнер имеет overflow: auto
или overflow: scroll
похож на наш .table-responsive
, но по-прежнему сохраняет исходное положение размещения. Чтобы решить эту проблему, установите boundary
параметр (для модификатора flip, использующего popperConfig
параметр) на любой HTMLElement, чтобы переопределить значение по умолчанию 'clippingParents'
, например document.body
:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
Разметка
Необходимая разметка для всплывающей подсказки — это только data
атрибут и title
элемент HTML, в котором вы хотите иметь всплывающую подсказку. Сгенерированная разметка всплывающей подсказки довольно проста, хотя для нее требуется позиция (по умолчанию, установленная top
плагином).
Заставить всплывающие подсказки работать с клавиатурой и пользователями вспомогательных технологий
Вы должны добавлять всплывающие подсказки только к элементам HTML, которые традиционно активны с помощью клавиатуры и являются интерактивными (например, ссылки или элементы управления формы). Хотя произвольные элементы HTML (такие как <span>
s) можно сделать фокусируемыми, добавив tabindex="0"
атрибут, это добавит потенциально раздражающие и запутанные табуляции для неинтерактивных элементов для пользователей клавиатуры, и большинство вспомогательных технологий в настоящее время не объявляют всплывающую подсказку в этой ситуации. Кроме того, не полагайтесь исключительно на hover
триггер всплывающей подсказки, так как это сделает ваши всплывающие подсказки невозможными для пользователей клавиатуры.
<!-- HTML to write -->
<a href="#" data-bs-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"
.
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
Опции
Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data-bs-
, как в data-bs-animation=""
. Не забудьте изменить тип регистра имени параметра с camelCase на kebab-case при передаче параметров через атрибуты данных. Например, вместо использования data-bs-customClass="beautifier"
используйте data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
и
allowList
не могут быть предоставлены с использованием атрибутов данных.
Имя | Тип | По умолчанию | Описание |
---|---|---|---|
animation |
логический | true |
Применить CSS-переход затухания к всплывающей подсказке |
container |
строка | элемент | ЛОЖЬ | false |
Добавляет всплывающую подсказку к определенному элементу. Пример: |
delay |
номер | объект | 0 |
Задержка отображения и скрытия всплывающей подсказки (мс) — не относится к ручному типу триггера. Если указано число, задержка применяется как к скрытию, так и к показу. Структура объекта: |
html |
логический | false |
Разрешить HTML в подсказке. Если задано значение true, теги HTML во всплывающей подсказке Используйте текст, если вы беспокоитесь о XSS-атаках. |
placement |
строка | функция | 'top' |
Как расположить всплывающую подсказку - авто | топ | дно | слева | Правильно. Когда функция используется для определения размещения, она вызывается с узлом DOM всплывающей подсказки в качестве первого аргумента и узлом DOM триггерного элемента в качестве второго. Контекст |
selector |
строка | ЛОЖЬ | false |
Если предоставлен селектор, объекты всплывающей подсказки будут делегированы указанным целям. На практике это также используется для применения всплывающих подсказок к динамически добавляемым элементам DOM ( jQuery.on поддержка). См. это и информативный пример . |
template |
нить | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Базовый HTML для использования при создании всплывающей подсказки. Всплывающая подсказка
Самый внешний элемент-оболочка должен иметь |
title |
строка | элемент | функция | '' |
Значение заголовка по умолчанию, если Если задана функция, она будет вызываться со |
trigger |
нить | 'hover focus' |
Как срабатывает всплывающая подсказка - нажмите | парить | фокус | руководство. Вы можете передать несколько триггеров; разделяйте их пробелом.
|
fallbackPlacements |
множество | ['top', 'right', 'bottom', 'left'] |
Определите резервные места размещения, предоставив список мест размещения в виде массива (в порядке предпочтения). Для получения дополнительной информации обратитесь к документам поведения Поппера. |
boundary |
строка | элемент | 'clippingParents' |
Граница ограничения переполнения всплывающей подсказки (применяется только к модификатору preventOverflow Поппера). По умолчанию он 'clippingParents' может принимать ссылку HTMLElement (только через JavaScript). Для получения дополнительной информации обратитесь к документации Popper's detectOverflow . |
customClass |
строка | функция | '' |
Добавляйте классы во всплывающую подсказку, когда она отображается. Обратите внимание, что эти классы будут добавлены в дополнение к любым классам, указанным в шаблоне. Чтобы добавить несколько классов, разделите их пробелами: Вы также можете передать функцию, которая должна возвращать одну строку, содержащую дополнительные имена классов. |
sanitize |
логический | true |
Включите или отключите очистку. Если активировано , 'template' и 'title' параметры будут очищены. См. раздел дезинфицирующих средств в нашей документации по JavaScript . |
allowList |
объект | Значение по умолчанию | Объект, который содержит разрешенные атрибуты и теги |
sanitizeFn |
ноль | функция | null |
Здесь вы можете указать свою собственную функцию дезинфекции. Это может быть полезно, если вы предпочитаете использовать выделенную библиотеку для выполнения очистки. |
offset |
массив | строка | функция | [0, 0] |
Смещение всплывающей подсказки относительно ее цели. Вы можете передать строку в атрибутах данных со значениями, разделенными запятыми, например: Когда функция используется для определения смещения, она вызывается с объектом, содержащим размещение поппера, ссылку и прямоугольники поппера в качестве первого аргумента. Узел триггерного элемента DOM передается в качестве второго аргумента. Функция должна вернуть массив с двумя числами: . Для получения дополнительной информации обратитесь к документации по смещению Поппера . |
popperConfig |
ноль | объект | функция | null |
Чтобы изменить конфигурацию Popper по умолчанию в Bootstrap, см . Конфигурация Popper . Когда функция используется для создания конфигурации Popper, она вызывается с объектом, который содержит конфигурацию Bootstrap по умолчанию Popper. Это поможет вам использовать и объединить настройки по умолчанию с вашей собственной конфигурацией. Функция должна возвращать объект конфигурации для Popper. |
Атрибуты данных для отдельных всплывающих подсказок
В качестве альтернативы параметры для отдельных всплывающих подсказок можно указать с помощью атрибутов данных, как описано выше.
Использование функции сpopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Методы
Асинхронные методы и переходы
Все методы API являются асинхронными и запускают переход . Они возвращаются к вызывающей стороне сразу после начала перехода, но до его завершения . Кроме того, вызов метода переходного компонента будет игнорироваться .
Дополнительную информацию см. в нашей документации по JavaScript .
показывать
Отображает всплывающую подсказку элемента. Возвращает вызывающему объекту до того, как всплывающая подсказка действительно будет показана (т. е. до того , как shown.bs.tooltip
произойдет событие). Это считается «ручным» срабатыванием всплывающей подсказки. Подсказки с заголовками нулевой длины никогда не отображаются.
tooltip.show()
Спрятать
Скрывает всплывающую подсказку элемента. Возвращает вызывающему объекту до того, как всплывающая подсказка будет фактически скрыта (т. е. до того , как hidden.bs.tooltip
произойдет событие). Это считается «ручным» срабатыванием всплывающей подсказки.
tooltip.hide()
переключать
Переключает всплывающую подсказку элемента. Возвращает вызывающему объекту до того, как всплывающая подсказка действительно была показана или скрыта (т. е. до того, как произошло событие shown.bs.tooltip
или ). hidden.bs.tooltip
Это считается «ручным» срабатыванием всплывающей подсказки.
tooltip.toggle()
распоряжаться
Скрывает и уничтожает всплывающую подсказку элемента (удаляет сохраненные данные в элементе DOM). Всплывающие подсказки, использующие делегирование (создаваемые с помощью параметра selector
) , не могут быть уничтожены по отдельности в дочерних элементах триггера.
tooltip.dispose()
включить
Позволяет отображать всплывающую подсказку элемента. Подсказки включены по умолчанию.
tooltip.enable()
запрещать
Удаляет возможность отображения всплывающей подсказки элемента. Всплывающая подсказка будет отображаться только в том случае, если она снова включена.
tooltip.disable()
toggleEnabled
Переключает возможность отображения или скрытия всплывающей подсказки элемента.
tooltip.toggleEnabled()
Обновить
Обновляет положение всплывающей подсказки элемента.
tooltip.update()
получить экземпляр
Статический метод, который позволяет получить экземпляр всплывающей подсказки, связанный с элементом DOM.
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
getOrCreateInstance
Статический метод, который позволяет вам получить экземпляр всплывающей подсказки, связанный с элементом DOM, или создать новый, если он не был инициализирован.
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(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()