ꯇꯨꯂꯇꯤꯄꯁꯤꯡ꯫

ꯑꯣꯚꯔꯚꯤꯌꯨ ꯇꯧꯕꯥ꯫

ꯇꯨꯂꯇꯤꯞ ꯄ꯭ꯂꯒꯏꯟ ꯁꯤꯖꯤꯟꯅꯕꯗꯥ ꯈꯪꯖꯤꯅꯒꯗꯕꯥ ꯋꯥꯐꯃꯁꯤꯡ:

• ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯑꯁꯤ ꯄꯣꯖꯤꯁꯟ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯊꯥꯔꯗ ꯄꯥꯔꯇꯤ ꯂꯥꯏꯕ꯭ꯔꯦꯔꯤ ꯄꯣꯄꯔꯗꯥ ꯊꯥꯖꯕꯥ ꯊꯝꯂꯤ꯫ ꯅꯍꯥꯛꯅꯥ ꯃꯃꯥꯡꯗꯥ popper.min.js ꯌꯥꯑꯣꯍꯅꯒꯗꯕꯅꯤ bootstrap.js, ꯅꯠꯔꯒꯥ Popper ꯌꯥꯑꯣꯕꯥ ꯑꯃꯥ bootstrap.bundle.min.jsꯁꯤꯖꯤꯟꯅꯒꯗꯕꯅꯤ꯫
• ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯑꯁꯤ ꯄꯔꯐꯣꯃꯦꯟꯁꯀꯤ ꯃꯔꯃꯁꯤꯡꯅꯥ ꯑꯣꯄꯁꯟ-ꯏꯟ ꯇꯧꯏ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯈꯣꯌ ꯃꯁꯥꯅꯥ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯒꯗꯕꯅꯤ .
• ꯖꯤꯔꯣ-ꯂꯦꯡꯗꯕꯥ ꯇꯥꯏꯇꯂꯁꯤꯡ ꯂꯩꯕꯥ ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯑꯁꯤ ꯀꯩꯗꯧꯉꯩꯗꯥ ꯎꯠꯂꯣꯏ꯫
• container: 'body'ꯍꯦꯟꯅꯥ ꯀꯝꯞꯂꯦꯛꯁ ꯑꯣꯏꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯗꯥ (ꯑꯩꯈꯣꯌꯒꯤ ꯏꯅꯄꯨꯠ ꯒ꯭ꯔꯨꯄꯁꯤꯡ, ꯕꯇꯟ ꯒ꯭ꯔꯨꯄꯁꯤꯡ, ꯑꯁꯤꯅꯆꯤꯡꯕꯥ) ꯔꯦꯟꯗꯔ ꯇꯧꯕꯒꯤ ꯁꯃꯁ꯭ꯌꯥꯁꯤꯡ ꯊꯤꯡꯅꯕꯥ ꯇꯥꯀꯄꯤꯌꯨ꯫
• ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯕꯅꯥ ꯊꯕꯛ ꯇꯧꯔꯣꯏ꯫
• .disabledꯅꯠꯠꯔꯒꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤꯗꯃꯛ ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯑꯁꯤ disabledꯔꯦꯄꯔ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯒꯗꯕꯅꯤ꯫
• ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯂꯥꯏꯅꯁꯤꯡ ꯆꯦꯅꯕꯥ ꯍꯥꯏꯄꯔꯂꯤꯉ꯭ꯀꯁꯤꯡꯗꯒꯤ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ, ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯑꯁꯤ ꯁꯦꯟꯇꯔ ꯇꯧꯒꯅꯤ꯫ ꯂꯃꯆꯠ-ꯁꯥꯖꯠ ꯑꯁꯤꯗꯒꯤ ꯉꯥꯀꯊꯣꯛꯅꯕꯥ white-space: nowrap;ꯅꯍꯥꯛꯀꯤ s ꯗꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫<a>
• ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯑꯁꯤ ꯃꯈꯣꯌꯒꯤ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯗꯨ ꯗꯤ.ꯑꯣ.ꯑꯦꯝ.ꯗꯒꯤ ꯂꯧꯊꯣꯛꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯂꯣꯠꯁꯤꯅꯒꯗꯕꯅꯤ꯫
• ꯁꯦꯗꯣꯡ ꯗꯤ.ꯑꯣ.ꯑꯦꯝ.ꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

