in English

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ꯫

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

ꯄꯦꯖ ꯑꯁꯤꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫

ꯃꯤꯑꯣꯏ ꯑꯃꯃꯃꯒꯤ ꯑꯣꯏꯅꯥ ꯅꯠꯠꯔꯒꯥ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯕꯥ꯫

ꯄ꯭ꯂꯒꯏꯅꯁꯤꯡ ꯑꯁꯤ ꯃꯤꯑꯣꯏ ꯑꯃꯃꯃꯒꯤ ꯑꯣꯏꯅꯥ ꯌꯥꯑꯣꯍꯅꯕꯥ ꯌꯥꯏ (ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯃꯤꯑꯣꯏ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ js/dist/*.js), ꯅꯠꯠꯔꯒꯥ ꯄꯨꯝꯅꯃꯛ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ bootstrap.jsꯅꯠꯠꯔꯒꯥ ꯃꯤꯅꯤꯐꯥꯏ ꯇꯧꯔꯕꯥ bootstrap.min.js(ꯑꯅꯤꯃꯛ ꯌꯥꯑꯣꯔꯣꯏꯗꯕꯅꯤ)꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯕꯟꯗꯂꯔ ꯑꯃꯥ (ꯋꯦꯕꯄꯦꯛ, ꯄꯥꯔꯁꯦꯜ, ꯚꯤꯠ...) ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ, ꯅꯍꯥꯛꯅꯥ /js/dist/*.jsUMD ꯁꯦꯝ ꯁꯥꯕꯥ ꯐꯥꯏꯂꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯒꯅꯤ꯫

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯐ꯭ꯔꯦꯃꯋꯥꯔꯀꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

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

ꯐ꯭ꯔꯦꯃꯋꯥꯔꯛ ꯃꯈꯜ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯃꯤꯑꯣꯏꯁꯤꯡꯒꯤꯗꯃꯛ ꯍꯦꯟꯅꯥ ꯐꯕꯥ ꯑꯂꯇꯔꯅꯦꯇꯤꯕ ꯑꯃꯗꯤ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯃꯍꯨꯠꯇꯥ ꯐ꯭ꯔꯦꯃꯋꯥꯔꯛ-ꯁ꯭ꯄꯦꯁꯤꯐꯤꯛ ꯄꯦꯀꯦꯖ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯕꯅꯤ꯫ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯃꯃꯤꯡ ꯆꯠꯄꯥ ꯑꯣꯄꯁꯟ ꯈꯔꯗꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ:

ꯔꯤꯑꯦꯛꯇ ꯇꯧꯕꯥ: ꯔꯤꯑꯦꯛꯇ ꯇꯧꯕꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ꯫
Vue: BootstrapVue (ꯍꯧꯖꯤꯛꯀꯤ ꯑꯣꯏꯅꯥ Vue 2 ꯑꯃꯁꯨꯡ Bootstrap 4 ꯈꯛꯇꯃꯛ ꯁꯄꯣꯔꯠ ꯇꯧꯏ)
ꯑꯦꯉ꯭ꯒꯨꯂꯥꯔ: ꯑꯦꯟ.ꯖꯤ.-ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ꯫

ꯃꯣꯗ꯭ꯌꯨꯜ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

ꯃꯁꯥꯅꯥ ꯍꯣꯠꯅꯖꯧ! twbs/examples ꯔꯤꯄꯣꯖꯤꯇꯔꯤꯗꯒꯤ Bootstrap ꯑꯁꯤ ES ꯃꯣꯗ꯭ꯌꯨꯜ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯒꯤꯗꯃꯛ ꯁꯣꯔꯁ ꯀꯣꯗ ꯑꯃꯁꯨꯡ ꯋꯥꯔꯀꯤꯡ ꯗꯦꯃꯣ ꯗꯥꯎꯅꯂꯣꯗ ꯇꯧꯕꯤꯌꯨ . ꯈꯨꯗꯝ ꯑꯁꯤ StackBlitz .

ESMꯑꯩꯈꯣꯌꯅꯥ ( bootstrap.esm.jsꯑꯃꯁꯨꯡ ) ꯑꯣꯏꯅꯥ ꯁꯦꯃꯒꯠꯄꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯚꯔꯖꯟ ꯑꯃꯥ ꯄꯤꯔꯤ bootstrap.esm.min.jsꯃꯗꯨꯅꯥ ꯅꯍꯥꯀꯄꯨ ꯕ꯭ꯔꯥꯎꯖꯔꯗꯥ ꯃꯣꯗ꯭ꯌꯨꯜ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯍꯜꯂꯤ, ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯄꯥꯟꯗꯝ ꯊꯝꯂꯤꯕꯥ ꯕ꯭ꯔꯥꯎꯖꯔꯁꯤꯡꯅꯥ ꯃꯁꯤꯕꯨ ꯁꯄꯣꯔꯠ ꯇꯧꯔꯕꯗꯤ .

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

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

import * as Popper from "@popperjs/core"

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯁꯤ ꯂꯩꯔꯤꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯍꯣꯠꯅꯔꯕꯗꯤ, ꯅꯍꯥꯛꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤꯒꯨꯝꯕꯥ ꯑꯁꯣꯌꯕꯥ ꯑꯃꯥ ꯀꯟꯁꯣꯂꯗꯥ ꯎꯕꯥ ꯐꯪꯒꯅꯤ:

Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relative references must start with either "/", "./", or "../".

ꯃꯁꯤ ꯐꯤꯛꯁ ꯇꯧꯅꯕꯥ, ꯅꯍꯥꯛꯅꯥ importmapꯄꯥꯊꯁꯤꯡ ꯃꯄꯨꯡ ꯐꯥꯍꯟꯅꯕꯥ ꯑꯔꯕꯤꯠꯔꯦꯔꯤ ꯃꯣꯗ꯭ꯌꯨꯂꯒꯤ ꯃꯃꯤꯡꯁꯤꯡ ꯔꯤꯖꯣꯂꯕ ꯇꯧꯅꯕꯥ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯒꯅꯤ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯄꯥꯟꯗꯝ ꯊꯝꯂꯤꯕꯥ ꯕ꯭ꯔꯥꯎꯖꯔꯁꯤꯡꯅꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯗ꯭ꯔꯕꯗꯤ importmap, ꯅꯍꯥꯛꯅꯥ es-module-shims ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯃꯁꯤꯅꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯑꯃꯁꯨꯡ ꯄꯣꯄꯔꯒꯤꯗꯃꯛꯇꯥ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <title>Hello, modularity!</title>
  </head>
  <body>
    <h1>Hello, modularity!</h1>
    <button id="popoverButton" type="button" class="btn btn-primary btn-lg" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>

    <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script>
    <script type="importmap">
    {
      "imports": {
        "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
        "bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.min.js"
      }
    }
    </script>
    <script type="module">
      import * as bootstrap from 'bootstrap'

      new bootstrap.Popover(document.getElementById('popoverButton'))
    </script>
  </body>
</html>

ꯗꯤꯄꯦꯟꯗꯦꯟꯁꯁꯤꯡ꯫

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

ꯑꯩꯈꯣꯌꯒꯤ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡ, ꯄꯣꯄꯣꯚꯔꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯑꯁꯤꯁꯨ ꯄꯣꯄꯔ .

ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ꯫

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

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

ꯈꯅꯒꯠꯂꯕꯥ ꯃꯤꯑꯣꯏꯁꯤꯡ꯫

ꯑꯩꯈꯣꯌꯅꯥ ꯅꯦꯇꯤꯕ querySelectorꯑꯃꯁꯨꯡ querySelectorAllꯃꯦꯊꯗꯁꯤꯡ ꯑꯁꯤ ꯄꯔꯐꯣꯃꯦꯟꯁꯀꯤ ꯃꯔꯃꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ DOM ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯀ꯭ꯕꯦꯔꯤ ꯇꯧꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯩ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯑꯗꯣꯝꯅꯥ ꯆꯠꯅꯕꯥ ꯌꯥꯕꯥ ꯁꯦꯂꯦꯛꯇꯔꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯒꯗꯕꯅꯤ . ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ,ꯒꯨꯝꯕꯥ ꯑꯈꯟꯅꯕꯥ ꯁꯦꯂꯦꯛꯇꯔꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ collapse:Example, ꯃꯈꯣꯌꯗꯒꯤ ꯁꯣꯏꯗꯅꯥ ꯂꯥꯄꯊꯣꯀꯎ꯫

ꯊꯧꯔꯃꯁꯤꯡ꯫

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤꯅꯥ ꯑꯌꯥꯝꯕꯥ ꯄ꯭ꯂꯒꯏꯅꯁꯤꯡꯒꯤ ꯑꯈꯟꯅꯕꯥ ꯑꯦꯛꯁꯅꯁꯤꯡꯒꯤꯗꯃꯛ ꯀꯁ꯭ꯇꯝ ꯏꯚꯦꯟꯇꯁꯤꯡ ꯄꯤꯔꯤ꯫ ꯃꯍꯧꯁꯥꯅꯥ, ꯍꯥꯌꯔꯤꯕꯁꯤꯡ ꯑꯁꯤ ꯏꯅꯐꯤꯅꯤꯇꯤꯕ ꯑꯃꯁꯨꯡ ꯄꯥꯁ꯭ꯠ ꯄꯥꯔꯇꯤꯁꯤꯄꯦꯜ ꯃꯑꯣꯡ ꯑꯃꯗꯥ ꯂꯥꯀꯏ - ꯃꯐꯝ ꯑꯗꯨꯗꯥ ꯏꯅꯐꯤꯅꯤꯇꯤꯕ (ex. show) ꯑꯁꯤ ꯊꯧꯗꯣꯛ ꯑꯃꯥ ꯍꯧꯕꯗꯥ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯏ, ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯤ ꯄꯥꯁ꯭ꯠ ꯄꯥꯔꯇꯤꯁꯤꯄꯦꯜ ꯃꯑꯣꯡ (ex. shown) ꯑꯁꯤ ꯑꯦꯛꯁꯟ ꯑꯃꯥ ꯂꯣꯏꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯏ꯫

ꯏꯅꯐꯤꯅꯤꯇꯤꯕ ꯏꯚꯦꯟꯇ ꯄꯨꯝꯅꯃꯛꯅꯥ preventDefault()ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯄꯤꯔꯤ꯫ ꯃꯁꯤꯅꯥ ꯑꯦꯛꯁꯟ ꯑꯃꯥ ꯍꯧꯗ꯭ꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯑꯦꯛꯁꯦꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯊꯤꯡꯕꯒꯤ ꯇꯧꯕꯥ ꯉꯝꯕꯗꯨ ꯄꯤ꯫ ꯏꯚꯦꯟꯇ ꯍꯦꯟꯗꯂꯔ ꯑꯃꯗꯒꯤ ꯑꯔꯥꯅꯕꯥ ꯔꯤꯇꯔꯟ ꯇꯧꯕꯅꯥ ꯃꯁꯥ ꯃꯊꯟꯇꯥ ꯀꯜ ꯇꯧꯕꯁꯨ ꯌꯥꯏ preventDefault().

const myModal = document.querySelector('#myModal')

myModal.addEventListener('show.bs.modal', event => {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

ꯄ꯭ꯔꯣꯒ꯭ꯔꯥꯃꯦꯇꯤꯛ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ

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

const myModalEl = document.querySelector('#myModal')

const modal = new bootstrap.Modal(myModalEl) // initialized with defaults

const configObject = { keyboard: false }
const modal1 = new bootstrap.Modal(myModalEl, configObject) // initialized with no keyboard

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯑꯀꯛꯅꯕꯥ ꯄ꯭ꯂꯒꯏꯟ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯃꯥ ꯐꯪꯅꯤꯡꯂꯕꯗꯤ, ꯄ꯭ꯂꯒꯏꯟ ꯈꯨꯗꯤꯡꯃꯛꯅꯥ getInstanceꯃꯦꯊꯗ ꯑꯃꯥ ꯑꯦꯛꯁꯄꯣꯖ ꯇꯧꯏ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯒꯤ ꯍꯀꯊꯦꯡꯅꯅꯥ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯃꯥ ꯂꯧꯊꯣꯛꯅꯕꯥ:

bootstrap.Popover.getInstance(myPopoverEl)

nullꯀꯔꯤꯒꯨꯝꯕꯥ ꯔꯤꯛꯕꯦꯁ꯭ꯠ ꯇꯧꯔꯤꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯃꯊꯛꯇꯥ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯃꯥ ꯍꯧꯗꯣꯛꯠꯔꯕꯗꯤ ꯃꯦꯊꯗ ꯑꯁꯤ ꯍꯜꯂꯛꯀꯅꯤ꯫

ꯅꯠꯠꯔꯒꯥ, getOrCreateInstanceDOM ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯗꯨ ꯐꯪꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ, ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯈꯤꯗꯕꯥ ꯑꯣꯏꯔꯕꯗꯤ ꯑꯅꯧꯕꯥ ꯑꯃꯥ ꯁꯦꯝꯕꯥ ꯌꯥꯏ꯫

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

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

ꯀꯟꯁꯠꯔꯛꯇꯔꯁꯤꯡꯗꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯁꯦꯂꯦꯛꯇꯔꯁꯤꯡ꯫

getInstanceꯑꯃꯁꯨꯡ ꯃꯦꯊꯗꯁꯤꯡꯒꯤ ꯃꯊꯛꯇꯥ getOrCreateInstance, ꯄ꯭ꯂꯒꯏꯟ ꯀꯟꯁꯠꯔꯛꯁꯟ ꯄꯨꯝꯅꯃꯛꯅꯥ DOM ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯅꯠꯠꯔꯒꯥ ꯆꯠꯅꯕꯥ ꯌꯥꯕꯥ CSS ꯁꯦꯂꯦꯛꯇꯔ ꯑꯃꯥ ꯑꯍꯥꯅꯕꯥ ꯑꯥꯔꯒꯨꯃꯦꯟꯇ ꯑꯣꯏꯅꯥ ꯌꯥꯕꯥ ꯌꯥꯏ꯫ querySelectorꯑꯩꯈꯣꯌꯒꯤ ꯄ꯭ꯂꯒꯏꯅꯁꯤꯡꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯈꯛꯇꯃꯛ ꯁꯄꯣꯔꯠ ꯇꯧꯕꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯄ꯭ꯂꯒꯏꯟ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯃꯦꯊꯗ ꯑꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯐꯪꯏ꯫

const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
const offcanvas = bootstrap.Offcanvas.getInstance('#myOffcanvas')
const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')

ꯑꯦꯁꯤꯅꯛꯔꯣꯅꯣꯁ ꯐꯉ꯭ꯀꯁꯅꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ꯫

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

const myCollapseEl = document.querySelector('#myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', event => {
  // Action to execute once the collapsible area is expanded
})

ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯇꯧꯔꯤꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯗꯥ ꯃꯦꯊꯗ ꯀꯣꯜ ꯑꯃꯥ ꯏꯒꯅꯣꯔ ꯇꯧꯒꯅꯤ .

const myCarouselEl = document.querySelector('#myCarousel')
const carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', event => {
  carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
carousel.to('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

`dispose`ꯊꯧꯑꯪꯡ

disposeꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯈꯨꯗꯛꯇꯥ ꯃꯦꯊꯗ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯕꯅꯥ ꯑꯆꯨꯝꯕꯥ ꯑꯣꯏꯅꯥ ꯎꯕꯥ ꯐꯪꯂꯕꯁꯨ hide(), ꯃꯁꯤꯅꯥ ꯑꯔꯥꯅꯕꯥ ꯐꯂꯁꯤꯡ ꯄꯨꯔꯛꯀꯅꯤ꯫ ꯄ꯭ꯔꯣꯕ꯭ꯂꯦꯝ ꯁꯤꯖꯤꯟꯅꯕꯒꯤ ꯈꯨꯗꯝ ꯑꯃꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ:

const myModal = document.querySelector('#myModal')
myModal.hide() // it is asynchronous

myModal.addEventListener('shown.bs.hidden', event => {
  myModal.dispose()
})

ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯕꯥ ꯁꯦꯇꯤꯡꯁꯤꯡ꯫

Constructor.Defaultꯄ꯭ꯂꯒꯏꯟ ꯑꯃꯒꯤ ꯑꯣꯕꯖꯦꯛꯇ ꯑꯗꯨ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯗꯨꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯄ꯭ꯂꯒꯏꯟ ꯑꯃꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯁꯦꯇꯤꯡꯁꯤꯡ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯌꯥꯏ :

// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false

ꯄꯥꯝꯕꯩꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯒꯨꯅꯁꯤꯡ꯫

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

ꯊꯧꯑꯪꯡ	ꯋꯥꯔꯣꯜ
`dispose`	ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯃꯣꯗꯜ ꯑꯃꯥ ꯃꯥꯡꯍꯜꯂꯤ꯫ (ꯗꯤ.ꯑꯣ.ꯑꯦꯝ.ꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇꯇꯥ ꯊꯝꯂꯤꯕꯥ ꯗꯦꯇꯥ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯏ)
`getInstance`	DOM ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯃꯣꯗꯦꯜ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯗꯨ ꯐꯪꯍꯅꯕꯥ ꯉꯝꯕꯥ ꯁ꯭ꯇꯦꯇꯤꯛ ꯃꯦꯊꯗ꯫
`getOrCreateInstance`	DOM ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯃꯣꯗꯜ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯗꯨ ꯐꯪꯍꯅꯕꯥ ꯉꯝꯕꯥ ꯁ꯭ꯇꯦꯇꯤꯛ ꯃꯦꯊꯗ, ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯗꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯅꯧꯕꯥ ꯑꯃꯥ ꯁꯦꯝꯕꯥ ꯌꯥꯍꯜꯂꯤ꯫

ꯁ꯭ꯇꯦꯇꯤꯛ ꯑꯣꯏꯕꯥ ꯄ꯭ꯔꯣꯄꯔꯇꯤ꯫	ꯋꯥꯔꯣꯜ
`NAME`	ꯄ꯭ꯂꯒꯏꯅꯒꯤ ꯃꯃꯤꯡ ꯑꯗꯨ ꯔꯤꯇꯔꯟ ꯇꯧꯏ꯫ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ : `bootstrap.Tooltip.NAME`)
`VERSION`	ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯄ꯭ꯂꯒꯏꯟ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯚꯔꯖꯟ ꯑꯁꯤ `VERSION`ꯄ꯭ꯂꯒꯏꯅꯒꯤ ꯀꯟꯁꯠꯔꯛꯇꯔꯒꯤ ꯄ꯭ꯔꯣꯄꯔꯇꯤꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯑꯦꯛꯁꯦꯁ ꯇꯧꯕꯥ ꯌꯥꯏ (ꯈꯨꯗꯝ: `bootstrap.Tooltip.VERSION`)

ꯁꯦꯅꯤꯇꯥꯏꯖꯔ ꯇꯧꯕꯥ꯫

ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯄꯣꯄꯣꯚꯔꯁꯤꯡꯅꯥ HTML ꯌꯥꯕꯥ ꯑꯣꯄꯁꯅꯁꯤꯡ ꯁꯦꯅꯤꯇꯥꯏꯖ ꯇꯧꯅꯕꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯕꯤꯜꯇ-ꯏꯟ ꯁꯦꯅꯤꯇꯥꯏꯖꯔ ꯁꯤꯖꯤꯟꯅꯩ꯫

ꯗꯤꯐꯣꯜꯇ allowListꯚꯦꯜꯌꯨ ꯑꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ:

const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
const DefaultAllowlist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'srcset', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯗꯤꯐꯣꯜꯇ ꯑꯁꯤꯗꯥ ꯑꯅꯧꯕꯥ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯄꯥꯝꯂꯕꯗꯤ allowListꯅꯍꯥꯛꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤ ꯇꯧꯕꯥ ꯌꯥꯏ:

const myDefaultAllowList = bootstrap.Tooltip.Default.allowList

// To allow table elements
myDefaultAllowList.table = []

// To allow td elements and data-bs-option attributes on td elements
myDefaultAllowList.td = ['data-bs-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
const myCustomRegex = /^data-my-app-[\w-]+/
myDefaultAllowList['*'].push(myCustomRegex)

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯁꯦꯅꯤꯇꯥꯏꯖꯔ ꯑꯁꯤ ꯕꯥꯏꯄꯥꯁ ꯇꯧꯕꯥ ꯄꯥꯝꯂꯕꯗꯤ ꯅꯍꯥꯛꯅꯥ ꯀꯠꯊꯣꯛꯂꯕꯥ ꯂꯥꯏꯕ꯭ꯔꯦꯔꯤ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯄꯥꯝꯂꯕꯗꯤ, ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ DOMPurify , ꯅꯍꯥꯛꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤ ꯇꯧꯒꯗꯕꯅꯤ:

const yourTooltipEl = document.querySelector('#yourTooltip')
const tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn(content) {
    return DOMPurify.sanitize(content)
  }
})

ꯑꯣꯄꯁꯅꯦꯜ ꯑꯣꯏꯅꯥ jQuery ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ꯫

Bootstrap 5 ꯗꯥ ꯅꯍꯥꯛꯅꯥ jQuery ꯃꯊꯧ ꯇꯥꯗꯦ , ꯑꯗꯨꯕꯨ jQueryꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯑꯁꯤ ꯍꯧꯖꯤꯀꯁꯨ ꯑꯣꯏꯊꯣꯀꯄꯥ ꯌꯥꯏ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯅꯥ ꯑꯣꯕꯖꯦꯛꯇ jQueryꯑꯗꯨꯗꯥ ꯈꯉꯗꯣꯛꯂꯕꯗꯤ window, ꯃꯁꯤꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯄꯨꯝꯅꯃꯛ jQueryꯒꯤ ꯄ꯭ꯂꯒꯏꯟ ꯁꯤꯁ꯭ꯇꯦꯃꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯒꯅꯤ꯫ ꯃꯁꯤꯅꯥ ꯅꯍꯥꯀꯄꯨ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯊꯕꯀꯁꯤꯡ ꯑꯁꯤ ꯇꯧꯕꯥ ꯌꯥꯍꯜꯂꯤ:

$('[data-bs-toggle="tooltip"]').tooltip() // to enable tooltips, with default configuration

$('[data-bs-toggle="tooltip"]').tooltip({ boundary: 'clippingParents', customClass: 'myClass' }) // to initialize tooltips with given configuration

$('#myTooltip').tooltip('show') // to trigger `show` method

ꯑꯩꯈꯣꯌꯒꯤ ꯑꯇꯣꯞꯄꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯇꯥꯡꯗꯁꯨ ꯃꯁꯤꯃꯛ ꯑꯣꯏꯔꯤ꯫

ꯀꯅꯐ꯭ꯂꯤꯛꯇ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ꯫

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

const bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯅꯥ ꯑꯣꯐꯤꯁꯤꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯄ꯭ꯔꯣꯇꯣꯇꯥꯏꯞ ꯅꯠꯠꯔꯒꯥ jQuery UIꯒꯨꯝꯕꯥ ꯊꯥꯔꯗ ꯄꯥꯔꯇꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯂꯥꯏꯕ꯭ꯔꯦꯔꯤꯁꯤꯡ ꯁꯄꯣꯔꯠ ꯇꯧꯗꯦ꯫ ꯊꯧꯗꯣꯀꯁꯤꯡ ꯂꯩꯔꯕꯁꯨ .noConflictꯑꯃꯁꯨꯡ ꯅꯦꯃꯁ꯭ꯄꯦꯁ ꯇꯧꯔꯕꯥ ꯊꯧꯗꯣꯀꯁꯤꯡ ꯂꯩꯔꯕꯁꯨ, ꯅꯍꯥꯛꯅꯥ ꯃꯁꯥꯅꯥ ꯁꯦꯃꯖꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯀꯝꯄꯦꯇꯤꯕꯤꯂꯤꯇꯤꯒꯤ ꯁꯃꯁ꯭ꯌꯥꯁꯤꯡ ꯂꯩꯕꯥ ꯌꯥꯏ꯫

jQuery ꯊꯧꯔꯃꯁꯤꯡ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯣꯕꯖꯦꯛꯇ ꯑꯗꯨꯗꯥ jQueryꯂꯩꯔꯕꯗꯤ ꯑꯃꯁꯨꯡ . ꯀꯔꯤꯒꯨꯝꯕꯥ jQuery ꯑꯁꯤ ꯐꯪꯂꯕꯗꯤ, Bootstrap ꯅꯥ jQueryꯒꯤ ꯏꯚꯦꯟꯇ ꯁꯤꯁ꯭ꯇꯦꯃꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯏꯚꯦꯟꯇꯁꯤꯡ ꯏꯃꯤꯠ ꯇꯧꯒꯅꯤ꯫ ꯑꯗꯨꯅꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ Bootstrap ꯒꯤ ꯊꯧꯗꯣꯀꯁꯤꯡ ꯇꯥꯕꯥ ꯄꯥꯝꯂꯕꯗꯤ , ꯅꯍꯥꯛꯅꯥ .windowdata-bs-no-jquery<body>.on.oneaddEventListener

$('#myTab a').on('shown.bs.tab', () => {
  // do something...
})

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯑꯁꯤ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯦ꯫

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯄ꯭ꯂꯒꯏꯅꯁꯤꯡꯅꯥ ꯑꯈꯟꯅꯕꯥ ꯐꯣꯂꯕꯦꯛ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯀꯦꯁ ꯑꯁꯤꯗꯥ ꯌꯨꯖꯔ ꯑꯦꯛꯁꯄꯤꯔꯤꯑꯦꯟꯁꯀꯤ ꯃꯇꯥꯡꯗꯥ ꯋꯥꯈꯜ ꯇꯥꯔꯕꯗꯤ, <noscript>ꯐꯤꯚꯝ ꯑꯗꯨ (ꯑꯃꯁꯨꯡ ꯃꯇꯧ ꯀꯔꯝꯅꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯏꯅꯦꯕꯜ ꯇꯧꯒꯗꯒꯦ) ꯑꯗꯨ ꯅꯍꯥꯛꯀꯤ ꯌꯨꯖꯔꯁꯤꯡꯗꯥ ꯁꯟꯗꯣꯛꯅꯥ ꯇꯥꯛꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯧ, ꯑꯃꯁꯨꯡ/ꯅꯠꯠꯔꯒꯥ ꯅꯍꯥꯛꯀꯤ ꯏꯁꯥꯒꯤ ꯀꯁ꯭ꯇꯝ ꯐꯣꯂꯕꯦꯀꯁꯤꯡ ꯍꯥꯄꯀꯗꯕꯅꯤ꯫