jQuery简单实用的Tooltip提示插件
这是一款简单且非常实用的jquery Tooltip工具提示插件。该tooltips插件没有CSS,意味着你可以自定义你自己的Tooltip样式。你可以在Tooltip中显示任何内容:文本、DOM元素、图片等等。它的特点有:
- 源文件非常小。
- 没有依赖CSS文件,你可以自己定制。
- 可以Tooltip任何你需要的东西。
安装
可以通过bower来安装这个Tooltip插件:
1 | $ bower install tinytip |
使用方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | $( '.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名称。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!