ꯃꯔꯨꯑꯣꯏꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯆꯠꯂꯨ꯫ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡ ꯅꯦꯚꯤꯒꯦꯁꯅꯗꯥ ꯆꯠꯂꯨ꯫
in English

ꯄꯣꯄꯣꯚꯔꯁꯤꯡ꯫

ꯅꯍꯥꯛꯀꯤ ꯁꯥꯏꯇꯇꯥ ꯂꯩꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯍꯦꯛꯇꯗꯥ iOSꯗꯥ ꯐꯪꯂꯤꯕꯥ ꯑꯗꯨꯒꯨꯝꯅꯥ Bootstrap popovers ꯍꯥꯄꯆꯤꯟꯅꯕꯒꯤ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯦꯁꯟ ꯑꯃꯁꯨꯡ ꯈꯨꯗꯃꯁꯤꯡ꯫

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

ꯄꯣꯄꯑꯣꯚꯔ ꯄ꯭ꯂꯒꯏꯟ ꯁꯤꯖꯤꯟꯅꯕꯗꯥ ꯈꯪꯖꯤꯅꯒꯗꯕꯥ ꯋꯥꯐꯃꯁꯤꯡ:

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

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

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

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

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

ꯈꯨꯗꯝ: containerꯑꯣꯄꯁꯟ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ꯫

ꯄꯣꯄꯣꯚꯔ ꯑꯃꯗꯥ ꯑꯀꯥꯌꯕꯥ ꯄꯤꯕꯥ ꯃꯃꯥ-ꯃꯄꯥꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯁ꯭ꯇꯥꯏꯜ ꯈꯔꯥ ꯂꯩꯕꯥ ꯃꯇꯃꯗꯥ, ꯅꯍꯥꯛꯅꯥ ꯀꯁ꯭ꯇꯝ ꯑꯃꯥ ꯇꯥꯀꯄꯥ ꯄꯥꯝꯂꯒꯅꯤ containerꯃꯗꯨꯅꯥ ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯄꯣꯄꯣꯚꯔꯒꯤ HTML ꯑꯗꯨ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯎꯕꯥ ꯐꯪꯒꯅꯤ꯫

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

ꯈꯨꯗꯝ

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

ꯃꯥꯏꯀꯩ ꯃꯔꯤ꯫

ꯑꯣꯄꯁꯟ ꯃꯔꯤ ꯂꯩ: ꯃꯊꯛ, ꯑꯔꯣꯏꯕꯥ, ꯃꯈꯥꯗꯥ, ꯑꯃꯁꯨꯡ ꯂꯦꯞꯇꯅꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ꯫ RTLꯗꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯁꯤꯖꯤꯟꯅꯕꯗꯥ ꯗꯥꯏꯔꯦꯛꯁꯅꯁꯤꯡ ꯑꯗꯨ ꯃꯤꯔꯔ ꯇꯧꯏ꯫

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

ꯃꯊꯪꯒꯤ ꯀ꯭ꯂꯤꯛ ꯑꯗꯨꯗꯥ ꯗꯤꯁꯃꯤꯁ ꯇꯧꯔꯣ꯫

focusꯇꯣꯒꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯒꯤ ꯇꯣꯉꯥꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯌꯨꯖꯔꯒꯤ ꯃꯊꯪꯒꯤ ꯀ꯭ꯂꯤꯛ ꯑꯗꯨꯗꯥ ꯄꯣꯄꯣꯚꯔꯁꯤꯡ ꯊꯥꯗꯣꯛꯅꯕꯥ ꯇ꯭ꯔꯤꯒꯔ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯗꯤꯁꯃꯤꯁ-ꯑꯣꯟ-ꯅꯦꯛꯁꯠ-ꯀ꯭ꯂꯤꯀꯀꯤꯗꯃꯛꯇꯥ ꯑꯀꯛꯅꯕꯥ ꯃꯥꯔꯀꯑꯥꯞ ꯃꯊꯧ ꯇꯥꯏ꯫

ꯑꯆꯨꯝꯕꯥ ꯀ꯭ꯔꯣꯁ-ꯕ꯭ꯔꯥꯎꯖꯔ ꯑꯃꯁꯨꯡ ꯀ꯭ꯔꯣꯁ-ꯄ꯭ꯂꯦꯠꯐꯣꯔꯝ ꯂꯃꯆꯠ-ꯁꯥꯖꯠꯀꯤꯗꯃꯛ, ꯅꯍꯥꯛꯅꯥ ꯇꯦꯒ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯔꯣꯏꯗꯕꯅꯤ, ꯇꯦꯒ ꯑꯗꯨ<a> ꯁꯤꯖꯤꯟꯅꯒꯗꯕꯅꯤ , ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯅꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯃꯁꯨ ꯌꯥꯑꯣꯒꯗꯕꯅꯤ꯫<button>tabindex

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  trigger: 'focus'
})

ꯗꯤꯁꯑꯦꯕꯜ ꯑꯣꯏꯔꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ꯫

ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯂꯩꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ disabledꯑꯁꯤ ꯏꯟꯇꯔꯦꯛꯇꯤꯕ ꯑꯣꯏꯗꯦ, ꯃꯁꯤꯅꯥ ꯇꯥꯀꯄꯗꯤ ꯌꯨꯖꯔꯁꯤꯡꯅꯥ ꯄꯣꯄꯑꯣꯚꯔ (ꯅꯠꯠꯔꯒꯥ ꯇꯨꯂꯇꯤꯞ) ꯑꯃꯥ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯅꯕꯥ ꯍꯣꯚꯔ ꯇꯧꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯀ꯭ꯂꯤꯛ ꯇꯧꯕꯥ ꯌꯥꯗꯦ꯫ ꯋꯥꯔꯀꯔꯎꯟꯗ ꯑꯃꯥ ꯑꯣꯏꯅꯥ, ꯅꯍꯥꯛꯅꯥ ꯔꯦꯄꯔ ꯑꯃꯗꯒꯤ ꯄꯣꯄꯣꯚꯔ ꯑꯗꯨ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯕꯥ ꯄꯥꯝꯂꯒꯅꯤ <div>ꯅꯠꯠꯔꯒꯥ <span>, ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯌꯥꯝꯅꯥ ꯐꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯀꯤꯕꯣꯔꯗ-ꯐꯣꯀꯁ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯑꯣꯏꯅꯥ ꯁꯦꯝꯕꯥ tabindex="0".

