Easy & User-friendly Tooltip Plugin For jQuery - balloon.js

balloon.js is a  jQuery plugin that allows you to easily add User-friendly and fine-tunable tooltips to any element on your page, even without using any CSS and image. However, you can also adjust or style your tooltips by using both script and css.

How to use it:

1. Load jQuery Library and balloon.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.balloon.js"></script>

2. Call the plugin with options

// Basic Usage

<script>
$(function() {
  $('a').balloon({ position: "bottom" });
});
</script>

3. More Options (Default)

contents: null, 
url: null, 
ajaxComplete: null, 
ajaxContentsMaxAge: -1,
html: false,
classname: null,
position: "top", 
offsetX: 0, 
offsetY: 0, 
tipSize: 12,
tipPosition: 2,
delay: 0, 
minLifetime: 200, 
maxLifetime: 0,
showDuration: 100, 
showAnimation: null,
hideDuration:  80, 
hideAnimation: function(d) { this.fadeOut(d); },
showComplete: null, 
hideComplete: null,
css: {
  fontSize       : ".7rem",
  minWidth       : "20px",
  padding        : "5px",
  borderRadius   : "6px",
  border         : "solid 1px #777",
  boxShadow      : "4px 4px 4px #555",
  color          : "#666",
  backgroundColor: "#efefef",
  zIndex         : "32767",
  textAlign      : "left"
}

4. Markup

<a href="https://www.jqueryscript.net/" title="jQueryScript.Net"><strong>Free jQuery Plugins and Tutorials</strong></a>

Change logs:

v1.1.2 (2017-04-30)

• Fixed: classname does not work

v1.0.0 (2016-05-25)

• Add 'ajaxContentsMaxAge' option

v0.7.0 (2016-02-16)

• Added the option to specify the tip position by rate.

v0.6.2 (2015-04-30)

• Fixed: Double mouseenter event causes flickering

v0.6.0 (2014-12-21)

• Add maxLifetime option.

v0.5.1 (2014-03-14)

• version update.

v0.5.0 (2014-02-18)

• Use alt if the element has alt without title.

v0.4.0 (2014-02-09)

• Add showComplete and hideComplete options.

---

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