Flexible jQuery Plugin For Custom Animated Tooltips - zTip

zTip is a small JavaScript tooltip library for jQuery that allows you to display any content, text, html and DOM elements inside your tooltips.

Features:

• Subtle animations based on CSS3.
• Configs can be set through HTML data attributes.
• Custom data sources.
• 5 built-in themes: red, blue, greeen, white and dark(default).
• 8 positions: left, bottom, right, top, top-right, top-left, bottom-right, bottom-left.

Installation:

# Yarn
$ yarn add ztip

# NPM
$ npm install ztip --save

How to use it:

1. Install and import the ztip into your project or install the jQuery zTip plugin manually in your web page as follows:

<link href="ztip.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="ztip.js"></script>

2. Initialize the plugin and we're ready to go.

$(".myTooltip").zTip();

3. Config the plugin through JavaScript:

$(".mytooltip").zTip({

  // red, blue, greeen, white
  theme: 'default',

  // attr:title
  // > .child-elem
  // .dom-elem
  // function callback
  source: 'attr:title',

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

});

4. Config the plugin through HTML data attributes:

<span class="myTooltip" 
      data-source="attr:data-test"
      data-theme="red" 
      data-test="Tooltip content here"
      >
      Hover me
</span>

<span class="myTooltip" 
      data-source="> .child-test">
      Hover Me
      <div class="child-test" style="display:none;">
        Tooltip Content Here
      </div>
</span>

<span class="myTooltip" 
      data-source="#special-element">
      Hover Me
</span>
<div id="special-element" style="display:none;">
  Tooltip content here
</div>

5. Override the default theme colors in the zTip.less

@ztip-theme-default-bg-color: fade( #282830, 94% );
@ztip-theme-white-bg-color: fade( #fff, 94% );
@ztip-theme-red-bg-color: fade( #EE543A, 94% );
@ztip-theme-blue-bg-color: fade( #44BBFF, 94% );
@ztip-theme-green-bg-color: fade( #2ECC71, 94% );

---

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