ꯗꯤꯁꯑꯦꯕꯜ ꯑꯣꯏꯔꯕꯥ ꯄꯣꯄꯣꯚꯔ ꯇ꯭ꯔꯤꯒꯔꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯅꯍꯥꯛꯅꯥ ꯄꯣꯄꯣꯚꯔ ꯑꯗꯨ ꯅꯍꯥꯛꯀꯤ ꯌꯨꯖꯔꯁꯤꯡꯗꯥ ꯈꯨꯗꯛꯀꯤ ꯑꯣꯏꯕꯥ ꯚꯤꯖꯨꯑꯦꯜ ꯐꯤꯗꯕꯦꯛ ꯑꯣꯏꯅꯥ ꯎꯕꯥ ꯐꯪꯍꯅꯕꯥ ꯍꯥꯌꯕꯁꯤꯁꯨ ꯄꯥꯝꯂꯕꯁꯨ ꯌꯥꯏ data-bs-trigger="hover focus"ꯃꯔꯃꯗꯤ ꯃꯈꯣꯌꯅꯥ ꯗꯤꯁꯑꯦꯕꯜ ꯑꯣꯏꯔꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯀ꯭ꯂꯤꯛ ꯇꯧꯒꯅꯤ ꯍꯥꯌꯅꯥ ꯊꯥꯖꯗꯕꯥ ꯌꯥꯏ꯫

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

ꯁꯥꯁꯁ ꯇꯧꯕꯥ꯫

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

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯣꯄꯑꯣꯚꯔꯁꯤꯡ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯥ:

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

ꯄꯣꯄꯣꯚꯔꯁꯤꯡ ꯑꯁꯤ ꯀꯤꯕꯣꯔꯗ ꯑꯃꯁꯨꯡ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯊꯕꯛ ꯑꯣꯏꯅꯥ ꯄꯥꯡꯊꯣꯀꯄꯥ꯫

ꯀꯤꯕꯣꯔꯗ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯄꯣꯄꯑꯣꯚꯔꯁꯤꯡ ꯑꯦꯛꯇꯤꯚ ꯇꯧꯕꯥ ꯌꯥꯍꯟꯅꯕꯥ, ꯅꯍꯥꯛꯅꯥ ꯃꯈꯣꯌꯕꯨ ꯇ꯭ꯔꯦꯗꯤꯁꯅꯦꯜ ꯑꯣꯏꯅꯥ ꯀꯤꯕꯣꯔꯗ-ꯐꯣꯀꯁ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯑꯃꯁꯨꯡ ꯏꯟꯇꯔꯦꯛꯇꯤꯕ ꯑꯣꯏꯕꯥ (ꯂꯤꯉ꯭ꯛ ꯅꯠꯠꯔꯒꯥ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯒꯨꯝꯕꯥ) HTML ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯈꯛꯇꯃꯛ ꯍꯥꯄꯀꯗꯕꯅꯤ꯫ <span>ꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯑꯔꯕꯤꯠꯔꯦꯔꯤ HTML ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ( sꯒꯨꯝꯕꯥ) ꯐꯣꯀꯁ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯑꯣꯏꯍꯅꯕꯥ ꯌꯥꯏ tabindex="0", ꯃꯁꯤꯅꯥ ꯀꯤꯕꯣꯔꯗ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯅꯟ-ꯏꯟꯇꯔꯦꯛꯇꯤꯕ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯄꯣꯇꯦꯟꯁꯤꯌꯦꯜ ꯑꯣꯏꯕꯥ ꯅꯨꯡꯉꯥꯏꯇꯕꯥ ꯑꯃꯁꯨꯡ ꯋꯥꯈꯜ ꯋꯥꯕꯥ ꯇꯦꯕ ꯁ꯭ꯇꯣꯄꯁꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯒꯅꯤ, ꯑꯃꯁꯨꯡ ꯑꯌꯥꯝꯕꯥ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯅꯥ ꯍꯧꯖꯤꯛ ꯐꯤꯚꯝ ꯑꯁꯤꯗꯥ ꯄꯣꯄꯣꯚꯔꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯂꯥꯎꯊꯣꯛꯇꯦ꯫ . ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯅꯍꯥꯛꯀꯤ ꯄꯣꯄꯣꯚꯔꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯇ꯭ꯔꯤꯒꯔ ꯑꯣꯏꯅꯥ ꯈꯛꯇꯗꯥ ꯊꯥꯖꯕꯥ ꯊꯃꯒꯅꯨ hover, ꯃꯔꯃꯗꯤ ꯃꯁꯤꯅꯥ ꯃꯈꯣꯌꯕꯨ ꯀꯤꯕꯣꯔꯗ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯕꯥ ꯉꯃꯍꯜꯂꯣꯏ꯫

