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.
  • Підказки можна викликати завдяки елементу всередині тіньової DOM.

Ефект анімації цього компонента залежить від prefers-reduced-motionмедіа-запиту. Перегляньте розділ про обмежений рух нашої документації щодо спеціальних можливостей .

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

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

Одним із способів ініціалізації всіх підказок на сторінці є вибір їх за data-toggleатрибутом:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Приклади

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

Вузькі штани наступного рівня , ви, напевно , не чули про них. Стенд для фотографій, борода, веганська сумка для високого друку з необробленого деніму. Сейтан від ферми до столу, 8-бітний американський одяг McSweeney's fixie sustainable quinoa має вінілове шамбре Террі Річардсона. Борода stumptown, кардигани banh mi lomo thundercats. Тофу біодизель Вільямсбург Марфа, чотири локо mcsweeney's cleanse vegan chambray. Справді іронічний ремісник будь-який кейтар , сценер від ферми до столу Бенксі Остін твіттер ручка Фріган Кред сирий денім однопохідна кава вірусна.

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

<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встановлено для екземпляра підказки.

селектор рядок | помилковий помилковий Якщо надано селектор, об’єкти підказки будуть делеговані вказаним цілям. На практиці це також використовується для застосування підказок до динамічно доданих елементів 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 Зміщення спливаючої підказки відносно її цілі. Для отримання додаткової інформації зверніться до офсетної документації Popper.js .
резервне розміщення рядок | масив 'фліп' Дозволяє вказати, яку позицію використовуватиме Поппер у резервному режимі. Для отримання додаткової інформації зверніться до документів про поведінку Popper.js
межа рядок | елемент 'scrollParent' Межа обмеження переповнення підказки. Приймає значення 'viewport', 'window', 'scrollParent'або посилання HTMLElement (тільки для JavaScript). Для отримання додаткової інформації зверніться до документів PreventOverflow 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.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…
})