Підказки

Огляд

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

• Підказки покладаються на сторонню бібліотеку 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.

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

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

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

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

Розмітка

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

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

Використання функції зpopperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

методи

шоу

Показує спливаючу підказку елемента. Повертається до абонента, перш ніж спливаюча підказка була фактично показана (тобто до 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()

getInstance

Статичний метод, який дозволяє отримати екземпляр спливаючої підказки, пов’язаний з елементом 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

Події

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()