Create Responsive Toast Alerts with triggerToast.js

triggerToast is a lightweight jQuery toast notification plugin that displays brief, non-blocking, toast-style alert messages to the user. Perfect for status updates, form validation feedback, or simple confirmations.

The plugin handles success, info, warning, and error states out of the box, supports auto-dismiss, click-to-dismiss, and responsive widths via CSS breakpoints. You can position toasts globally (like top-right or center) or relative to a specific DOM element. Useful for form validation tooltips or inline feedback. 

See Also:

• 10 Best Toast Notification jQuery/JavaScript Plugins

How to use it:

1. Download the plugin and insert it after jQuery library as follows:

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jQuery triggerToast Plugin -->
<link rel="stylesheet" href="/path/to/triggerToast.css">
<script src="/path/to/triggerToast.js"></script>

2. Create notifications by calling the $.triggerToast() function with configuration options:

$.triggerToast({
  type: 'error',
  message: 'Connection failed. Please check your network.',
});

3. All possible configuration options:

• type (string): Alert type - 'success', 'info', 'warning', or 'error'
• message (string): The notification text content
• autoHide (boolean): Controls automatic dismissal (default: true)
• hideDelay (number): Milliseconds before auto-hide occurs (default: 3000)
• clickToHide (boolean): Allows click-to-dismiss functionality (default: true)
• position (string/object): Screen position ('top-right', 'top-left', 'bottom-right', 'bottom-left', 'center') or relative positioning object
• showCloseButton (boolean): Display close button (auto-enabled when autoHide is false)
• closeButtonHtml (string): Custom HTML for close button (default: '×')
• customClass (string): Additional CSS class for custom styling
• breakpoints (object): Screen width breakpoints with corresponding alert widths

$.triggerToast({
  type: 'info', // success, info, warning, error
  message: '', // REQUIRED
  autoHide: true,
  hideDelay: 3000,
  clickToHide: true,
  position: 'top-right', // top-right, top-left, bottom-right, bottom-left, center, or {relativeTo: selector, align: 'top|bottom|left|right'}
  showAnimation: { opacity: 1, translateY: 0 },
  hideAnimation: { opacity: 0, translateY: 20 },
  animationDuration: 300,
  showCloseButton: false, // show a close (X) button
  closeButtonHtml: '×', // custom HTML for the close button
  customClass: '', // custom class for the alert
  breakpoints: {
    sm: { max: 600, width: '100%' },
    md: { max: 900, width: '350px' },
    lg: { max: Infinity, width: '350px' }
  }, // breakpoints for width
});

FAQ

Q: Can I display multiple toasts simultaneously?
A: Yes, the plugin supports multiple concurrent notifications. Each toast maintains its own lifecycle, and the positioning system automatically stacks them appropriately based on the selected position.

Q: How do I customize the appearance beyond the built-in types?
A: Use the customClass option to add your own CSS class, then define custom styles in your stylesheet.

Q: What happens if the target element for relative positioning doesn't exist?
A: The plugin checks for element existence before applying relative positioning. If the target element is not found, the toast will not be displayed.

Q: Can I modify the default breakpoints globally?
A: Yes, you can extend the default configuration using $.extend(true, $.triggerToast.defaults, {breakpoints: {...}}) to change defaults for all future toast instances.

Q: How do I handle toast notifications in single-page applications?
A: The plugin automatically manages DOM cleanup when toasts are removed. For SPAs, consider creating a centralized notification service that manages toast lifecycle and prevents memory leaks during route changes.

---

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