Versatile jQuery Notification & Tooltip Popup Plugin - Nutip

Nutip is a lightweight, multi-functional and easy to customize jQuery plugin which helps you create tooltips, popups, flying panels, growl notifications to display informative messages on the webpage.

How to use it:

1. Include jQuery library together with the jQuery nutip plugin's JavaScript & Stylesheet into your html page.

<link rel="stylesheet" href="css/nutip.css">
  ...
<script src="jquery.min.js"></script>
<script src="src/js/jquery.nutip-1.0.js"></script>

2. Create a tooltip on an element that triggers on hover.

<span data-nutip
      data-nutip-type="tip" 
      data-nutip-style="canary" 
      data-nutip-title="Title" 
      data-nutip-message="Message here">
</span>

3. Create a message panel that will fly in from the side.

<span data-nutip
      data-nutip-type="nugget" 
      data-nutip-style="canary" 
      data-nutip-title="Title" 
      data-nutip-message="Message here">
</span>

4. Create a popup window that will reveal on mouse click.

<span data-nutip
      data-nutip-type="popup" 
      data-nutip-style="canary" 
      data-nutip-title="Title" 
      data-nutip-message="Message here">
</span>

5. Create a notification bar that sticks to the top of the webpage.

<span data-nutip
      data-nutip-type="notify" 
      data-nutip-style="canary" 
      data-nutip-title="Title" 
      data-nutip-message="Message here">
</span>

6. Create a growl style notification that triggers on mouse click.

<span data-nutip
      data-nutip-type="growl" 
      data-nutip-style="canary" 
      data-nutip-title="Title" 
      data-nutip-message="Message here">
</span>

7. All Html5 attributes.

• data-nutip: required
• data-nutip-type: tip, popup, nugget, notify or growl
• data-nutip-style: canary, greenjay, cardinal, bluejay, dove, raven
• data-nutip-title: custom title
• data-nutip-message: custom message. Supports html content.

---

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