Grumble.js气泡形状的提示(Tooltip)控件

Grumble.js是一个jQuery插件可用于创建球形汽泡Tooltips。
Grumble.js采用淡入/淡出的效果展示，可以设置成自动消失或一直显示直到被关闭为止。

Tooltips显示的位置可灵活自动变幻,360度全方位无死角，无残留。还能指定任意距离，应用任意CSS样式。

这个插件还提供一些回调方法如：onShow、onBeginHide和onHide等。

使用方法：

一、引入必需文件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Bubble.js"></script>
<script type="text/javascript" src="js/jquery.grumble.js"></script>

<link rel="stylesheet" type="text/css" href="css/grumble.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

目录结构如下：

css
-|bootstrap.css
-|grumble.css
images
-|bubble-sprite.png
js
-|Bubble.js
-|jquery.grumble.js
-|jquery.min.js
index.html

二、页面代码

<button type="button" id="grumble1" class="btn btn-primary">无文本</button>
<button type="button" id="grumble2" class="btn btn-success">可选样式</button>
<button type="button" id="grumble3" class="btn btn-info">带有关闭按钮</button>
<button type="button" id="grumble4" class="btn btn-warning">超大文本区</button>
<button type="button" id="myElement" class="btn btn-default">show、hide方法</button>
<button class="btn btn-default" type="submit" id="darkside">动画实现</button>

三、使用grumble

<script type="text/javascript">
$(function() {
$("#grumble1").click(function(){
$('#grumble1').grumble( {
text : '',
angle : 200,
distance : 3,
showAfter : 100,
hideAfter : 1000
});
})
$("#grumble2").click(function(){
$('#grumble2').grumble( {
text : 'Ohh, blue...',
angle : 180,
distance : 0,
showAfter : 100,
type : 'alt-',
hideAfter : 1000
});
})
$("#grumble3").click(function(){
$('#grumble3').grumble( {
text : 'Click me!',
angle : 150,
distance : 3,
showAfter : 100,
hideAfter : false,
hasHideButton : true, // just shows the button
buttonHideText : 'Pop!'
});
})
$("#grumble4").click(function(){
$('#grumble4').grumble( {
text : 'Whoaaa, this is a lot of text that i couldn\'t predict',
angle : 85,
distance : 50,
showAfter : 100,
hideAfter : 1000,
onHide : function() {
isSequenceComplete = true;
}
});
})

$('#myElement').click(function(){
$('#myElement').grumble({
showAfter: 100,
hideAfter: 2000,
angle : 150,
distance : 12,
onShow: function(){
console.info('当显示动画完成触发');
},
onBeginHide: function(){
console.info('隐藏动画开始时触发');
},
onHide: function () {
console.info('当隐藏动画完成后触发');
}
});
})

$('#darkside').click(function(e){
var $me = $(this), interval;
e.preventDefault();
$me.grumble(
{
angle: 130,
text: 'Look at me!',
type: 'alt-',
distance: 13,
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);
}
}
);
});

})
</script>

主要参数含义

angle: 旋转度数顺时针方向

distance：距离

showAfter：指定毫秒数后显示动画

hideAfter：指定毫秒数后隐藏动画

演示地址