Minimal Animated jQuery Tooltip Plugin - naoTooltips

File Size: 13.5 KB
Views Total: 1387
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Animated jQuery Tooltip Plugin - naoTooltips

Yet another jQuery plugin which lets you create nice-looking tooltips on any elements with custom sizes, positions and animation speeds.

How to use it:

1. Include jQuery library and the naoTooltips.css & naoTooltips.js on the webpage.

<link rel="stylesheet" href="src/naoTooltips.css">
<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="src/naoTooltips.js"></script>

2. The html structure:

  • Use the class 'naoTooltip' along with the classes 'nt-right / nt-left / nt-top / nt-bottom / nt-right-top / nt-right-bottom / nt-left-top / nt-left-bottom / nt-top-left / nt-top-right/ nt-bottom-left / nt-bottom-right' depending on where you want to display the tooltip, and the classes 'nt-small/nt-medium/nt-large' to set the desired size.
  • And then use the class 'naoTooltip-wrap' to wrap all the content and tooltip inside.
<div class="naoTooltip-wrap">

  <span>Hover me! (right Tooltip)</span>

  <div class="naoTooltip nt-right nt-small">
      I'm an amazing tooltip! With a small size!
  </div>

</div>

3. Initialize all the tooltips using the wrapper class.

$('.naoTooltip-wrap').naoTooltip();

4. Or initialize the tooltips with custom animation speed (by default is 400).

$('.naoTooltip-wrap').naoTooltip({ 

  // 200 / 400 / 600 / 'slow' / 'fast'
  speed: 200 
  
});

Change log:

2016-07-17

  • Add more position CSS classes.

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