ꯃꯗꯨ ꯄꯨꯝꯅꯃꯛ ꯐꯪꯂꯦ? ꯑꯆꯧꯕꯥ, ꯃꯈꯣꯌꯅꯥ ꯈꯨꯗꯝ ꯈꯔꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯌꯦꯡꯁꯤ꯫

ꯈꯨꯗꯃꯁꯤꯡ꯫

ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯥ꯫

ꯃꯊꯛꯇꯥ ꯄꯅꯈ꯭ꯔꯤꯕꯥ ꯃꯇꯨꯡ ꯏꯟꯅꯥ, ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯗ꯭ꯔꯤꯉꯩ ꯃꯃꯥꯡꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯒꯗꯕꯅꯤ꯫ 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>

ꯀꯁ꯭ꯇꯝ ꯇꯨꯂꯇꯤꯄꯁꯤꯡ꯫

ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯇꯨꯂꯇꯤꯄꯁꯤꯡꯒꯤ ꯃꯑꯣꯡ ꯃꯇꯧ ꯑꯗꯨ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ ꯌꯥꯏ . ꯑꯩꯈꯣꯌꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯀꯁ꯭ꯇꯝ ꯑꯦꯄꯤꯌꯔꯟꯁ ꯁ꯭ꯀꯣꯞ ꯇꯧꯅꯕꯥ ꯀꯁ꯭ꯇꯝ ꯀ꯭ꯂꯥꯁ ꯑꯃꯥ ꯁꯦꯠ data-bs-custom-class="custom-tooltip"ꯇꯧꯏ ꯑꯃꯁꯨꯡ ꯃꯁꯤ ꯂꯣꯀꯦꯜ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.

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

ꯃꯥꯏꯀꯩꯁꯤꯡ꯫

ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯕꯇꯅꯁꯤꯡ ꯑꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ ꯍꯣꯚꯔ ꯇꯧꯗꯨꯅꯥ ꯇꯨꯂꯇꯤꯄꯁꯀꯤ ꯃꯥꯌꯀꯩ ꯃꯔꯤ ꯑꯗꯨ ꯌꯦꯡꯎ: ꯃꯊꯛ, ꯑꯔꯣꯏꯕꯥ, ꯃꯈꯥꯗꯥ, ꯑꯃꯁꯨꯡ ꯑꯔꯣꯏꯕꯥ꯫ RTLꯗꯥ Bootstrap ꯁꯤꯖꯤꯟꯅꯕꯗꯥ ꯗꯥꯏꯔꯦꯛꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯃꯤꯔꯔ ꯇꯧꯏ꯫

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

ꯑꯦꯁ.ꯚꯤ.ꯖꯤ.ꯒꯥ ꯂꯣꯌꯅꯅꯥ:

ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ

ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯍꯦꯅꯒꯠꯂꯛꯂꯤꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯤ ꯑꯦꯞꯔꯣꯆꯀꯤ ꯁꯔꯨꯛ ꯑꯃꯥ ꯑꯣꯏꯅꯥ, ꯇꯨꯂꯇꯤꯄꯁꯤꯡꯅꯥ ꯍꯧꯖꯤꯛꯇꯤ ꯂꯣꯀꯦꯜ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ .tooltip. CSS ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯤ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯑꯁꯤ ꯁꯥꯁꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁꯦꯠ ꯇꯧꯏ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯁꯥꯁ ꯀꯁ꯭ꯇꯃꯔꯥꯏꯖꯦꯁꯟ ꯑꯁꯤ ꯍꯧꯖꯤꯀꯁꯨ ꯁꯄꯣꯔꯠ ꯇꯧꯔꯤ, ꯃꯁꯤꯁꯨ꯫

  --#{$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};
  

ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

