这是一款简单且非常实用的jQuery Tooltip工具提示插件。该Tooltips插件没有CSS，意味着你可以自定义你自己的Tooltip样式。你可以在Tooltip中显示任何内容：文本、DOM元素、图片等等。它的特点有：
- 源文件非常小。
- 没有依赖CSS文件，你可以自己定制。
- 可以Tooltip任何你需要的东西。
安装
可以通过bower来安装这个Tooltip插件：
$ bower install tinytip
使用方法
<!-- first include jQuery library -->
<script src="./jQuery.js"></script>
<!-- Then tinytip plugin -->
<script src="./tinytip.js"></script>
$('.block.link').tinytip({
//position [top|bottom|left|right]
position : 'bottom',
//tooltip position fix [+-][yx]
fix : {
top : -10,
left: +20
},
//animation effect start position [+,-][top,left]
//example +10 => animate up 10 pixels
animation : {
top : +10,
left: -5,
},
//animation speed in milliseconds
speed : 100,
//tooltip text, or can be a jQuery object of
//selected element
tooltip : "Hi There" || $('.some-selector'),
//when to show tooltip event (default: mouseenter)
on : 'click',
//when to hide tooltip event (default: mouseleave)
off: 'click'
//prevent tooltip close when hover over it
preventClose : true,
//callback function fired once the tooltip completely loaded
//passes tooltip element jQuery object (e)
onLoad : function(e){
e.text('lool');
},
//add custom class to this tooltip
addClass : 'unique'
});
配置参数
- position：类型：
string。tooltip元素放置在何处，选项有：[top|bottom|left|right]。 - fix：类型：
object。将tooltip位置固定。- top :([+|-]number) set top position
- left :([+|-]number) set left position
- animation：类型：
object。tooltip动画开始的位置。- top :([+|-]number) set starting top position
- left :([+|-]number) set starting left position
- speed：类型：
number。动画的速度，单位毫秒。 - easing：类型：
number。如果使用jQuery easing插件，配置easing效果选项。默认值：linear。 - tooltip：类型：
string|jQuery Object。tooltip的text/html/jQuery元素选择器。 - on：类型：
string。触发tooltip的事件。默认值：mouseenter。 - off：类型：
string。隐藏tooltip的事件。默认值：mouseleave。 - preventClose：类型：
boolean。设置为true在离开或滑过tooltip元素的时候隐藏tooltip。默认值为false。 - onLoad：类型：
function。tooltip加载完成后的回调函数。函数会传递一个tooltip的jquery对象。 - addClass：类型：
string。定制当前tooltip的class名称。
