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名称。
posted @   东绕城  阅读(132)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示