Fully Customizable jQuery Tooltip Plugin - asTooltip

asTooltip is a lighweight and quick jQuery plugin that displays any Html elements in a highly customizable and skinnable tooltip popup. License under the GPL.

Features:

• 9 custom positions.
• Custom triggers.
• Supports ajax content with a pre-loader.
• Supports mouse trace that always following your cursor.
• Auto position based on your layout.
• Skinnable via CSS.
• Cross browser.

Basic Usage:

1. Include jQuery javascript library and the jQuery asTooltip plugin's javascript and stylesheet file in your Html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="src/jquery-asTooltip.js"></script>

2. Create the tooltip content for a span element using it's title attribute and set the position option using data-asTooltip-position attribute. You can also pass the position option and other options via Javascript.

<span class="position_tooltip" data-asTooltip-position="nw" title="North West">North West</span>

3. Options can be passed via data-* attributes or JavaScript. For data attributes, append the option name to data-, as in data-asTooltip-position.

skin: null,

onlyOne: false,
trigger: 'hover', // hover click
interactive: false,
interactiveDelay: 500,
mouseTrace: false,
closeBtn: false,

selector: false,
container: 'body',

distance: 10, //set the distance between tooltip and element

position: 'n',
autoPosition: true,

delay: 0,
effect: 'fade', // fade none zoom
duration: 200,

inline: false,
content: null,
contentAttr: 'title',

ajax: false,
ajaxSettings: {
  dataType: 'html',
  headers: {
    'tooltip': true
  }
},

tpl: {
  tip: '<div class="{{namespace}}"></div>',
  loading: '<span class="{{namespace}}-loading"></span>',
  content: '<div class="{{namespace}}-content"></div>',
  arrow: '<span class="{{namespace}}-arrow"></span>',
  close: '<a class="{{namespace}}-close"></a>'
}

Change logs:

v0.4.3 (2017-09-11)

• update

v0.4.0 (2016-10-16)

• update settings.

v0.3.0 (2014-10-29)

• update settings.

2014-09-06

• update tirgger func

2014-05-08

• clean code, and update to version 0.2.0

---

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