Підказки

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

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

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

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

Розмітка

Необхідна розмітка для спливаючої підказки – це лише dataатрибут, а titleв елементі HTML, який ви хочете мати спливаючу підказку. Згенерована розмітка спливаючої підказки досить проста, хоча для неї потрібна позиція (за замовчуванням встановлена top​​плагіном).

<!-- 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="".

методи

$().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')

Події

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})