ꯇꯣꯁ꯭ꯇꯁꯤꯡ꯫

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

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

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

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

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯑꯁꯤ ꯁꯣꯔꯁꯇꯒꯤ ꯁꯦꯃꯒꯠꯂꯕꯗꯤ, ꯃꯁꯤꯗꯥutil.js .
ꯇꯣꯁ꯭ꯇꯁꯤꯡ ꯑꯁꯤ ꯄꯔꯐꯣꯃꯦꯟꯁꯀꯤ ꯃꯔꯃꯁꯤꯡꯅꯥ ꯑꯣꯄꯁꯟ-ꯏꯟ ꯇꯧꯏ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯈꯣꯌ ꯃꯁꯥꯅꯥ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯒꯗꯕꯅꯤ .
ꯆꯥꯅꯕꯤꯗꯨꯅꯥ ꯈꯉꯕꯤꯌꯨ ꯃꯗꯨꯗꯤ ꯇꯣꯁ꯭ꯇꯁꯤꯡ ꯄꯣꯖꯤꯁꯟ ꯇꯧꯕꯒꯤ ꯊꯧꯗꯥꯡ ꯑꯁꯤ ꯅꯍꯥꯛꯀꯤꯅꯤ꯫
ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ autohide: false.

ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯁꯤꯒꯤ ꯑꯦꯅꯤꯃꯦꯁꯟ ꯏꯐꯦꯛꯇ ꯑꯁꯤ prefers-reduced-motionꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯒꯤ ꯃꯈꯥ ꯄꯣꯜꯂꯤ꯫ ꯑꯩꯈꯣꯌꯒꯤ ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤ ꯗꯣꯀꯨꯃꯦꯟꯇꯦꯁꯅꯒꯤ ꯍꯟꯊꯔꯀꯄꯥ ꯃꯣꯁꯟ ꯁꯦꯛꯁꯟ ꯑꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ .

ꯈꯨꯗꯃꯁꯤꯡ꯫

ꯇꯉꯥꯏ ꯐꯗꯕ

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

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

ꯅꯨꯡꯉꯥꯏꯕꯥ ꯐꯣꯡꯗꯣꯀꯆꯔꯤ, ꯃꯥꯂꯦꯝ! ꯃꯁꯤ ꯇꯣꯁ꯭ꯠ ꯃꯦꯁꯦꯖ ꯑꯃꯅꯤ꯫

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

ꯍꯤꯡꯕ

.hide. _

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

ꯇ꯭ꯔꯥꯟꯁꯂꯨꯁꯦꯟꯇ ꯑꯣꯏꯕꯥ꯫

ꯇꯣꯁ꯭ꯇꯁꯤꯡ ꯑꯁꯤ ꯃꯈꯣꯌꯒꯤ ꯃꯈꯥꯗꯥ ꯂꯩꯕꯥ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯕ꯭ꯂꯦꯟꯗ ꯇꯧꯅꯕꯥ ꯈꯔꯥ ꯇ꯭ꯔꯥꯟꯁꯂꯨꯁꯦꯟꯇ ꯑꯣꯏ꯫

ꯅꯨꯡꯉꯥꯏꯕꯥ ꯐꯣꯡꯗꯣꯀꯆꯔꯤ, ꯃꯥꯂꯦꯝ! ꯃꯁꯤ ꯇꯣꯁ꯭ꯠ ꯃꯦꯁꯦꯖ ꯑꯃꯅꯤ꯫

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

ꯁ꯭ꯇꯦꯛ ꯇꯧꯕꯥ꯫

ꯅꯍꯥꯛꯅꯥ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯇꯣꯁ꯭ꯇꯁꯤꯡ ꯂꯩꯕꯥ ꯃꯇꯃꯗꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯃꯈꯣꯌꯕꯨ ꯔꯤꯗꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯚꯔꯇꯤꯀꯦꯜ ꯑꯣꯏꯅꯥ ꯁ꯭ꯇꯦꯛ ꯇꯧꯕꯗꯥ ꯗꯤꯐꯣꯜꯇ ꯇꯧꯏ꯫

ꯎꯕ? ꯃꯁꯤꯒꯨꯝꯅꯥ꯫