ꯑꯗꯣꯝꯅꯥ ꯑꯣꯄꯁꯟ ꯑꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯄꯣꯄꯣꯚꯔꯁꯤꯡꯗꯥ ꯔꯤꯆ, ꯁ꯭ꯠꯔꯀꯆꯔꯦꯜ HTML ꯍꯥꯄꯆꯤꯅꯕꯥ ꯌꯥꯏ html, ꯑꯗꯨꯕꯨ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯗꯣꯃꯗꯥ ꯀꯟꯇꯦꯟꯇ ꯌꯥꯝꯅꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯌꯥꯗꯅꯕꯥ ꯀꯟꯅꯥ ꯇꯀꯁꯤꯜꯂꯤ꯫ ꯄꯣꯄꯣꯚꯔꯁꯤꯡꯅꯥ ꯍꯧꯖꯤꯛ ꯊꯕꯛ ꯇꯧꯕꯒꯤ ꯃꯑꯣꯡ ꯑꯁꯤ, ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯎꯠꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ, ꯃꯈꯣꯌꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ aria-describedbyꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯇ꯭ꯔꯤꯒꯔ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯥ ꯇꯤꯡꯏ꯫ ꯃꯁꯤꯒꯤ ꯃꯍꯩ ꯑꯣꯏꯅꯥ ꯄꯣꯄꯣꯚꯔꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯗꯥ ꯁꯥꯡꯂꯕꯥ, ꯂꯦꯞꯄꯥ ꯂꯩꯇꯅꯥ ꯁ꯭ꯠꯔꯤꯝ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯂꯥꯎꯊꯣꯛꯀꯅꯤ꯫

ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯅꯍꯥꯛꯀꯤ ꯄꯣꯄꯑꯣꯚꯔꯗꯥ ꯏꯟꯇꯔꯦꯛꯇꯤꯕ ꯀꯟꯠꯔꯣꯂꯁꯤꯡ (ꯐꯣꯔꯝ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯒꯨꯝꯕꯥ)ꯁꯨ ꯌꯥꯑꯣꯍꯅꯕꯥ ꯌꯥꯏ (ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ allowListꯑꯁꯤ ꯑꯌꯥꯕꯥ ꯄꯤꯔꯕꯥ ꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯇꯦꯒꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ), ꯍꯧꯖꯤꯛꯀꯤ ꯑꯣꯏꯅꯥ ꯄꯣꯄꯣꯚꯔ ꯑꯁꯤꯅꯥ ꯀꯤꯕꯣꯔꯗ ꯐꯣꯀꯁ ꯑꯣꯔꯗꯔ ꯃꯦꯅꯦꯖ ꯇꯧꯗꯦ ꯍꯥꯌꯕꯥ ꯈꯉꯕꯤꯌꯨ꯫ ꯀꯤꯕꯣꯔꯗ ꯌꯨꯖꯔ ꯑꯃꯅꯥ ꯄꯣꯄꯑꯣꯚꯔ ꯑꯃꯥ ꯍꯥꯡꯗꯣꯀꯄꯥ ꯃꯇꯃꯗꯥ, ꯇ꯭ꯔꯤꯒꯔꯤꯡ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯃꯤꯠꯌꯦꯡ ꯊꯝꯂꯤ, ꯑꯃꯁꯨꯡ ꯄꯣꯄꯣꯚꯔ ꯑꯗꯨꯅꯥ ꯃꯍꯧꯁꯥꯅꯥ ꯗꯣꯛꯌꯨꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯁ꯭ꯠꯔꯀꯆꯔꯗꯥ ꯇ꯭ꯔꯤꯒꯔ ꯑꯗꯨ ꯈꯨꯗꯛꯇꯥ ꯇꯨꯡ ꯏꯟꯗꯕꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ, ꯃꯥꯡꯂꯣꯃꯗꯥ ꯆꯪꯁꯤꯅꯕꯥ/ꯄ꯭ꯔꯦꯁ ꯇꯧꯕꯒꯤ ꯒ꯭ꯌꯥꯔꯦꯟꯇꯤ ꯂꯩꯇꯦ꯫TABꯀꯤꯕꯣꯔꯗ ꯌꯨꯖꯔ ꯑꯃꯥ ꯄꯣꯄꯑꯣꯚꯔ ꯃꯁꯥꯃꯛꯇꯗꯥ ꯄꯨꯔꯛꯀꯅꯤ꯫ ꯋꯥꯍꯪ ꯑꯃꯗꯥ ꯍꯥꯌꯔꯕꯗꯥ, ꯄꯣꯄꯣꯚꯔ ꯑꯃꯗꯥ ꯏꯟꯇꯔꯦꯛꯇꯤꯕ ꯀꯟꯠꯔꯣꯂꯁꯤꯡ ꯍꯥꯄꯆꯤꯅꯕꯈꯛꯇꯅꯥ ꯀꯟꯠꯔꯣꯂꯁꯤꯡ ꯑꯁꯤ ꯀꯤꯕꯣꯔꯗ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯌꯧꯕꯥ ꯉꯃꯗꯕꯥ/ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯗꯕꯥ ꯑꯣꯏꯍꯅꯕꯥ ꯌꯥꯏ, ꯅꯠꯠꯔꯒꯥ ꯌꯥꯃꯗ꯭ꯔꯕꯗꯥ ꯂꯣꯖꯤꯀꯦꯜ ꯑꯣꯏꯗꯕꯥ ꯑꯄꯨꯅꯕꯥ ꯐꯣꯀꯁ ꯑꯣꯔꯗꯔ ꯑꯃꯥ ꯑꯣꯏꯍꯅꯕꯥ ꯌꯥꯏ꯫ ꯍꯥꯌꯔꯤꯕꯥ ꯀꯦꯁꯁꯤꯡ ꯑꯁꯤꯗꯥ, ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯃꯣꯗꯦꯜ ꯗꯥꯏꯑꯦꯂꯣꯒ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯈꯟꯅꯕꯤꯌꯨ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

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

ꯁꯦꯛꯌꯨꯔꯤꯇꯤꯒꯤ ꯃꯔꯃꯁꯤꯡꯅꯥ sanitize, sanitizeFn, ꯑꯃꯁꯨꯡ allowListꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯁꯞꯂꯥꯏ ꯇꯧꯕꯥ ꯌꯥꯗꯦ ꯍꯥꯌꯕꯁꯤ ꯈꯪꯖꯤꯅꯕꯤꯌꯨ.
ꯃꯤꯡ ꯃꯈꯜ ꯀꯥꯡꯂꯣꯟ ꯏꯟꯗꯕ ꯋꯥꯔꯣꯜ
animation ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫ true ꯄꯣꯄꯣꯚꯔꯗꯥ CSS ꯐꯦꯗ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯑꯃꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧ꯫
container ꯁ꯭ꯠꯔꯤꯡ | ꯑꯦꯂꯤꯃꯦꯟꯇ | ꯑꯔꯥꯟꯕ false

ꯄꯣꯄꯣꯚꯔ ꯑꯗꯨ ꯑꯀꯛꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯑꯦꯄꯦꯟꯗ ꯇꯧꯏ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ: container: 'body'. ꯑꯣꯄꯁꯟ ꯑꯁꯤ ꯃꯔꯨꯑꯣꯏꯅꯥ ꯀꯥꯟꯅꯩ ꯃꯔꯃꯗꯤ ꯃꯁꯤꯅꯥ ꯅꯍꯥꯀꯄꯨ ꯇ꯭ꯔꯤꯒꯔꯤꯡ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯃꯅꯥꯛꯇꯥ ꯂꯩꯕꯥ ꯗꯣꯛꯌꯨꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯐ꯭ꯂꯣꯗꯥ ꯄꯣꯄꯣꯚꯔ ꯑꯗꯨ ꯄꯣꯖꯤꯁꯟ ꯇꯧꯕꯥ ꯌꯥꯍꯜꯂꯤ - ꯃꯁꯤꯅꯥ ꯎꯏꯟꯗꯣ ꯔꯤꯁꯥꯏꯖ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯄꯣꯄꯣꯚꯔ ꯑꯗꯨ ꯇ꯭ꯔꯤꯒꯔꯤꯡ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯒꯤ ꯂꯥꯞꯅꯥ ꯂꯥꯞꯅꯥ ꯆꯠꯄꯥ ꯊꯤꯡꯒꯅꯤ꯫

