Notifications

Notifications

The Notifications shortcode shows Bootstrap toast messages triggered by a click. Configure the message, type, position, and behavior with data-notify-* attributes and call the module from an onclick handler. Toasts are built and injected automatically, so you do not need to hand-write toast markup for the self-trigger mode.

Basic notification

Attach the attributes to any clickable element and invoke SEMICOLON.Modules.notifications(this) on click.

<a href="#" class="btn btn-info"
   data-notify-type="info"
   data-notify-msg="<i class='bi-info-circle-fill me-1'></i> Welcome to Canvas!"
   onclick="SEMICOLON.Modules.notifications(this); return false;">Show Info</a>

Key attributes

• data-notify-msg: the message HTML shown in the toast. Inline icons are fine.
• data-notify-type: primary, info, success, warning, error, or dark. Controls the color scheme.
• data-notify-position: top-left, top-center, top-right (default), middle-left, middle-center, middle-right, bottom-left, bottom-center, bottom-right.
• data-notify-timeout: auto-hide delay in milliseconds. Default 5000.
• data-notify-autohide: set to false to keep the toast until manually closed.
• data-notify-close: set to false to hide the close button.
• data-notify-trigger: self (default, plugin builds the toast) or custom (you supply an existing toast via data-notify-target).
• data-notify-target: for custom trigger, the selector of your own toast element.

Notification types

Each type maps to a Bootstrap background and matching text color.

<a href="#" class="btn btn-success me-2"
   data-notify-type="success"
   data-notify-msg="<i class='bi-check-circle-fill me-1'></i> Message Sent Successfully!"
   onclick="SEMICOLON.Modules.notifications(this); return false;">Show Success</a>

<a href="#" class="btn btn-danger me-2"
   data-notify-type="error"
   data-notify-msg="<i class='bi-x-circle-fill me-1'></i> Incorrect Input. Please Try Again!"
   onclick="SEMICOLON.Modules.notifications(this); return false;">Show Error</a>

<a href="#" class="btn btn-warning me-2"
   data-notify-type="warning"
   data-notify-msg="<i class='bi-exclamation-circle-fill me-1'></i> Please double-check your entry."
   onclick="SEMICOLON.Modules.notifications(this); return false;">Show Warning</a>

Positioning

<a href="#" class="btn btn-secondary"
   data-notify-position="bottom-center"
   data-notify-type="info"
   data-notify-msg="<i class='bi-info-circle-fill me-1'></i> Saved to your list."
   onclick="SEMICOLON.Modules.notifications(this); return false;">Bottom Center</a>

Custom target (your own toast markup)

Use data-notify-trigger="custom" and point data-notify-target at a Bootstrap toast you have already placed in the page.

<button type="button" class="btn btn-primary"
        data-notify-trigger="custom"
        data-notify-target="#liveToast"
        onclick="SEMICOLON.Modules.notifications(this); return false;">Show Notification</button>

<div class="position-fixed bottom-0 end-0 p-3 text-start" style="z-index: 699;">
    <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto">Hello!</strong>
            <small>11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">Hello, world! This is a Notification!</div>
    </div>
</div>

Tips

• The info and warning types use dark text, so the plugin automatically skips the white close-button styling for them.
• Only one self-triggered toast shows at a time: opening a new one hides any existing toasts first.
• Set data-notify-autohide="false" for messages users must dismiss themselves (for example a critical error).
• Include an icon inside data-notify-msg (like bi-check-circle-fill) for clearer, friendlier notifications.