ꯇꯨꯂꯇꯤꯄꯁꯤꯡ꯫

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

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

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

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

ꯈꯨꯗꯝ: ꯃꯐꯝ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯏꯅꯦꯕꯜ ꯇꯧ꯫

data-bs-toggleꯄꯦꯖ ꯑꯃꯗꯥ ꯇꯨꯂꯇꯤꯞ ꯄꯨꯝꯅꯃꯛ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯕꯒꯤ ꯃꯑꯣꯡ ꯑꯃꯗꯤ ꯃꯈꯣꯌꯒꯤ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯀꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯃꯈꯣꯌꯕꯨ ꯈꯅꯕꯅꯤ :

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

ꯈꯨꯗꯃꯁꯤꯡ꯫

ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯌꯦꯡꯅꯕꯒꯤꯗꯃꯛ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯑꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ ꯍꯣꯚꯔ ꯇꯧꯕꯤꯌꯨ:

ꯇꯨꯂꯇꯤꯄꯁꯀꯤ ꯃꯥꯏꯀꯩ ꯃꯔꯤ ꯑꯗꯨ ꯌꯦꯡꯅꯕꯒꯤꯗꯃꯛ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯕꯇꯅꯁꯤꯡ ꯑꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ ꯍꯣꯚꯔ ꯇꯧꯕꯤꯌꯨ: ꯃꯊꯛ, ꯑꯔꯣꯏꯕꯥ, ꯃꯈꯥꯗꯥ, ꯑꯃꯁꯨꯡ ꯑꯔꯣꯏꯕꯥ꯫ 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>

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

ꯁꯥꯁꯁ ꯇꯧꯕꯥ꯫

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

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

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

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

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

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

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯑꯣꯄꯁꯅꯒꯤ ꯃꯃꯤꯡ ꯑꯗꯨ 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()

toggleꯏꯅꯦꯕꯜ ꯇꯧꯔꯦ꯫

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯇꯨꯂꯇꯤꯞ ꯑꯗꯨ ꯎꯠꯄꯥ ꯅꯠꯠꯔꯒꯥ ꯂꯣꯠꯁꯤꯅꯕꯒꯤ ꯇꯧꯕꯥ ꯉꯝꯕꯗꯨ ꯇꯣꯒꯜ ꯇꯧꯏ꯫

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