Подсказки

Преглед

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

• Подсказките разчитат на библиотеката на трета страна 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="". Уверете се, че сте променили типа case на името на опцията от 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()