Top Alert Notification Bar Plugin With jQuery - Toptips

File Size: 11 KB
Views Total: 393
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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
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" 

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.