Tooltip Plugin

Changelog

v0.1 (6/3/2009)
- Initial Release
v0.2 (6/4/2009)
- Made sure the box didn't overflow the side of the screen.
- Made code more efficent.

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!');

#3 Applying a class to the tooltip

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

#4 Forcing A Width on a box

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

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;
}