Animated jQuery Tooltip Plugin - tooltipify

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="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" 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.

$(".default [title]").tooltipify({
  'position': 'top',
  'offsetLeft': 0,
  'offsetTop': 0,
  'opacity': 0.8,
  'width': null,
  'animationProperty': 'left',
  'animationOffset': 50,
  'animationDuration': 100,
  'showEvent': 'mouseover',
  'hideEvent': 'mouseout',
  'displayAware': true,
  'content': null,
  'cssClass' : ''
});

Change log:

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.

  • Publication date: 04.11.2017
  • Source