ꯍꯦꯗꯁ ꯑꯞ, ꯇꯣꯁ꯭ꯇꯁꯤꯡ ꯑꯁꯤ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯁ꯭ꯇꯦꯛ ꯇꯧꯒꯅꯤ꯫

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    See? Just like this.
  </div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

ꯄ꯭ꯂꯦꯁꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫

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

ꯅꯨꯡꯉꯥꯏꯕꯥ ꯐꯣꯡꯗꯣꯀꯆꯔꯤ, ꯃꯥꯂꯦꯝ! ꯃꯁꯤ ꯇꯣꯁ꯭ꯠ ꯃꯦꯁꯦꯖ ꯑꯃꯅꯤ꯫

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

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

ꯎꯕ? ꯃꯁꯤꯒꯨꯝꯅꯥ꯫

ꯍꯦꯗꯁ ꯑꯞ, ꯇꯣꯁ꯭ꯇꯁꯤꯡ ꯑꯁꯤ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯁ꯭ꯇꯦꯛ ꯇꯧꯒꯅꯤ꯫

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

ꯇꯣꯁ꯭ꯇꯁꯤꯡ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯃꯁꯨꯡ/ꯅꯠꯠꯔꯒꯥ ꯚꯔꯇꯤꯀꯦꯜ ꯑꯣꯏꯅꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯅꯕꯥ ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯐꯦꯟꯁꯤ ꯐꯪꯕꯁꯨ ꯌꯥꯏ꯫

ꯅꯨꯡꯉꯥꯏꯕꯥ ꯐꯣꯡꯗꯣꯀꯆꯔꯤ, ꯃꯥꯂꯦꯝ! ꯃꯁꯤ ꯇꯣꯁ꯭ꯠ ꯃꯦꯁꯦꯖ ꯑꯃꯅꯤ꯫

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤ ꯂꯩꯕꯥ꯫

ꯇꯣꯁ꯭ꯇꯁꯤꯡ ꯑꯁꯤ ꯅꯍꯥꯛꯀꯤ ꯚꯤꯖꯤꯇꯔꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯌꯨꯖꯔꯁꯤꯡꯗꯥ ꯑꯄꯤꯀꯄꯥ ꯏꯟꯇꯔꯞꯔꯤꯅꯔꯁꯤꯡ ꯑꯣꯏꯍꯟꯅꯕꯥ ꯄꯥꯟꯗꯝ ꯊꯝꯂꯤ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ ꯂꯩꯕꯥ ꯃꯤꯑꯣꯏꯁꯤꯡꯗꯥ ꯃꯇꯦꯡ ꯄꯥꯡꯅꯕꯥ, ꯅꯍꯥꯛꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯇꯣꯁ꯭ꯇꯁꯤꯡ ꯑꯗꯨ aria-liveꯔꯤꯖꯟ ꯑꯃꯗꯥ ꯂꯣꯠꯁꯤꯅꯒꯗꯕꯅꯤ . ꯂꯥꯏꯚ ꯔꯤꯖꯅꯁꯤꯡꯗꯥ ꯑꯍꯣꯡꯕꯥ ꯂꯥꯀꯄꯥ (ꯇꯣꯁ꯭ꯠ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯥ ꯏꯅꯖꯦꯛꯇ ꯇꯧꯕꯥ/ ꯑꯄꯗꯦꯠ ꯇꯧꯕꯒꯨꯝꯕꯥ) ꯑꯁꯤ ꯌꯨꯖꯔꯒꯤ ꯐꯣꯀꯁ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯄꯥ ꯅꯠꯠꯔꯒꯥ ꯑꯇꯣꯞꯄꯥ ꯃꯑꯣꯡ ꯑꯃꯗꯥ ꯌꯨꯖꯔ ꯑꯗꯨꯕꯨ ꯊꯤꯡꯖꯤꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯗꯅꯥ ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯁꯤꯡꯅꯥ ꯑꯣꯇꯣꯃꯦꯇꯦꯗ ꯑꯣꯏꯅꯥ ꯂꯥꯎꯊꯣꯀꯏ꯫ aria-atomic="true"ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯍꯣꯡꯗꯣꯀꯈꯤꯕꯥ ꯑꯗꯨ ꯈꯛꯇꯥ ꯂꯥꯎꯊꯣꯀꯄꯒꯤ ꯃꯍꯨꯠꯇꯥ, ꯇꯣꯁ꯭ꯠ ꯄꯨꯝꯅꯃꯛ ꯃꯇꯝ ꯄꯨꯝꯕꯗꯥ (ꯑꯦꯇꯣꯃꯤꯛ) ꯌꯨꯅꯤꯠ ꯑꯃꯈꯛꯇꯃꯛ ꯑꯣꯏꯅꯥ ꯂꯥꯎꯊꯣꯀꯄꯥ ꯉꯃꯍꯟꯅꯕꯥ ꯌꯥꯑꯣꯍꯅꯒꯗꯕꯅꯤ (ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯇꯣꯁ꯭ꯇꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯁꯔꯨꯛ ꯑꯃꯥ ꯈꯛꯇꯃꯛ ꯑꯄꯗꯦꯠ ꯇꯧꯔꯕꯗꯤ, ꯅꯠꯠꯔꯒꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯇꯣꯁ꯭ꯠ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯎꯠꯂꯕꯗꯤ ꯃꯁꯤꯅꯥ ꯁꯃꯁ꯭ꯌꯥ ꯊꯣꯀꯍꯅꯕꯥ ꯌꯥꯏ꯫ ꯃꯇꯃꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯂꯥꯀꯄꯥ ꯃꯇꯃꯗꯥ)꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯟ ꯑꯗꯨ ꯄ꯭ꯔꯣꯁꯦꯁ ꯑꯗꯨꯒꯤꯗꯃꯛꯇꯥ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯑꯣꯏꯔꯕꯗꯤ, ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯐꯣꯔꯝ ꯑꯃꯗꯥ ꯂꯩꯕꯥ ꯑꯁꯣꯌꯕꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯠ ꯑꯃꯒꯤꯗꯃꯛ, ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯑꯦꯂꯔꯠ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫ꯇꯣꯁ꯭ꯇꯀꯤ ꯃꯍꯨꯠꯇꯥ꯫

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

roleꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯑꯃꯁꯨꯡ aria-liveꯂꯦꯚꯦꯜ ꯑꯗꯨꯁꯨ ꯅꯍꯥꯛꯅꯥ ꯑꯦꯗꯞꯇꯦꯠ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯁꯤ ꯑꯁꯣꯌꯕꯥ ꯑꯃꯒꯨꯝꯕꯥ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯄꯥꯎꯖꯦꯜ ꯑꯃꯥ ꯑꯣꯏꯔꯕꯗꯤ, ꯁꯤꯖꯤꯟꯅꯧ role="alert" aria-live="assertive", ꯅꯠꯔꯕꯗꯤ role="status" aria-live="polite"ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫

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

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

ꯁꯤꯖꯤꯟꯅꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ autohide: false, ꯅꯍꯥꯛꯅꯥ ꯌꯨꯖꯔꯁꯤꯡꯅꯥ ꯇꯣꯁ꯭ꯠ ꯑꯗꯨ ꯊꯥꯗꯣꯀꯄꯥ ꯌꯥꯅꯕꯥ ꯀ꯭ꯂꯣꯖ ꯕꯇꯟ ꯑꯃꯥ ꯍꯥꯄꯀꯗꯕꯅꯤ꯫

ꯅꯨꯡꯉꯥꯏꯕꯥ ꯐꯣꯡꯗꯣꯀꯆꯔꯤ, ꯃꯥꯂꯦꯝ! ꯃꯁꯤ ꯇꯣꯁ꯭ꯠ ꯃꯦꯁꯦꯖ ꯑꯃꯅꯤ꯫

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

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

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯂꯃꯆꯠ-ꯁꯥꯖꯠ꯫

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

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

$('.toast').toast(option)

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯑꯣꯄꯁꯅꯒꯤ ꯃꯃꯤꯡ ꯑꯗꯨ data-, data-animation="".

ꯃꯤꯡ	ꯃꯈꯜ	ꯀꯥꯡꯂꯣꯟ ꯏꯟꯗꯕ	ꯋꯥꯔꯣꯜ
ꯑꯦꯅꯤꯃꯦꯁꯟ ꯇꯧꯕꯥ꯫	ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫	ꯑꯆꯨꯝꯕ	ꯇꯣꯁ꯭ꯠ ꯑꯗꯨꯗꯥ CSS ꯐꯦꯗ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯑꯃꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧ꯫
ꯑꯣꯇꯣꯍꯥꯏꯗ ꯇꯧꯕꯥ꯫	ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫	ꯑꯆꯨꯝꯕ	ꯑꯣꯇꯣ ꯂꯣꯗ ꯇꯧꯕꯥ ꯇꯣꯁ꯭ꯠ꯫
ꯊꯦꯡꯊꯕ	ꯃꯁꯤꯡ	`500`	ꯇꯣꯁ꯭ꯠ ꯂꯣꯠꯁꯤꯅꯕꯥ ꯊꯦꯡꯊꯕꯥ (ms)

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

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

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

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

