Animated jQuery Tooltip Plugin - tooltipify

File Size: 24 KB
Views Total: 2201
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.