Originally written for Huddle.com, grumble.js provides special tooltips without the usual limitations of north/east/south/west positioning.

A grumble can be rotated around a given element at any angle, all 360 degrees. Any distance can be specified. Any CSS style can be applied. There's auto-magic size adjustment for use with localised text. FX queues for animating multiple grumbles. And it works in IE6+, and modern browsers.

grumble.js is currently written as a jquery plugin and can be found on Github

$('h1').grumble({
	text: 'Bubble-tastic!', 
	angle: 85, 
	distance: 100, 
	showAfter: 500 
});

Examples

The following code animates a set of grumbles, click here to see it in action.

No text Different style With close button Enlarged for text

$('#grumble1').grumble(
	{
		text: '', 
		angle: 200, 
		distance: 3, 
		showAfter: 1000,
		hideAfter: 2000
	}
);
$('#grumble2').grumble(
	{
		text: 'Ohh, blue...', 
		angle: 180, 
		distance: 0, 
		showAfter: 2000,
		type: 'alt-', 
		hideAfter: 2000
	}
);
$('#grumble3').grumble(
	{
		text: 'Click me!',
		angle: 150,
		distance: 3,
		showAfter: 3000,
		hideAfter: false,
		hasHideButton: true,
		buttonHideText: 'Pop!'
	}
);
$('#grumble4').grumble(
	{
		text: 'Whoaaa, this is a lot of text that i couldn\'t predict',
		angle: 85,
		distance: 50,
		showAfter: 4000,
		hideAfter: 2000,
	}
);
);