`$().toast(options)`

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯀꯂꯦꯛꯁꯟ ꯑꯃꯗꯥ ꯇꯣꯁ꯭ꯠ ꯍꯦꯟꯗꯂꯔ ꯑꯃꯥ ꯑꯦꯇꯦꯆ ꯇꯧꯏ꯫

`.toast('show')`

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯇꯣꯁ꯭ꯠ ꯑꯗꯨ ꯐꯣꯡꯗꯣꯀꯏ꯫ ꯇꯣꯁ꯭ꯠ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯎꯠꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ shown.bs.toastꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯜ ꯇꯧꯔꯤꯕꯥ ꯃꯤꯑꯣꯏ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫ ꯅꯍꯥꯛꯅꯥ ꯃꯦꯊꯗ ꯑꯁꯤ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯀꯧꯒꯗꯕꯅꯤ, ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯅꯍꯥꯛꯀꯤ ꯇꯣꯁ꯭ꯠ ꯑꯗꯨ ꯎꯠꯂꯣꯏ꯫

$('#element').toast('show')

`.toast('hide')`

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯇꯣꯁ꯭ꯠ ꯑꯃꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫ ꯇꯣꯁ꯭ꯠ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ ꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯜ ꯇꯧꯔꯤꯕꯥ ꯃꯤꯑꯣꯏ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ hidden.bs.toastꯅꯍꯥꯛꯅꯥ autohide.false

$('#element').toast('hide')

`.toast('dispose')`

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯇꯣꯁ꯭ꯠ ꯑꯃꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫ ꯅꯍꯥꯛꯀꯤ ꯇꯣꯁ꯭ꯠ ꯑꯗꯨ ꯗꯤ.ꯑꯣ.ꯑꯦꯝ.ꯗꯥ ꯂꯩꯒꯅꯤ ꯑꯗꯨꯕꯨ ꯃꯈꯥ ꯇꯥꯅꯥ ꯎꯠꯂꯣꯏ꯫

$('#element').toast('dispose')

ꯊꯧꯔꯃꯁꯤꯡ꯫

ꯏꯚꯦꯟꯇ ꯃꯈꯜ꯫	ꯋꯥꯔꯣꯜ
ꯁꯣ.ꯕꯤ.ꯑꯦꯁ.ꯇꯣꯁ꯭ꯠ ꯇꯧꯕꯥ꯫	`show`ꯏꯟꯁꯇꯦꯟꯁ ꯃꯦꯊꯗ ꯀꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
ꯎꯠꯂꯤ.ꯕꯤ.ꯑꯦꯁ.ꯇꯣꯁ꯭ꯠ ꯇꯧꯕꯥ꯫	ꯊꯧꯔꯝ ꯑꯁꯤ ꯇꯣꯁ꯭ꯠ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯃꯤꯑꯣꯏ ꯑꯗꯨꯗꯥ ꯎꯕꯥ ꯐꯪꯍꯜꯂꯕꯥ ꯃꯇꯃꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
ꯂꯣꯠꯄꯥ.ꯕꯤ.ꯑꯦꯁ.ꯇꯣꯁ꯭ꯠ ꯇꯧꯕꯥ꯫	`hide`ꯏꯟꯁꯇꯦꯟꯁ ꯃꯦꯊꯗ ꯀꯧꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
ꯂꯣꯠꯁꯤꯜꯂꯕꯥ.ꯕꯤ.ꯑꯦꯁ.ꯇꯣꯁ꯭ꯠ ꯇꯧꯕꯥ꯫	ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯇꯣꯁ꯭ꯠ ꯑꯗꯨ ꯌꯨꯖꯔꯗꯒꯤ ꯂꯣꯠꯁꯤꯅꯕꯥ ꯂꯣꯌꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫

$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})