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 |
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.