Top Alert Notification Bar Plugin With jQuery - Toptips

Toptips is a jQuery plugin for creating minimal clean notification bars that always stay on the top of the page.

Features:

• Info/Success/Error types.
• Custom notification icons.
• Configurable fade animation.

How to use it:

1. Include the Toptips plugin's files on the page.

<!-- Required Stylesheet -->
<link rel="stylesheet" href="./styles/index.css" />
<!-- JavaScript -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="./jquery.toptips.js" defer></script>

2. Enable a button to toggle a basc alert notification on the page.

<a href="javascript:click();">
  Via JavaScript
</a>

function click () {
  new $.toptips({ 
    message: 'Your Alert Message Here'
  })
}

3. You can also toggle the notification bar via HTML data attributes as follows:

<a href="#open-toptips" 
   data-message="An Error Message" 
   data-type="error" 
   rel="toptips:open" 
   class="btn">
   Error
 </a>

4. Full plugin options:

new $.toptips({ 
  
  // alert message
  message: '',

  // 'info', 'success', or 'error'
  type: 'info',

  // close the exisiting notification bar when a new one is displayed 
  closeExisting: true,

  // close the notification bar by pressing the ESC
  escapeClose: true,

  // container class
  blockerClass: "toptips-container",

  // shows close button
  showClose: true,

  // config the fade animation
  fadeDuration: 200,
  fadeDelay: 1.0 

})

5. Add your own notification types in CSS.

.toptips.warning {
  background: #4F46E5;
}

.toptips.warning .toptips__icon::before {
  content: "\e6a1"; /* custom icon */
}

function click () {
  new $.toptips({ 
    type: 'warning',
    message: 'Your Alert Message Here'
  })
}

---

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