content ꯁ꯭ꯠꯔꯤꯡ | ꯑꯦꯂꯤꯃꯦꯟꯇ | ꯃꯊꯧ ''

data-bs-contentꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯂꯩꯠꯔꯕꯗꯤ ꯗꯤꯐꯣꯜꯇ ꯀꯟꯇꯦꯟꯇ ꯚꯦꯜꯌꯨ .

thisꯀꯔꯤꯒꯨꯝꯕꯥ ꯐꯉ꯭ꯀꯁꯟ ꯑꯃꯥ ꯄꯤꯔꯕꯗꯤ, ꯃꯁꯤ ꯄꯣꯄꯣꯚꯔ ꯑꯗꯨ ꯑꯦꯇꯦꯆ ꯇꯧꯔꯤꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯃꯁꯤꯒꯤ ꯔꯦꯐꯥꯔꯦꯟꯁ ꯁꯦꯠ ꯇꯧꯗꯨꯅꯥ ꯀꯧꯒꯅꯤ꯫

delay ꯃꯁꯤꯡ | ꯄꯣꯠꯂꯝ 0

ꯄꯣꯄꯣꯚꯔ (ms) ꯎꯠꯄꯥ ꯑꯃꯁꯨꯡ ꯂꯣꯠꯁꯤꯅꯕꯥ ꯊꯦꯡꯊꯕꯥ - ꯃꯦꯅꯨꯑꯦꯜ ꯇ꯭ꯔꯤꯒꯔ ꯃꯈꯜ ꯑꯗꯨꯗꯥ ꯆꯠꯅꯔꯣꯏ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯝꯕꯔ ꯑꯃꯥ ꯁꯞꯂꯥꯏ ꯇꯧꯔꯕꯗꯤ, ꯂꯣꯠꯄꯥ/ꯁꯣ ꯑꯅꯤꯃꯛꯇꯥ ꯊꯦꯡꯊꯕꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ꯫

ꯑꯣꯕꯖꯦꯛꯇ ꯁ꯭ꯠꯔꯀꯆꯔ ꯑꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯁꯤꯡꯁꯤꯅꯤ:delay: { "show": 500, "hide": 100 }

html ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫ false ꯄꯣꯄꯣꯚꯔꯗꯥ HTML ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯔꯥꯅꯕꯥ ꯑꯣꯏꯔꯕꯗꯤ, innerTextꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯁꯤ DOMꯗꯥ ꯀꯟꯇꯦꯟꯇ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯒꯅꯤ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ XSS ꯑꯦꯇꯦꯀꯁꯤꯡꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯋꯥꯈꯜ ꯇꯥꯔꯕꯗꯤ ꯇꯦꯛꯁꯠ ꯁꯤꯖꯤꯟꯅꯧ꯫
placement ꯁ꯭ꯠꯔꯤꯡ | ꯃꯊꯧ 'right'

ꯄꯣꯄꯣꯚꯔ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯄꯣꯖꯤꯁꯟ ꯇꯧꯒꯅꯤ - ꯑꯣꯇꯣ | ꯃꯊꯛꯇꯥ ꯂꯩꯕꯥ | ꯃꯈꯥꯗꯥ ꯂꯩꯕꯥ | ꯂꯦꯃꯍꯧꯔꯤꯕꯥ | ꯆꯨꯝꯃꯤ.
ꯁ꯭ꯄꯦꯁꯤꯐꯥꯏ ꯇꯧꯔꯕꯥ ꯃꯇꯃꯗꯥ auto, ꯃꯁꯤꯅꯥ ꯄꯣꯄꯣꯚꯔ ꯑꯗꯨ ꯗꯥꯏꯅꯥꯃꯤꯛ ꯑꯣꯏꯅꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯑꯣꯔꯤꯑꯦꯟꯇꯦꯠ ꯇꯧꯒꯅꯤ꯫

ꯐꯉ꯭ꯀꯁꯟ ꯑꯃꯅꯥ ꯄ꯭ꯂꯦꯁꯃꯦꯟꯇ ꯂꯦꯄꯊꯣꯛꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯃꯇꯃꯗꯥ, ꯃꯁꯤ ꯄꯣꯄꯣꯚꯔ DOM ꯅꯣꯗ ꯑꯁꯤ ꯃꯁꯤꯒꯤ ꯑꯍꯥꯅꯕꯥ ꯑꯥꯔꯒꯨꯃꯦꯟꯇ ꯑꯣꯏꯅꯥ ꯑꯃꯁꯨꯡ ꯇ꯭ꯔꯤꯒꯔꯤꯡ ꯑꯦꯂꯤꯃꯦꯟꯇ DOM ꯅꯣꯗ ꯑꯁꯤ ꯑꯅꯤꯁꯨꯕꯥ ꯑꯣꯏꯅꯥ ꯀꯧꯏ꯫ ꯀꯟꯇꯦꯛꯁ ꯑꯁꯤ thisꯄꯣꯄꯣꯚꯔ ꯏꯟꯁꯇꯦꯟꯁꯇꯥ ꯁꯦꯠ ꯇꯧꯏ꯫

