jquery.balloon.js Demos

A jQuery plugin to add balloon tips to elements
User-friendly, fine-tunable and without css and images

Getting started

(1) Download and load this plugin javascript file after jQuery.

<script src="/js/jquery.balloon.js"></script>

(2) Call $().balloon(options) in document ready event of jQuery.

$(function() {

Distinct features

All options and defaults


Download compressed Download uncompressed Activity on GitHub


Default options

Default contents of balloon is its title. If the element has no title, balloon is not created.

$('#sample1 a').balloon();

$('#sample1 img').balloon();

Wikipedia, the free encyclopedia

Relativism is the concept that points of view have no absolute truth or validity, having only relative, subjective value according to differences in perception and consideration.[1][2] The term is often used to refer to the context of moral principle, where in a relativistic mode of thought, principles and ethics are regarded as applicable in only limited context. There are many forms of relativism which vary in their degree of controversy.[3]


Option position is the relative position of balloon. Combine top, bottom, left and right.

$('.sample2').balloon({ position: "bottom right" });
top left
top right
bottom left
bottom right

offsetX, offsetY

Options offsetX and offsetY are number in pixels to adjust position of balloon. Positive offsetX is right direction and positive offsetY is upper direction.

$('.sample3').balloon({ offsetX: -20, offsetY: -10 });


Option contents is the plain text, HTML text, jQuery object or function. Set the html option to true if contents is a jQuery object or a string containing markup. Pass function which returns contents to update contents dynamically.

  html: true,
  contents: '<a href="#">Any HTML!</a><br>'
    +'<input type="text" size="40">'
    +'<input type="submit" value="Search">'
$('.sample4-2').balloon({ html: true, contents: $('h1').clone() });


Option classname is added to class of balloon.

$('.sample5').balloon({ html: true, classname: "balloonTip" });


Option tipSize is a number in pixels to specify size of tip triangle. If tipSize is 0, balloon does not have tip.

$('.sample6-1').balloon({ tipSize: 50 });
$('.sample6-2').balloon({ tipSize: 0 });


Option css is an style object applied to balloon. See .css() ? jQuery API for reference.

  tipSize: 24,
  css: {
    border: 'solid 4px #5baec0',
    padding: '10px',
    fontSize: '150%',
    fontWeight: 'bold',
    lineHeight: '3',
    backgroundColor: '#666',
    color: '#fff'
  html: true,
  tipSize: 0, offsetY: -100, offsetX: -100,
  showDuration: 0, hideDuration: 0,
  classname: 'balloon-sample7-2',
  css: null /* prevent default */


Option minLifetime is a number in milliseconds to keep shown at least this duration.

$('.sample8-1').balloon({ minLifetime: 2000 });
$('.sample8-2').balloon({ minLifetime: 0 });

showDuration, hideDuration

Options showDuration and hideDuration are string or number determining how long the showing and hinding animation will run. If no need animation, specify 0.

  showDuration: 1000, hideDuration: 500
  showDuration: 500, hideDuration: 0
  minLifetime: 0, showDuration: 0, hideDuration: 0

showAnimation, hideAnimation

Options showAnimation and hideAnimation are the function performed at showing and hiding. The parameter of the function is duration of the animation, and this in the function is the jQuery object of balloon. Default showAnimation is $().show(showDuration). Default hideAnimation is $().fadeOut(hideDuration).

  showDuration: "slow",
  showAnimation: function(d, c) { this.fadeIn(d, c); }
  hideDuration: "slow",
  hideAnimation: function(d, c) { this.slideUp(d, c); }

url, ajaxComplete

Options url and ajaxComplete are used for getting contents by Ajax. Option contents is used at first. At completion of the ajax request, contents of balloon is relplaced by the data. The functon ajaxComplete is called at completion of ajax. Parameter of this function are same as third parameter of .load() ? jQuery API.

  position: 'right',
  url: '/jquery.tile.js/index.html .sample:first'
  html: true, position: 'right',
  contents: '<img src="img/balloon-sample-loading.gif" alt="loading..." width="25" height="25">',
  url: '/jquery.tile.js/js/jquery.tile.js'

Advanced methods showBalloon(options), hideBalloon(options)

knight of chess

To bind another event, use $().showBalloon(options) and $().hideBalloon(options).

This sample (an image element of knight of chess) binds these methods to click event. It is not necessary to specify options for each calling.

The opsions for the jQuery object is chached by calling these methods.

All methods of this plugin return jQuery object to chain methods.

$(function() {
  var shown = true;
  $('#knight').on("click", function() {
    shown ? $(this).hideBalloon() : $(this).showBalloon();
    shown = !shown;
  }).showBalloon({ ... });

Change default options, prevent default css

If you want to change default options, over-write $.balloon.defaults.

$(function() {
  $.balloon.defaults.tipSize = 0;

If you want to specify all styles in your css, use classname and prevent default css as shown below.

$(function() {
  $.balloon.defaults.classname = "my-balloon";
  $.balloon.defaults.css = null;