Падказкі

Агляд

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

• Падказкі абапіраюцца на староннюю бібліятэку Popper для пазіцыянавання. Вы павінны ўключыць popper.min.js перад bootstrap.jsабо выкарыстоўваць той bootstrap.bundle.min.js, які змяшчае Popper.
• Усплывальныя падказкі з'яўляюцца выбарнымі з меркаванняў прадукцыйнасці, таму вы павінны ініцыялізаваць іх самастойна .
• Падказкі з загалоўкамі нулявой даўжыні ніколі не адлюстроўваюцца.
• Укажыце container: 'body', каб пазбегнуць праблем з візуалізацыяй больш складаных кампанентаў (напрыклад, нашых груп уводу, груп кнопак і г.д.).
• Запуск падказак на схаваных элементах не будзе працаваць.
• Падказкі для элементаў .disabledабо disabledпавінны запускацца на элеменце-абгортцы.
• Пры запуску з гіперспасылак, якія ахопліваюць некалькі радкоў, падказкі будуць па цэнтры. Выкарыстоўвайце white-space: nowrap;на вашым <a>s, каб пазбегнуць такіх паводзін.
• Усплывальныя падказкі павінны быць схаваныя, перш чым адпаведныя элементы будуць выдалены з DOM.
• Усплывальныя падказкі могуць быць запушчаны дзякуючы элементу ўнутры ценявога DOM.

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

Прыклады

Уключыць падказкі

Як згадвалася вышэй, вы павінны ініцыялізаваць падказкі, перш чым іх можна будзе выкарыстоўваць. Адзін са спосабаў ініцыялізаваць усе ўсплывальныя падказкі на старонцы - выбраць іх па data-bs-toggleатрыбутах, напрыклад:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Падказкі па спасылках

Навядзіце курсор на спасылкі ніжэй, каб убачыць падказкі:

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>

Карыстальніцкія падказкі

Вы можаце наладзіць знешні выгляд падказак з дапамогай зменных CSS . Мы ўсталёўваем карыстальніцкі клас data-bs-custom-class="custom-tooltip"для ахопу нашага карыстацкага выгляду і выкарыстоўваем яго для перавызначэння лакальнай зменнай CSS.

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

Напрамкі

Навядзіце курсор мышы на кнопкі ніжэй, каб убачыць чатыры ўсплывальныя падказкі: зверху, справа, знізу і злева. Напрамкі адлюстроўваюцца пры выкарыстанні Bootstrap у RTL.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
  Tooltip on left
</button>

І з даданнем карыстальніцкага HTML:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

З SVG:

CSS

Пераменныя

Як частка падыходу Bootstrap, які развіваецца да зменных CSS, у падказках цяпер выкарыстоўваюцца лакальныя зменныя CSS .tooltipдля палепшанай налады ў рэжыме рэальнага часу. Значэнні для зменных CSS задаюцца праз Sass, таму налада Sass па-ранейшаму падтрымліваецца.

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
  

Зменныя Sass

$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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

Выкарыстанне

Убудова ўсплывальнай падказкі стварае кантэнт і разметку па патрабаванні і па змаўчанні размяшчае ўсплывальныя падказкі пасля элемента запуску.

Запусціць падказку праз JavaScript:

const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)

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

Разметка

Неабходная разметка для ўсплываючай падказкі - гэта толькі dataатрыбут, а titleна HTML-элеменце вы хочаце мець падказку. Створаная разметка ўсплываючай падказкі даволі простая, хаця для яе патрабуецца пазіцыя (па змаўчанні, усталяваная topўбудовай).

<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" data-bs-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" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Параметры

Паколькі параметры можна перадаць праз атрыбуты даных або JavaScript, вы можаце дадаць імя параметра да data-bs-, як у data-bs-animation="{value}". Не забудзьцеся змяніць тып рэгістра назвы опцыі з « camelCase » на « kebab-case » пры перадачы опцый праз атрыбуты даных. Напрыклад, выкарыстоўвайце data-bs-custom-class="beautifier"замест data-bs-customClass="beautifier".

Пачынаючы з Bootstrap 5.2.0, усе кампаненты падтрымліваюць эксперыментальны атрыбут зарэзерваваных даных data-bs-config, які можа змяшчаць простую канфігурацыю кампанента ў выглядзе радка JSON. Калі элемент мае атрыбуты data-bs-config='{"delay":0, "title":123}'і data-bs-title="456", канчатковае titleзначэнне будзе , 456а асобныя атрыбуты даных будуць перавызначаць значэнні, зададзеныя ў data-bs-config. Акрамя таго, існуючыя атрыбуты даных могуць змяшчаць такія значэнні JSON, як data-bs-delay='{"show":0,"hide":150}'.

Выкарыстанне функцыі зpopperConfig

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

Метады

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

Падзеі

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()