[tostie] Responsive And Customizable Toast Message Plugin for jQuery

Tostie jQuery toast messagesToastie is a very simple way to show nice toast notifications on your website. It works great for both regular and responsive websites.

Some features:

  • 4 types of notifications: success, notification, warning, and error.
  • Easy API by jQuery.
  • Fully responsive.
  • Toast messages stay at the top of the view, so you can see them even if you’re scrolling.
  • Click the toast message to let it disappear.

How to make use of it:

1. Load jquery.tostie.css for basic notification styles.

<link href="src/jquery.tostie.css" rel="stylesheet">

2. Load jquery.tostie.js after the jQuery library but before the body closing tag.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="src/jquery.tostie.js"></script>

3. Create a default ‘notice’ notification with a custom message.

$().tostie({message:"This is a notice."});

4. Customize your toast messages.


// custom toast message
message: "",

// "success", "notice", "warning" or "error"
type: "notice",

// The number of milliseconds the toast message should be shown
toastDuration: 3000,

// The number of milliseconds in which the toast message should be opened and removed
inOutDuration: 300,

// "slide" or "fade"
inOutType: "slide",

// callbacks
beforeClose: function(){},
afterClose: function(){}


Slick Responsive Toast Message Plugin, Tostie jQuery toast messages Github


jQuery Non-obtrusive Toast Message Notification Plugin | NToastJS
Programmatic Toasts for Nuxt.js Based On Tailwind CSS

See Demo And Download

Official Website(dukeofharen): Click Here

This superior jQuery/javascript plugin is developed by dukeofharen. For extra Advanced Usage, please go to the official website.