Падказкі

Агляд

Што трэба ведаць пры выкарыстанні плагіна падказкі:

• Падказкі абапіраюцца на староннію бібліятэку 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()

пераключацьУключана

Уключае магчымасць паказваць або хаваць падказку элемента.

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()