grumble.js--气泡形状的提示（Tooltip）控件

任何一个grumble都可以放到它所围绕元素的任意角度的位置，360度全方位无死角，无残留。还能指定任意距离，应用任意CSS样式。 对于任意文本还可以自动调整大小。 多个grumble可以通过FX队列实现动画效果。 queues for animating multiple grumbles. 最后，它能在IE6+这些古董浏览器上工作，更不用FF、Chrome这些现代的浏览器了！

grumble.js 其实是一个jQuery插件

准备：

4个文件，其中grumble.min.css 和 bubble-sprite.png 的相对位置固定，bubble-sprite.png不用引入html，其它需要。资源：。。。

demo:

<button>demo</button>

 $('button').grumble({
            text: 'MMM',//内容，气泡会随内容自己变大，要空格
            angle: 125,//角度
            distance:30,//和控件的距离
            showAfter: 500,//500ms后出现
            hideAfter: 2000//出现2000ms后
        });

官方demo:

 $('#grumble1').grumble(
                {
                    text: '',
                    angle: 200,
                    distance: 3,
                    showAfter: 1000,
                    hideAfter: 12000
                }
        );
        $('#grumble2').grumble(
                {
                    text: 'Ohh, blue...',
                    angle: 180,
                    distance: 0,
                    showAfter: 2000,
                    type: 'alt-',//蓝色。。。就2种颜色？
                    hideAfter: 12000
                }
        );
        $('#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: 12000,
                    onHide: function(){
                        isSequenceComplete = true;
                    }
                }
        );

callback:

$('#myElement').grumble({
	showAfter: 1000,
	hideAfter: 2000,
	onShow: function(){
		console.log('triggered when show animation completes');
	},
	onBeginHide: function(){
		console.log('triggered when hide animation begins');
	},
	onHide: function () { 
		console.log('triggered when hide animation completes');
	}
});

添加旋转功能：

$('#darkside').click(function(e){
	var $me = $(this), interval;
	
	e.preventDefault();
	
	$me.grumble(
		{
			angle: 130,
			text: 'Look at me!',
			type: 'alt-', 
			distance: 10,
			hideOnClick: true,
			onShow: function(){
				var angle = 130, dir = 1;
				interval = setInterval(function(){
					(angle > 220 ? (dir=-1, angle--) : ( angle < 130 ? (dir=1, angle++) : angle+=dir));
					$me.grumble('adjust',{angle: angle});
				},25);
			},
			onHide: function(){
				clearInterval(interval);
			}
		}
	);
});