selector ꯁ꯭ꯠꯔꯤꯡ | ꯑꯔꯥꯟꯕ false ꯀꯔꯤꯒꯨꯝꯕꯥ ꯁꯦꯂꯦꯛꯇꯔ ꯑꯃꯥ ꯄꯤꯔꯕꯗꯤ, ꯄꯣꯄꯣꯚꯔ ꯑꯣꯕꯖꯦꯛꯇꯁꯤꯡ ꯑꯗꯨ ꯑꯀꯛꯅꯕꯥ ꯇꯥꯔꯒꯦꯇꯁꯤꯡꯗꯥ ꯁꯤꯟꯅꯒꯅꯤ꯫ ꯆꯠꯅꯕꯤꯗꯥ, ꯃꯁꯤ ꯗꯥꯏꯅꯥꯃꯤꯛ HTML ꯀꯟꯇꯦꯟꯇ ꯄꯣꯄꯑꯣꯚꯔꯁꯤꯡ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯌꯥꯍꯟꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯃꯁꯤ ꯑꯃꯁꯨꯡ ꯏꯅꯐꯣꯔꯃꯦꯇꯤꯕ ꯑꯣꯏꯕꯥ ꯈꯨꯗꯝ ꯑꯃꯥ ꯌꯦꯡꯕꯤꯌꯨ .
template ꯄꯔꯦꯡ '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

ꯄꯣꯄꯑꯣꯚꯔ ꯁꯦꯝꯕꯥ ꯃꯇꯃꯗꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ HTML ꯕꯦꯖ ꯇꯧꯕꯥ꯫

ꯄꯣꯄꯣꯚꯔꯁꯤꯡ titleꯑꯁꯤ ꯏꯅꯖꯦꯀꯁꯟ ꯇꯧꯒꯅꯤ .popover-header.

ꯄꯣꯄꯣꯚꯔꯁꯤꯡ contentꯑꯁꯤ ꯏꯅꯖꯦꯀꯁꯟ ꯇꯧꯒꯅꯤ .popover-body.

.popover-arrowꯄꯣꯄꯣꯚꯔꯒꯤ ꯇꯤꯔ ꯑꯣꯏꯔꯒꯅꯤ꯫

ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯃꯄꯥꯟꯗꯥ ꯂꯩꯕꯥ ꯔꯦꯄꯔ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ .popoverꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯂꯩꯒꯗꯕꯅꯤ꯫

title ꯁ꯭ꯠꯔꯤꯡ | ꯑꯦꯂꯤꯃꯦꯟꯇ | ꯃꯊꯧ ''

titleꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯂꯩꯠꯔꯕꯗꯤ ꯗꯤꯐꯣꯜꯇ ꯇꯥꯏꯇꯜ ꯚꯦꯜꯌꯨ .

thisꯀꯔꯤꯒꯨꯝꯕꯥ ꯐꯉ꯭ꯀꯁꯟ ꯑꯃꯥ ꯄꯤꯔꯕꯗꯤ, ꯃꯁꯤ ꯄꯣꯄꯣꯚꯔ ꯑꯗꯨ ꯑꯦꯇꯦꯆ ꯇꯧꯔꯤꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯃꯁꯤꯒꯤ ꯔꯦꯐꯥꯔꯦꯟꯁ ꯁꯦꯠ ꯇꯧꯗꯨꯅꯥ ꯀꯧꯒꯅꯤ꯫

trigger ꯄꯔꯦꯡ 'click' ꯃꯇꯧ ꯀꯔꯝꯅꯥ ꯄꯣꯄꯑꯣꯚꯔ ꯑꯁꯤ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯕꯒꯦ - ꯀ꯭ꯂꯤꯛ ꯇꯧꯕꯤꯌꯨ | ꯍꯣꯚꯔ ꯇꯧꯕꯥ | ꯐꯣꯀꯁ ꯇꯧꯕꯥ | ꯏꯁꯥꯅ ꯄꯥꯉꯡꯣꯡꯄ. ꯅꯍꯥꯛꯅꯥ ꯃꯜꯇꯤꯄꯜ ꯇ꯭ꯔꯤꯒꯔꯁꯤꯡ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯏ; ꯃꯈꯣꯌꯕꯨ ꯁ꯭ꯄꯦꯁ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯇꯣꯈꯥꯌꯅꯥ ꯊꯝꯃꯨ꯫ manualꯑꯇꯣꯞꯄꯥ ꯇ꯭ꯔꯤꯒꯔ ꯑꯃꯒꯥ ꯄꯨꯅꯁꯤꯅꯕꯥ ꯌꯥꯗꯦ꯫
fallbackPlacements ꯑꯦꯔꯦ ꯇꯧꯕꯥ꯫ ['top', 'right', 'bottom', 'left'] ꯑꯦꯔꯦꯗꯥ (ꯄꯁꯟꯗꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ) ꯄ꯭ꯂꯦꯁꯃꯦꯟꯇꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯄꯤꯗꯨꯅꯥ ꯐꯣꯂꯕꯦꯛ ꯄ꯭ꯂꯦꯁꯃꯦꯟꯇꯁꯤꯡ ꯗꯤꯐꯥꯏꯟ ꯇꯧ꯫ ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯅꯒꯤꯗꯃꯛꯇꯥ ꯄꯣꯄꯔꯒꯤ ꯂꯃꯆꯠ-ꯁꯥꯖꯠꯀꯤ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡ ꯌꯦꯡꯕꯤꯌꯨ꯫
boundary ꯁ꯭ꯠꯔꯤꯡ | ꯄꯣꯠꯂꯝ 'clippingParents' ꯄꯣꯄꯑꯣꯚꯔꯒꯤ ꯑꯣꯚꯔꯐ꯭ꯂꯣ ꯀꯟꯠꯔꯣꯜ ꯉꯃꯈꯩ (ꯄꯣꯄꯔꯒꯤ ꯄ꯭ꯔꯤꯚꯦꯟꯇꯑꯣꯚꯔꯐ꯭ꯂꯣ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯈꯛꯇꯗꯥ ꯆꯠꯅꯩ)꯫ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯃꯁꯤ 'clippingParents'HTMLElement ꯔꯦꯐꯥꯔꯦꯟꯁ ꯑꯃꯥ (ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯈꯛꯇꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ) ꯑꯃꯅꯤ ꯑꯃꯁꯨꯡ ꯌꯥꯕꯥ ꯌꯥꯏ꯫ ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯅꯒꯤꯗꯃꯛꯇꯥ ꯄꯣꯄꯔꯒꯤ ꯗꯤꯇꯦꯛꯇꯑꯣꯚꯔꯐ꯭ꯂꯣ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡ ꯌꯦꯡꯕꯤꯌꯨ .
customClass ꯁ꯭ꯠꯔꯤꯡ | ꯃꯊꯧ ''