$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

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

ꯇꯨꯂꯇꯤꯞ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯅꯥ ꯗꯤꯃꯥꯟꯗꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯃꯁꯨꯡ ꯃꯥꯔꯀꯑꯥꯞ ꯁꯦꯝꯃꯤ, ꯑꯃꯁꯨꯡ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯃꯈꯣꯌꯒꯤ ꯇ꯭ꯔꯤꯒꯔ ꯑꯦꯂꯤꯃꯦꯟꯇꯀꯤ ꯃꯇꯨꯡꯗꯥ ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯊꯝꯃꯤ꯫

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯇꯨꯂꯇꯤꯞ ꯑꯁꯤ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯕꯤꯌꯨ:

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ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯈꯛꯇꯅꯤ ꯑꯃꯁꯨꯡ titleHTML ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯇꯨꯂꯇꯤꯞ ꯑꯃꯥ ꯂꯩꯕꯥ ꯄꯥꯝꯃꯤ꯫ ꯇꯨꯂꯇꯤꯞ ꯑꯃꯒꯤ ꯖꯦꯅꯦꯔꯦꯠ ꯇꯧꯔꯕꯥ ꯃꯥꯔꯀꯑꯥꯞ ꯑꯁꯤ ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯏꯆꯝ ꯆꯝꯕꯥ ꯑꯣꯏ, ꯃꯁꯤꯗꯥ ꯄꯣꯖꯤꯁꯟ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯕꯁꯨ ꯌꯥꯏ (ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ, 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>

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯕꯅꯥ, ꯅꯍꯥꯛꯅꯥ ꯑꯣꯄꯁꯅꯒꯤ ꯃꯃꯤꯡ ꯑꯃꯥ data-bs-, data-bs-animation="{value}". ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯑꯣꯄꯁꯅꯁꯤꯡ ꯄꯥꯁ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯣꯄꯁꯅꯒꯤ ꯃꯃꯤꯡꯒꯤ ꯀꯦꯁ ꯃꯈꯜ ꯑꯗꯨ “ camelCase ” ꯗꯒꯤ “ kebab -case ”ꯗꯥ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯁꯣꯌꯗꯅꯥ ꯇꯧꯕꯤꯌꯨ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, data-bs-custom-class="beautifier"ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯁꯤꯖꯤꯟꯅꯧ data-bs-customClass="beautifier".

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ 5.2.0ꯗꯒꯤ ꯍꯧꯅꯥ, ꯀꯝꯄꯣꯅꯦꯟꯇ ꯄꯨꯝꯅꯃꯛꯅꯥ JSON ꯁ꯭ꯠꯔꯤꯡ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯏꯆꯝ ꯆꯝꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯀꯅꯐꯤꯒꯔꯦꯁꯟ ꯊꯝꯕꯥ ꯌꯥꯕꯥ ꯑꯦꯛꯁꯄꯤꯔꯤꯃꯦꯟꯇ ꯔꯤꯖꯔꯚ ꯇꯧꯔꯕꯥ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯃꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯏ꯫ data-bs-configꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯅꯥ data-bs-config='{"delay":0, "title":123}'ꯑꯃꯁꯨꯡ data-bs-title="456"ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯂꯩꯕꯥ ꯃꯇꯃꯗꯥ, ꯑꯔꯣꯏꯕꯥ titleꯚꯦꯜꯌꯨ ꯑꯗꯨ ꯑꯣꯏꯒꯅꯤ 456ꯑꯃꯁꯨꯡ ꯇꯣꯉꯥꯅꯕꯥ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯅꯥ data-bs-config. ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠꯁꯤꯡꯅꯥ 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()