Skip to content

[NEW] add toast notification function to JQuery

Elvis Ansima requested to merge ElvisAns/tiki:toast-notification-function into master
  • [NEW] add toast notification function to JQuery

Simple example $("body").toastNotification({body:"hello world"})

It's basically a wrapper function of https://getbootstrap.com/docs/5.3/components/toasts

Advanced Examples

// Example 1: Top-end position
$("body").toastNotification({
    body: "Hello, world!",
    title: "Welcome",
    position: "top-end",
    delay: "3000",
    autohide: true,
    classes: "bg-primary text-white",
    style: "font-size: 16px;",
    onClose: function() {
        console.log("Toast notification closed!");
        // Add your custom close logic here
    }
});

// Example 2: Top-start position
$("body").toastNotification({
    body: "Hello, world!",
    title: "Welcome",
    position: "top-start",
    delay: "3000",
    autohide: true,
    classes: "bg-primary text-white",
    style: "font-size: 16px;",
    onClose: function() {
        console.log("Toast notification closed!");
        // Add your custom close logic here
    }
});

// Example 3: Bottom-end position
$("body").toastNotification({
    body: "Hello, world!",
    title: "Welcome",
    position: "bottom-end",
    delay: "3000",
    autohide: true,
    classes: "bg-primary text-white",
    style: "font-size: 16px;",
    onClose: function() {
        console.log("Toast notification closed!");
        // Add your custom close logic here
    }
});

// Example 4: Bottom-start position
$("body").toastNotification({
    body: "Hello, world!",
    title: "Welcome",
    position: "bottom-start",
    delay: "3000",
    autohide: true,
    classes: "bg-primary text-white",
    style: "font-size: 16px;",
    onClose: function() {
        console.log("Toast notification closed!");
        // Add your custom close logic here
    }
});
Edited by Elvis Ansima

Merge request reports