Падказкі

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

Зразумеў усё? Выдатна, давайце паглядзім, як яны працуюць, на некаторых прыкладах.

Прыклад: уключыце падказкі ўсюды

Адзін са спосабаў ініцыялізаваць усе падказкі на старонцы - выбраць іх па 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)

$('#example').tooltip({ boundary: 'window' })

Разметка

Неабходная разметка для ўсплываючай падказкі - гэта толькі 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…
})