ꯃꯁꯤ ꯎꯠꯄꯥ ꯃꯇꯃꯗꯥ ꯄꯣꯄꯣꯚꯔꯗꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯇꯦꯃꯞꯂꯦꯠꯇꯥ ꯄꯤꯔꯤꯕꯥ ꯀ꯭ꯂꯥꯁ ꯑꯃꯍꯦꯛꯇꯒꯤ ꯃꯊꯛꯇꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯍꯥꯄꯆꯤꯜꯂꯒꯅꯤ ꯍꯥꯌꯕꯁꯤ ꯈꯪꯖꯤꯅꯕꯤꯌꯨ꯫ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ, ꯃꯈꯣꯌꯕꯨ ꯁ꯭ꯄꯦꯁꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯇꯣꯉꯥꯟꯅꯥ ꯊꯝꯃꯨ: 'class-1 class-2'.

ꯑꯍꯦꯅꯕꯥ ꯀ꯭ꯂꯥꯁꯀꯤ ꯃꯃꯤꯡꯁꯤꯡ ꯌꯥꯑꯣꯕꯥ ꯁ꯭ꯠꯔꯤꯡ ꯑꯃꯈꯛꯇꯃꯛ ꯔꯤꯇꯔꯟ ꯇꯧꯒꯗꯕꯥ ꯐꯉ꯭ꯀꯁꯟ ꯑꯃꯁꯨ ꯅꯍꯥꯛꯅꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

sanitize ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫ true ꯁꯦꯅꯤꯇꯥꯏꯖꯦꯁꯟ ꯑꯁꯤ ꯏꯅꯦꯕꯜ ꯅꯠꯠꯔꯒꯥ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯕꯥ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯔꯕꯗꯤ 'template', 'content'ꯑꯃꯁꯨꯡ 'title'ꯑꯣꯄꯁꯅꯁꯤꯡ ꯁꯦꯅꯤꯇꯥꯏꯖ ꯇꯧꯒꯅꯤ꯫ ꯑꯩꯈꯣꯌꯒꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯦꯁꯅꯗꯥ ꯂꯩꯕꯥ ꯁꯦꯅꯤꯇꯥꯏꯖꯔ ꯁꯦꯛꯁꯟ ꯑꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ .
allowList ꯄꯣꯠꯂꯝ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯕꯥ ꯚꯦꯜꯌꯨ꯫ ꯑꯌꯥꯕꯥ ꯄꯤꯕꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯇꯦꯒꯁꯤꯡ ꯌꯥꯎꯕꯥ ꯑꯣꯕꯖꯦꯛꯇ꯫
sanitizeFn ꯅꯜ | ꯃꯊꯧ null ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯑꯗꯣꯝꯅꯥ ꯑꯗꯣꯃꯒꯤ ꯏꯁꯥꯒꯤ ꯁꯦꯅꯤꯇꯥꯏꯖ ꯐꯉ꯭ꯀꯁꯟ ꯁꯞꯂꯥꯏ ꯇꯧꯕꯥ ꯌꯥꯒꯅꯤ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯁꯦꯅꯤꯇꯥꯏꯖꯦꯁꯟ ꯄꯥꯡꯊꯣꯛꯅꯕꯥ ꯀꯠꯊꯣꯛꯂꯕꯥ ꯂꯥꯏꯕ꯭ꯔꯦꯔꯤ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯄꯥꯝꯂꯕꯗꯤ ꯃꯁꯤ ꯀꯥꯟꯅꯔꯕꯥ ꯌꯥꯏ꯫
offset ꯑꯦꯔꯦ ꯇꯧꯕꯥ | ꯁ꯭ꯠꯔꯤꯡ | ꯃꯊꯧ [0, 8]

ꯃꯁꯤꯒꯤ ꯄꯥꯟꯗꯝ ꯑꯗꯨꯒꯥ ꯆꯥꯡꯗꯝꯅꯕꯗꯥ ꯄꯣꯄꯣꯚꯔꯒꯤ ꯑꯣꯐꯁꯦꯠ꯫ ꯅꯍꯥꯛꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤꯒꯨꯝꯅꯥ ꯀꯣꯃꯥ ꯇꯣꯉꯥꯟꯅꯥ ꯊꯝꯕꯥ ꯚꯦꯜꯌꯨꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯗꯥ ꯁ꯭ꯠꯔꯤꯡ ꯑꯃꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯏ:data-bs-offset="10,20"

ꯐꯉ꯭ꯀꯁꯟ ꯑꯃꯅꯥ ꯑꯣꯐꯁꯦꯠ ꯂꯦꯄꯊꯣꯛꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯃꯇꯃꯗꯥ, ꯃꯁꯤ ꯄꯣꯄꯔ ꯄ꯭ꯂꯦꯁꯃꯦꯟꯇ, ꯔꯦꯐꯥꯔꯦꯟꯁ, ꯑꯃꯁꯨꯡ ꯄꯣꯄꯔ ꯔꯦꯛꯇꯁꯤꯡ ꯑꯁꯤ ꯃꯁꯤꯒꯤ ꯑꯍꯥꯅꯕꯥ ꯑꯥꯔꯒꯨꯃꯦꯟꯇ ꯑꯣꯏꯅꯥ ꯌꯥꯑꯣꯕꯥ ꯑꯣꯕꯖꯦꯛꯇ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯀꯧꯏ꯫ ꯇ꯭ꯔꯤꯒꯔꯤꯡ ꯑꯦꯂꯤꯃꯦꯟꯇ DOM ꯅꯣꯗ ꯑꯁꯤ ꯑꯅꯤꯁꯨꯕꯥ ꯑꯥꯔꯒꯨꯃꯦꯟꯇ ꯑꯣꯏꯅꯥ ꯄꯥꯁ ꯇꯧꯏ꯫ ꯐꯉ꯭ꯀꯁꯟ ꯑꯗꯨꯅꯥ ꯅꯝꯕꯔ ꯑꯅꯤ ꯂꯩꯕꯥ ꯑꯦꯔꯦ ꯑꯃꯥ ꯔꯤꯇꯔꯟ ꯇꯧꯒꯗꯕꯅꯤ: .[skidding, distance]

ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯅꯒꯤꯗꯃꯛꯇꯥ ꯄꯣꯄꯔꯒꯤ ꯑꯣꯐꯁꯦꯠ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡ ꯌꯦꯡꯕꯤꯌꯨ .

