ꯄꯣꯄꯣꯚꯔꯁꯤꯡ꯫

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

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

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

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

ꯈꯨꯗꯃꯁꯤꯡ꯫

ꯄꯣꯄꯣꯚꯔꯁꯤꯡ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯥ꯫

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

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

ꯂꯥꯏꯚ ꯗꯦꯃꯣ꯫

ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯂꯥꯏꯕ ꯄꯣꯄꯑꯣꯚꯔ ꯑꯁꯤ ꯔꯦꯟꯗꯔ ꯇꯧꯅꯕꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯃꯊꯛꯇꯥ ꯄꯅꯈ꯭ꯔꯤꯕꯥ ꯁ꯭ꯅꯤꯄꯦꯠ ꯑꯁꯤꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯇꯥꯏꯇꯂꯁꯤꯡ ꯑꯁꯤ ꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁꯦꯠ ꯇꯧꯏ data-bs-titleꯑꯃꯁꯨꯡ ꯕꯣꯗꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯁꯤ data-bs-content.

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

ꯃꯥꯏꯀꯩ ꯃꯔꯤ꯫

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

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

ꯆꯠꯅꯕꯤcontainer

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

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

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

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

ꯀꯁ꯭ꯇꯝ ꯄꯣꯄꯑꯣꯚꯔꯁꯤꯡ꯫

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

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

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

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

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

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

const popover = new bootstrap.Popover('.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. CSS ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯤ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯑꯁꯤ ꯁꯥꯁꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁꯦꯠ ꯇꯧꯏ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯁꯥꯁ ꯀꯁ꯭ꯇꯃꯔꯥꯏꯖꯦꯁꯟ ꯑꯁꯤ ꯍꯧꯖꯤꯀꯁꯨ ꯁꯄꯣꯔꯠ ꯇꯧꯔꯤ, ꯃꯁꯤꯁꯨ꯫

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

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

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$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;

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

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

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

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯕꯅꯥ, ꯅꯍꯥꯛꯅꯥ ꯑꯣꯄꯁꯅꯒꯤ ꯃꯃꯤꯡ ꯑꯃꯥ 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 popover = new bootstrap.Popover(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

ꯊꯧꯔꯃꯁꯤꯡ꯫

const myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
  // do something...
})