Toast - A Bootstrap 5.0 jQuery plugin

• About
• Updates
• Usage
  • Live Example
• Contributing
  • Contributors

About

As of Bootstrap 4.2, toasts have been introduced and the aim of this plugin is to make them easier to use. (original)

Updates

As Bootstrap was updated to version 5.0(beta), the usage of the toast component changed. So, we fixed some code that was not compatible with Bootstrap 4 and added some new features.

• Bootstrap Core updated to 5.0(beta)
• Deleted incompatible codes and fixed
• jQuery updated to latest version
• Icon and more background colors are supported
• Minor code errors and mistakes fixed

Usage

Global Variables (or default values)

Modify the global variables to apply specific rules/styles to all your toasts.

// default option values
$.toastDefaults = {
    position: "top-right",
    dismissible: true,
    stackable: true, // stackable & pauseDelayOnHover options are incompatible
    pauseDelayOnHover: false,
    style: {
        // user custom style classname
        toast: "",
        info: "",
        success: "",
        warning: "",
        error: "",
        primary: "",
        secondary: "",
        light: "",
        dark: "",
    },
};

Initializing Global Variables

Option Name	Type	Description	Values
$.toastDefaults.position	String	Set toast & snack position from the container(or viewport).	'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left' (middle option currently not-supported)
$.toastDefaults.dismissible	Boolean	Enables toast & snack dismissible with dismiss button.	true | false
$.toastDefaults.stackable	Boolean	Enables toast & snack stackable. (not compatible with 'pauseDelayOnHover' option.)	true | false
$.toastDefaults.pauseDelayOnHover	Boolean	Enables toast & snack to stop auto-hide when hover mouse pointer on specific toast or snack. (not compatible with 'stackable' option.)	true | false

// plugin initializing function
$.toastInit = function (opts) {
    const { position, dismissible, stackable, pauseDelayOnHover } = opts;

    // set values
    $.toastDefaults.position = position ?? $.toastDefaults.position;
    $.toastDefaults.dismissible = dismissible ?? $.toastDefaults.dismissible;
    $.toastDefaults.stackable = stackable ?? $.toastDefaults.stackable;
    $.toastDefaults.pauseDelayOnHover = pauseDelayOnHover ?? $.toastDefaults.pauseDelayOnHover;

    // check incompatible variables
    if ($.toastDefaults.stackable) {
        $.toastDefaults.pauseDelayOnHover = false;
    } else {
        $.toastDefaults.pauseDelayOnHover = true;
    }
};

// initializing example in sample.html
$.toastInit({
    position: "bottom-center",
    dismissible: true,
    stackable: true, // stackable & pauseDelayOnHover options are incompatible
    pauseDelayOnHover: false,
});

---

Snack (customized toast)

$.snack = function (type, content, delay) {
    return render({
        type,
        content,
        delay,
    });
};

Note: The final argument delay is omittable (optional). If omitted, the toast will remain forever.

Toast

$.toast({
    type: type,
    title: title,
    subtitle: "11 mins ago",
    content: content,
    delay: 5000,
    icon: "fab fa-github", // font-awesome6 icon class
    img: {
        src: IMG_URL,
        alt: "Image",
    },
});

Note: The icon and img options are compatible but not recommended to use them together.

---

Live Example (from Netlify)

Live Demo

---

Contributing

Feel free to contribute in any of the ways outlined:

• Submit issues/pull requests
• Tell us how you're using this plugin in your project

@Script47/Toast

Contributors

Thanks to all contributors.

@yuiopna, @shd5632, @Phudal