Tiny Responsive jQuery Tooltip Plugin - Neat Tooltip

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.