Animated Sticky Bottom Notification Bar Plugin - jQuery Hat Tip

Hat Tip is a simple jQuery plugin for creating an animated notification bar that always stays at the bottom of the web page. 

The plugin currently supports four notification types: info, danger, success, and default, making it simple to display important messages, alerts, or limited-time offers to your audience.

See Also:

• 10 Best Notification Bar Libraries In JavaScript

How to use it:

1. Download and import the jQuery Hat Tip plugin.

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

<!-- jQuery Hat Tip -->
<link rel="stylesheet" href="/path/to/hat-tip.min.css" />
<script src="/path/to/hat-tip.min.js"></script>

<!-- OR -->
<script src="/path/to/hat-tip-bundle.js"></script>

2. Add the following HTML snippet to the bottom of your webpage.

<!--<div id="hattip" role="alert">
  <span id="msg"></span>
  <button type="button" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>-->

3. Display a default message in the bottom notification bar.

hattip_fire('This is a default message');

4. The plugin also support HTML content.

hattip_fire('This is an <b>HTML</b> message');

5. The second parameter of the hattip_fire method is used to specify the notification type.

hattip_fire('This is a <b>DANGER</b> message', 'ht-danger');
hattip_fire('This is a <b>SUCCESS</b> message', 'ht-success');
hattip_fire('This is an <b>INFO</b> message', 'ht-info');
hattip_fire('This is a <b>CUSTOM</b> message', 'custom-class');

6. Add a bounce-in animation to the notification bar.

hattip_fire('With <b>louder animation</b> animation', 'ht-danger', 'dont-panic');

---

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