Fully Customizable jQuery Tooltip Plugin - asTooltip

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


  • 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)

v0.4.0 (2016-10-16)

  • update settings.

v0.3.0 (2014-10-29)

  • update settings.


  • update tirgger func


  • 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.