Перейти к основному содержанию

Tooltips

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

Содержание

Обзор

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

Эффект анимации этого компонента зависит от 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)
})

Примеры

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

Узкие брюки следующего уровня keffiyeh вы, вероятно , не слышали о них. Фотобудка борода из сырого денима высокой печати веганская сумка-мессенджер stumptown. В 8-битной американской одежде из киноа от mcsweeney's fixie, изготовленной из экологически чистой киноа до стола, есть виниловая ткань из шамбре из махровой ткани Ричардсона. Beard stumptown, кардиганы banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, очищающий веганский шамбре от четырех loko mcsweeney. По-настоящему ироничный ремесленник, какой бы ни был ключевой элемент, сценарист от фермы к столу, Бэнкси, Остин, твиттер, обрабатывающий вирусный кофе из сырого денима от freegan cred.

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

<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()
Комментарии для сайта Cackle