Easy Toast Notification Plugin With jQuery And Bootstrap - hinter.js

hinter.js is a very small jQuery notification plugin which displays error and/or success toast messages on the top of webpage using Bootstrap styles.

How to use it:

1. First you need to load jQuery library and Bootstrap framework in the html page.

<link href="/path/to/bootstrap.min.css" rel="stylesheet">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>

2. Load the jQuery hinter.js script after jQuery.

<script src="dist/hinter.min.js"></script>

3. Display a success message on the screen.

$('body').hinter({ 
  message: "This is a success message."
});

4. Display an error message on the screen.

$('body').hinter({ 
  message: "This is an error message.",
  isSuccess: false
});

5. Customize the slideUp animation speed.

$('body').hinter({ 
  message: "This is an error message.",
  isSuccess: false,
  slideUp: 250,
});

6. Override the default delay time the toast message should stay in the screen.

$('body').hinter({ 
  message: "This is an error message.",
  isSuccess: false,
  slideUp: 250,
  delay: 5000,
});

7. Add custom CSS classes and IDs to the toast container.

$('body').hinter({ 
  message: "This is an error message.",
  isSuccess: false,
  slideUp: 250,
  delay: 5000,
  id: "hinter",
  class: "hinter"
});

Change log:

2016-05-18

• window.jquery instead

---

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