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();
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" });
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() });
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 });
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 */
});
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 });
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
});
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); }
});
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'
});
