Tiny Responsive jQuery Tooltip Plugin - Neat Tooltip
File Size: | 43.9 KB |
---|---|
Views Total: | 1683 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Neat Tooltip is a lightweight jQuery plugin to create responsive, touch-friendly, hover- or click-activated tooltips that give you complete control over the style, position, and trigger event.
Basic usage:
1. Import the neat-tooltip.css
stylesheet for default tooltip styles.
<link rel="stylesheet" href="neat-tooltip.css">
2. Add title
attribute to html element for custom tooltip content.
<span class="demo-1" title="Tooltip content">Simple tooltip</span>
3. You can also embed any html element into the tooltip as displayed below.
<a class="demo-2" href="#tooltip-content">Content is #tooltip-content element.</a> <div style="display: none" id="tooltip-content"> <h3>Tooltip content</h3> <p><a class="tooltip-close" href="#">close</a></p> </div>
4. Initialize the tooltip plugin.
$('.demo-1').tooltip(); $('.demo-2').tooltip({ source: 'anchor', cssClass: 'tooltip-large' }, 'click' );
5. Default plugin options.
$('.demo-1').tooltip({ // position of the tooltip position: 'bottom', // load tooltip content from: // title = title attribute source: 'title', // additional CSS class // useful to add your own tooltip styles cssClass: '', // CSS selector for close link closeSelector: '.tooltip-close', // in pixels distance: 5, // allow multiple instance on one element allowMultiple: false, // close tooltip on click outside closeOnClickOuside: true, // auto close tooltip after a timeout delay: 200, // target container container: window, // in pixels margin: 10, // where you want to append the tooltip to appendTo: 'body' });
Change log:
2015-07-06
- optimize when no delay
This awesome jQuery plugin is developed by Monstroplante. For more Advanced Usages, please check the demo page or visit the official website.