Tooltip Plugin

Changelog

Blog Post

See the offical Blog Post

Call Code

$('selectors').tooltips(settingsOrContent, settings);
settingsOrContent
(object/string)If object, it is a settings object. If it is a string it is override content for hover.
settings
(object) If settingsOrContent is a string, this holds the settings object

Settings Object

{
	offsetX : 15,
	offsetY : 15,
	width : '',
	className : 'tooltip',
}
offsetX
(integer) Offset from mouse on X (left-right) axis. (sample: 20)
offsetY
(integer) Offset from mouse on Y (up-down) axis. (sample: 20)
width
(string) What to limit the width of the tooltip to. (sample: '50px')
className
(string) What class to apply to the tooltip. Position:absolute and display:none are automatically applied. (sample: 'brightRed')

#1 Standard Settings.

$('#box1').tooltips();

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sed pede. Etiam ante purus, consectetuer id, bibendum fermentum, accumsan sed, nunc. Vestibulum dignissim, leo vel aliquam dignissim, nibh ligula cursus tortor, in vulputate neque lorem eu sem. Morbi nibh nulla, tempus ac, varius sed, porta sit amet, nulla. Proin laoreet. Phasellus quis tortor eu augue rutrum posuere.

#2 Overridding The title Attribute.

You can override the content in the title attribute by specicifing it in the call function.

$('#box2').tooltips('OVERRIDDEN CONTENT!');

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sed pede. Etiam ante purus, consectetuer id, bibendum fermentum, accumsan sed, nunc. Vestibulum dignissim, leo vel aliquam dignissim, nibh ligula cursus tortor, in vulputate neque lorem eu sem. Morbi nibh nulla, tempus ac, varius sed, porta sit amet, nulla. Proin laoreet. Phasellus quis tortor eu augue rutrum posuere.

#3 Applying a class to the tooltip

$('#box3').tooltips({className: 'brightRed'});

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sed pede. Etiam ante purus, consectetuer id, bibendum fermentum, accumsan sed, nunc. Vestibulum dignissim, leo vel aliquam dignissim, nibh ligula cursus tortor, in vulputate neque lorem eu sem. Morbi nibh nulla, tempus ac, varius sed, porta sit amet, nulla. Proin laoreet. Phasellus quis tortor eu augue rutrum posuere.

#4 Forcing A Width on a box

$('#box4').tooltips({width: '50px'});

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sed pede. Etiam ante purus, consectetuer id, bibendum fermentum, accumsan sed, nunc. Vestibulum dignissim, leo vel aliquam dignissim, nibh ligula cursus tortor, in vulputate neque lorem eu sem. Morbi nibh nulla, tempus ac, varius sed, porta sit amet, nulla. Proin laoreet. Phasellus quis tortor eu augue rutrum posuere.

jQuery Code for 4 Samples

$(document).ready(function () {
	$('#box1').tooltips();
	$('#box2').tooltips('OVERRIDDEN CONTENT!');
	$('#box3').tooltips({className: 'brightRed'});
	$('#box4').tooltips({width: '50px'});
});

CSS for Sample 3

.brightRed {
	background:red;
	color:white;
	border:1px #800 solid;
	padding:15px;
}