这是一款简单且非常实用的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名称。