popperConfig ꯅꯜ | ꯑꯣꯕꯖꯦꯛꯇ | ꯃꯊꯧ null

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯗꯤꯐꯣꯜꯇ ꯄꯣꯄꯔ ꯀꯅꯐꯤꯒ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ, ꯄꯣꯄꯔꯒꯤ ꯀꯅꯐꯤꯒꯔꯦꯁꯟ ꯌꯦꯡꯎ .

ꯐꯉ꯭ꯀꯁꯟ ꯑꯃꯥ ꯄꯣꯄꯔ ꯀꯅꯐꯤꯒꯔꯦꯁꯟ ꯁꯦꯝꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯃꯇꯃꯗꯥ, ꯃꯁꯤ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯗꯤꯐꯣꯜꯇ ꯄꯣꯄꯔ ꯀꯅꯐꯤꯒꯔꯦꯁꯟ ꯌꯥꯑꯣꯕꯥ ꯑꯣꯕꯖꯦꯛꯇ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯀꯧꯏ꯫ ꯃꯁꯤꯅꯥ ꯅꯍꯥꯀꯄꯨ ꯗꯤꯐꯣꯜꯇ ꯑꯗꯨ ꯅꯍꯥꯛꯀꯤ ꯏꯁꯥꯒꯤ ꯀꯅꯐꯤꯒꯔꯦꯁꯅꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯗꯥ ꯑꯃꯁꯨꯡ ꯃꯔꯤ ꯂꯩꯅꯍꯅꯕꯗꯥ ꯃꯇꯦꯡ ꯄꯥꯡꯏ꯫ ꯐꯉ꯭ꯀꯁꯟ ꯑꯗꯨꯅꯥ ꯄꯣꯄꯔꯒꯤꯗꯃꯛ ꯀꯅꯐꯤꯒꯔꯦꯁꯟ ꯑꯣꯕꯖꯦꯛꯇ ꯑꯃꯥ ꯔꯤꯇꯔꯟ ꯇꯧꯒꯗꯕꯅꯤ꯫

ꯃꯤꯑꯣꯏ ꯑꯃꯒꯤ ꯄꯣꯄꯣꯚꯔꯁꯤꯡꯒꯤꯗꯃꯛ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ꯫

ꯃꯊꯛꯇꯥ ꯄꯅꯈ꯭ꯔꯤꯕꯥ ꯃꯇꯨꯡ ꯏꯟꯅꯥ, ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯃꯤꯑꯣꯏ ꯑꯃꯒꯤ ꯄꯣꯄꯣꯚꯔꯁꯤꯡꯒꯤ ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯑꯇꯣꯞꯄꯥ ꯃꯑꯣꯡ ꯑꯃꯗꯥ ꯂꯦꯄꯊꯣꯀꯄꯥ ꯌꯥꯏ꯫

ꯐꯉ꯭ꯀꯁꯟ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ꯫popperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

ꯑꯦꯁꯤꯅꯛꯔꯣꯅꯣꯁ ꯃꯦꯊꯗꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ꯫

ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯒꯤ ꯃꯦꯊꯗ ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤ ꯑꯦꯁꯤꯅꯛꯔꯣꯅꯣꯁ ꯑꯣꯏ ꯑꯃꯁꯨꯡ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯑꯃꯥ ꯍꯧꯏ . ꯃꯈꯣꯌꯅꯥ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯍꯧꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯑꯗꯨꯕꯨ ꯂꯣꯏꯗ꯭ꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯀꯣꯜ ꯇꯧꯔꯤꯕꯥ ꯃꯤꯑꯣꯏ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ . ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯇꯧꯔꯤꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯗꯥ ꯃꯦꯊꯗ ꯀꯣꯜ ꯑꯃꯥ ꯏꯒꯅꯣꯔ ꯇꯧꯒꯅꯤ .

ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯅꯒꯤꯗꯃꯛꯇꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯦꯁꯟ ꯌꯦꯡꯕꯤꯌꯨ .

ꯎꯠꯄ

ꯏꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯄꯣꯄꯣꯚꯔ ꯑꯗꯨ ꯐꯣꯡꯗꯣꯀꯏ꯫ ꯄꯣꯄꯣꯚꯔ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯎꯠꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ shown.bs.popoverꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯜ ꯇꯧꯔꯤꯕꯥ ꯃꯤꯑꯣꯏ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫ ꯃꯁꯤ ꯄꯣꯄꯊꯣꯀꯄꯒꯤ “ꯃꯦꯅꯨꯑꯦꯜ” ꯇ꯭ꯔꯤꯒꯔꯤꯡ ꯑꯃꯅꯤ ꯍꯥꯌꯅꯥ ꯂꯧꯅꯩ꯫ ꯇꯥꯏꯇꯦꯜ ꯑꯃꯁꯨꯡ ꯀꯟꯇꯦꯟꯇ ꯑꯅꯤꯃꯛ ꯖꯤꯔꯣ-ꯂꯦꯡꯗꯕꯥ ꯑꯣꯏꯕꯥ ꯄꯣꯄꯣꯚꯔꯁꯤꯡ ꯑꯁꯤ ꯀꯩꯗꯧꯉꯩꯗꯥ ꯎꯠꯂꯣꯏ꯫

myPopover.show()

ꯂꯣꯠꯄ

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯄꯣꯄꯣꯚꯔ ꯑꯃꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫ ꯄꯣꯄꯣꯚꯔ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ hidden.bs.popoverꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯜ ꯇꯧꯔꯤꯕꯥ ꯃꯤꯑꯣꯏ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫ ꯃꯁꯤ ꯄꯣꯄꯊꯣꯀꯄꯒꯤ “ꯃꯦꯅꯨꯑꯦꯜ” ꯇ꯭ꯔꯤꯒꯔꯤꯡ ꯑꯃꯅꯤ ꯍꯥꯌꯅꯥ ꯂꯧꯅꯩ꯫

myPopover.hide()

