这是一款简单且非常实用的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名称。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!