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() {
  $('selectors').balloon(options);
});

Distinct features

All options and defaults

Download

Download compressed Download uncompressed Activity on GitHub

Demos

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]

position

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

$('.sample2').balloon({ position: "bottom right" });
top left
top
top right
left
null
right
bottom left
bottom
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 });

contents

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.

$('.sample4-1').balloon({
  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() });
4-1
4-2

classname

Option classname is added to class of balloon.

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

tipSize

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 });
6-1
6-2

css

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

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

minLifetime

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

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

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.

$('.sample9-1').balloon({
  showDuration: 1000, hideDuration: 500
});
$('.sample9-2').balloon({
  showDuration: 500, hideDuration: 0
});
$('.sample9-3').balloon({
  minLifetime: 0, showDuration: 0, hideDuration: 0
});
9-1
9-2
9-3

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

$('.sample10-1').balloon({
  showDuration: "slow",
  showAnimation: function(d, c) { this.fadeIn(d, c); }
});
$('.sample10-2').balloon({
  hideDuration: "slow",
  hideAnimation: function(d, c) { this.slideUp(d, c); }
});
10-1
10-2

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.

$('.sample11-1').balloon({
  position: 'right',
  url: '/jquery.tile.js/index.html .sample:first'
});
$('.sample11-2').balloon({
  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'
});
11-1
11-2

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;
  $('selectors').balloon();
});

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;
  $('selectors').balloon();
});