in English

Підказки

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

Огляд

Що потрібно знати під час використання плагіна підказок:

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

Зрозуміли все це? Чудово, давайте подивимося, як вони працюють, на прикладах.

Приклад: увімкніть спливаючі підказки всюди

Одним із способів ініціалізації всіх підказок на сторінці є вибір їх за 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="".

Зауважте, що з міркувань безпеки параметри sanitize, sanitizeFnі whiteListне можна надавати за допомогою атрибутів даних.
Ім'я Тип За замовчуванням опис
анімація логічний правда Застосуйте згасання CSS до підказки
контейнер рядок | елемент | помилковий помилковий

Додає підказку до певного елемента. Приклад: container: 'body'. Цей параметр особливо корисний тим, що він дозволяє розташувати підказку в потоці документа поруч із елементом запуску, що запобігатиме відпливу підказки від елемента запуску під час зміни розміру вікна.

затримка номер | об'єкт 0

Затримка показу та приховування спливаючої підказки (мс) - не стосується типу ручного запуску

Якщо вказано число, затримка застосовується як для приховування, так і для показу

Структура об'єкта:delay: { "show": 500, "hide": 100 }

html логічний помилковий

Дозволити HTML у спливаючій підказці.

Якщо встановлено значення true, теги HTML у спливаючій підказці titleвідображатимуться у спливаючій підказці. Якщо false, textметод jQuery використовуватиметься для вставлення вмісту в DOM.

Використовуйте текст, якщо вас турбують атаки XSS.

розміщення рядок | функція "топ"

Як розташувати спливаючу підказку - авто | верх | нижня | ліворуч | правильно.
Якщо autoвказано, підказка буде динамічно переорієнтована.

Коли функція використовується для визначення розміщення, вона викликається з вузлом DOM спливаючої підказки як першим аргументом і вузлом DOM елемента запуску як другим. Контекст thisвстановлено для екземпляра підказки.

селектор рядок | помилковий помилковий Якщо надано селектор, об’єкти підказки будуть делеговані вказаним цілям. На практиці це також використовується для застосування підказок до динамічно доданих елементів DOM ( jQuery.onпідтримка). Перегляньте це та інформативний приклад .
шаблон рядок '<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посиланням на елемент, до якого приєднана підказка.

тригер рядок 'hover focus'

Як спрацьовує підказка - клацніть | навести | фокус | посібник. Ви можете передати кілька тригерів; розділіть їх пробілом.

'manual'вказує, що спливаючу підказку буде запущено програмно за допомогою методів і .tooltip('show'); це значення не можна комбінувати з будь-яким іншим тригером..tooltip('hide').tooltip('toggle')

'hover'сам по собі призведе до появи підказок, які не можна буде викликати за допомогою клавіатури, і їх слід використовувати лише за наявності альтернативних методів передачі тієї самої інформації для користувачів клавіатури.

зсув номер | рядок | функція 0

Зміщення спливаючої підказки відносно її цілі.

Коли функція використовується для визначення зсуву, вона викликається з об’єктом, що містить дані зсуву як перший аргумент. Функція повинна повертати об’єкт з такою ж структурою. Вузол DOM тригерного елемента передається як другий аргумент.

Для отримання додаткової інформації зверніться до офсетної документації Поппера .

резервне розміщення рядок | масив 'фліп' Дозволяє вказати, яку позицію використовуватиме Поппер у резервному режимі. Для отримання додаткової інформації зверніться до документів про поведінку Поппера
customClass рядок | функція ''

Додайте класи до спливаючої підказки, коли вона відображається. Зауважте, що ці класи буде додано на додаток до будь-яких класів, указаних у шаблоні. Щоб додати кілька класів, розділіть їх пробілами: 'a b'.

Ви також можете передати функцію, яка повинна повертати один рядок, що містить імена додаткових класів.

межа рядок | елемент 'scrollParent' Межа обмеження переповнення підказки. Приймає значення 'viewport', 'window', 'scrollParent'або посилання HTMLElement (тільки для JavaScript). Для отримання додаткової інформації зверніться до документів PreventOverflow Поппера .
продезінфікувати логічний правда Увімкніть або вимкніть санітарну обробку. Якщо активовано 'template', 'title'параметри будуть очищені. Перегляньте розділ про дезінфікуючий засіб у нашій документації JavaScript .
whiteList об'єкт Значення за замовчуванням Об'єкт, який містить дозволені атрибути та теги
очиститиFn нуль | функція нуль Тут ви можете встановити власну функцію дезінфекції. Це може бути корисним, якщо ви віддаєте перевагу використанню спеціальної бібліотеки для виконання санітарної обробки.
popperConfig нуль | об'єкт нуль Щоб змінити конфігурацію Bootstrap за замовчуванням Popper, перегляньте конфігурацію Popper

Атрибути даних для окремих підказок

Параметри для окремих підказок можна альтернативно вказати за допомогою використання атрибутів даних, як пояснено вище.

методи

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

Усі методи 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.tooltip Ця подія запускається, коли спливаюча підказка стає видимою для користувача (буде очікувати завершення переходів CSS).
hide.bs.tooltip Ця подія запускається негайно після hideвиклику методу екземпляра.
hidden.bs.tooltip Ця подія запускається, коли спливаюча підказка перестає бути прихованою від користувача (чекатиме, поки завершаться переходи CSS).
inserted.bs.tooltip Ця подія запускається після show.bs.tooltipподії, коли шаблон підказки було додано до DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})