Bootstrap 4 Toasts Component Manager - jQuery Toast

Bootstrap 4 Toasts Component Manager - jQuery Toast
File Size: 12.3 KB
Views Total: 14238
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

The jQuery Toast plugin makes it easier to create customizable toast- and snackbar-style temporary alert messages on the webpage using Bootstrap 4 toasts component.

The plugin gives you the ability to quickly and dynamically create Bootstrap 4 based toasts and snackbars without writing any HTML codes.

Bootstrap 5 Version is now Available Here.

See also:

Install & Download:

# NPM
$ npm install bs4-toast --save

How to use it:

1. Insert the stylesheet toast.min.css and JavaScript toast.min.js into the Bootstrap 4 project.

<!-- CSS -->
<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link rel="stylesheet" href="/path/to/toast.min.css">

<!-- JavaScript -->
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/popper.min.js"></script>
<script src="/path/to/bootstrap.min.js" ></script>
<script src="/path/to/toast.min.js"></script>

2. Create a snackbar with the following parameters:

  • title: alert title
  • type: 'info', 'success', 'warning', 'error'
  • delay: auto dismiss after this timeout
$.snack(type, title, delay)

3. Create a toast notification with the following parameters:

  • title: alert title
  • subtitle: subtitle
  • content: alert message
  • type: 'info', 'success', 'warning', 'error'
  • delay: auto dismiss after this timeout
  • img: an object containging image information
  • pause_on_hover: pause on hover
  • id: unique ID
$.toast({
  title: 'Notice!',
  subtitle: '11 mins ago',
  content: 'This is a toast message.',
  type: 'info',
  delay: 3000,
  dismissible: true,
  img: {
    src: 'image.png',
    class: 'rounded',
    title: 'Thumbnail Title',
    alt: 'Alternative'
  }
});

4. Global settings.

$.toastDefaults = {

  // top-left, top-right, bottom-left, bottom-right, top-center, and bottom-center
  position: 'top-right',

  // is dismissable?
  dismissible: true,

  // is stackable?
  stackable: true,

  // pause delay on hover
  pauseDelayOnHover: true,

  // additional CSS Classes
  style: {
    toast: '',
    info: '',
    success: '',
    warning: '',
    error: '',
  }
  
};

5. Remove the toast notification from the DOM.

$(document).on('hidden.bs.toast', '.toast', function (e) {
  $(this).remove();
});

Changelog:

v1.2.0 (2020-11-26)

  • Allows the ability to add an ID
  • Removes babel

v1.1.0 (2020-06-27)

  • Added support for top-center and bottom-center.

v1.0.0 (2020-06-25)

  • Added globals for further customisation
  • Added the ability to modify toast styling
  • Refactored rendering code to make it cleaner
  • Added styles for positioning
  • and more...

2019-10-21

  • set toast-wrapper z-index to 1055 and updated minified css

v0.7.1 (2019-05-31)

  • Updated

v0.7.0 (2019-05-07)

  • Added Pause On Hover

v0.6.0 (2019-03-19)

  • Allow img in toast
  • Autoremove toast from DOM once hidden
  • Added NPM

2019-03-03

  • JS & CSS update

This awesome jQuery plugin is developed by Script47. For more Advanced Usages, please check the demo page or visit the official website.