ꯇꯣꯒꯜ ꯇꯧꯕꯥ꯫

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯄꯣꯄꯣꯚꯔ ꯇꯣꯒꯜ ꯇꯧꯏ꯫ ꯄꯣꯄꯣꯚꯔ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯎꯠꯄꯥ ꯅꯠꯠꯔꯒꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ shown.bs.popoverꯅꯠꯠꯔꯒꯥ hidden.bs.popoverꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯜ ꯇꯧꯔꯤꯕꯥ ꯃꯤꯑꯣꯏ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫ ꯃꯁꯤ ꯄꯣꯄꯊꯣꯀꯄꯒꯤ “ꯃꯦꯅꯨꯑꯦꯜ” ꯇ꯭ꯔꯤꯒꯔꯤꯡ ꯑꯃꯅꯤ ꯍꯥꯌꯅꯥ ꯂꯧꯅꯩ꯫

myPopover.toggle()

ꯗꯤꯁꯄꯣꯖ ꯇꯧꯕꯥ꯫

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯄꯣꯄꯣꯚꯔ ꯂꯣꯠꯁꯤꯜꯂꯤ ꯑꯃꯁꯨꯡ ꯃꯥꯡꯍꯜꯂꯤ (DOM ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯁ꯭ꯇꯣꯔ ꯇꯧꯔꯕꯥ ꯗꯦꯇꯥ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯏ)꯫ ꯗꯦꯂꯤꯒꯦꯁꯟ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯄꯣꯄꯣꯚꯔꯁꯤꯡ ( ꯑꯣꯄꯁꯟ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯁꯦꯝꯕꯥselector ) ꯑꯁꯤ ꯗꯤꯁꯦꯟꯗꯦꯟꯇ ꯇ꯭ꯔꯤꯒꯔ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯃꯤꯑꯣꯏ ꯑꯃꯃꯃꯒꯤ ꯑꯣꯏꯅꯥ ꯃꯥꯡꯍꯅꯕꯥ ꯌꯥꯗꯦ꯫

myPopover.dispose()

ꯌꯥꯍꯟꯕ

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

myPopover.enable()

ꯌꯥꯍꯟꯗꯕ

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯄꯣꯄꯣꯚꯔ ꯑꯗꯨ ꯎꯠꯄꯒꯤ ꯇꯧꯕꯥ ꯉꯝꯕꯗꯨ ꯂꯧꯊꯣꯀꯏ꯫ ꯄꯣꯄꯣꯚꯔ ꯑꯁꯤ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯏꯅꯦꯕꯜ ꯇꯧꯔꯕꯈꯛꯇꯗꯥ ꯎꯠꯄꯥ ꯉꯃꯒꯅꯤ꯫

myPopover.disable()

toggleꯏꯅꯦꯕꯜ ꯇꯧꯔꯦ꯫

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

myPopover.toggleEnabled()

ꯍꯧꯖꯤꯛꯀꯤ ꯃꯇꯝꯒ ꯆꯨꯅꯍꯟꯕ

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯄꯣꯄꯣꯚꯔꯒꯤ ꯄꯣꯖꯤꯁꯟ ꯑꯗꯨ ꯑꯄꯗꯦꯠ ꯇꯧꯏ꯫

myPopover.update()

getInstance ꯍꯥꯌꯅꯥ ꯂꯧꯕꯥ ꯌꯥꯏ꯫

DOM ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯄꯣꯄꯣꯚꯔ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯗꯨ ꯐꯪꯍꯅꯕꯥ ꯉꯝꯕꯥ ꯁ꯭ꯇꯦꯇꯤꯛ ꯃꯦꯊꯗ꯫

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance ꯍꯥꯌꯅꯥ ꯂꯧꯕꯥ ꯌꯥꯏ꯫

DOM ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯄꯣꯄꯣꯚꯔ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯗꯨ ꯐꯪꯍꯅꯕꯥ ꯉꯝꯕꯥ ꯁ꯭ꯇꯦꯇꯤꯛ ꯃꯦꯊꯗ, ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯗꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯅꯧꯕꯥ ꯑꯃꯥ ꯁꯦꯝꯕꯥ ꯌꯥꯍꯜꯂꯤ꯫

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

ꯊꯧꯔꯃꯁꯤꯡ꯫

ꯏꯚꯦꯟꯇ ꯃꯈꯜ꯫ ꯋꯥꯔꯣꯜ
ꯁꯣ.ꯕꯤ.ꯑꯦꯁ.ꯄꯣꯄꯣꯚꯔ ꯇꯧꯕꯥ꯫ showꯏꯟꯁꯇꯦꯟꯁ ꯃꯦꯊꯗ ꯀꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
ꯎꯠꯂꯤ.ꯕꯤ.ꯑꯦꯁ.ꯄꯣꯄꯣꯚꯔ꯫ ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯄꯣꯄꯑꯣꯚꯔ ꯑꯗꯨ ꯌꯨꯖꯔꯅꯥ ꯎꯕꯥ ꯐꯪꯍꯅꯕꯥ ꯃꯇꯃꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ (CSS ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯂꯣꯌꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯉꯥꯏꯒꯅꯤ)꯫
ꯂꯣꯠꯁꯤꯜꯂꯨ꯫ꯕꯤ.ꯑꯦꯁ.ꯄꯣꯄꯣꯚꯔ꯫ hideꯏꯟꯁꯇꯦꯟꯁ ꯃꯦꯊꯗ ꯀꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
ꯂꯣꯠꯁꯤꯜꯂꯕꯥ.ꯕꯤ.ꯑꯦꯁ.ꯄꯣꯄꯣꯚꯔ꯫ ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯄꯣꯄꯑꯣꯚꯔ ꯑꯗꯨ ꯌꯨꯖꯔꯗꯒꯤ ꯂꯣꯠꯁꯤꯅꯕꯥ ꯂꯣꯌꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ (CSS ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯂꯣꯌꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯉꯥꯏꯒꯅꯤ)꯫
ꯏꯅꯁꯥꯔꯠ ꯇꯧꯈꯤ꯫ꯕꯤ.ꯑꯦꯁ.ꯄꯣꯄꯣꯚꯔ ꯇꯧꯕꯥ꯫ show.bs.popoverꯊꯧꯔꯝ ꯑꯁꯤ ꯄꯣꯄꯣꯚꯔ ꯇꯦꯃꯞꯂꯦꯠ ꯑꯗꯨ ꯗꯤ.ꯑꯣ.ꯑꯦꯝ.ꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯕꯥ ꯃꯇꯃꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})