Animated jQuery Tooltip Plugin - tooltipify

tooltipify is an alternative to the default browser tooltip that allows to create animated tooltips with slide in or slide out effect using jQuery and CSS. 

Features:

• Support any html elements
• Fully customizable via CSS
• The position of your tooltip can be set to display anywhere around the html element

Basic Usage:

1. Including jQuery library and jQuery tooltipify on the page

<script src="jquery.min.js"></script>
<script src="jquery-tooltipify.js"></script>

2. Create a html element with title attribute

<div class="default">
<div title="Tooltip for item 1">Item 1</div>
</div>

3. Call the plugin with default options.

$(".default [title]").tooltipify();

4. Call the plugin with default options.

$(".default [title]").tooltipify();

5. All default options to customize the tooltip.

$(".default [title]").tooltipify({

  // top, bottom, left, right
  'position': 'top',

  // offset in px
  'offsetLeft': 0,
  'offsetTop': 0,

  // opacity
  'opacity': 0.8,

  // width
  'width': null,

  // custom animation
  'animationProperty': 'left',
  'animationOffset': 50,
  'animationDuration': 100,

  // show/hide events
  'showEvent': 'mouseover',
  'hideEvent': 'mouseout',

  // enable smart position
  'displayAware': true,

  // any HTML content
  'content': null,

  // additional CSS classes
  'cssClass' : ''
  
});

6. API methods.

// show the tooltip
$(".default [title]").tooltipify("show");

// hide the tooltip
$(".default [title]").tooltipify("hide");

// destroy the tooltip
$(".default [title]").tooltipify("destroy");

Changelog:

2019-04-19

• Added module factory method and npm configuration

2018-01-29

• Made arrow element smaller

2017-11-05

• Added relative styling on tooltip trigger on show event when position is static

2017-11-04

• fixed issue in destory method when tooltip is hidden

2017-03-22

• Fixed padding to 10px, fixed getTooltipHeight, added prefix to show and hide

---

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