jQuery提示插件tooltips

所属分类:UI-工具提示

 21351  78  查看评论 (5)
jQuery提示插件tooltips ie兼容8

用法示例

<button class="btn btn-primary" id="tooltips">tooltips</button>

简单调用

/*jQuery工具集调用方式*/
$('#tooltips').click(function() {
    var self = this;
    $.pt({
        target: self,
        content: '好雨知时节, 当春乃发生。随风潜入夜, 润物细无声。。。'
    });
});
/*jQuery包装集调用方式*/
$('#tooltips').pt({
    position: 't', // 默认属性值
    align: 'c',	   // 默认属性值
    content: '好雨知时节, 当春乃发生。随风潜入夜, 润物细无声。。。'
});

配置参数

名称类型默认值描述
targetjQeury Objnull目标元素,不能为空。
positionString't'提示框相对目标元素位置,t=top,b=bottom,r=right,l=left。
alignString't'提示框与目标元素的对齐方式,自动调节箭头显示位置,c=center, t=top, b=bottom, l=left, r=right [postion=t|b时,align=l|r有效][position=t|b时,align=t|d有效]。
arrowBooleantrue是否显示箭头。
contentString
HTMLElement
jQeury Obj
''消息内容。
widthNumber200设置弹出层内容区宽度。
heightNumber'auto'设置弹出层内容区高度。
autoCloseBooleantrue是否自动关闭。
timeNumber2000自动关闭延时时长,毫秒。
leaveCloseBooleantrue提示框失去焦点后关闭。
closeFunctionnull关闭回调函数。


相关插件-工具提示

超漂亮的placeholders提示

超漂亮的placeholders提示
  工具提示
 11783  80

Metro风格的jQuery个性化消息提示插件

介绍一款Metro风格的消息提示框插件,插件是基于jQuery的,不仅拥有Metro哪种简单精巧的UI风格,而且兼容性也还不错。之前分享过一些基于jQuery和CSS3的提示框插件,比如HTML5CSS3弹出提示框,感兴趣的朋友也可以前往关注。
  工具提示
 8736  49

jq 提示插件

封装 jq 提示插件 Confirm ,兼容ie811chrome ff
  工具提示
 16003  91

按首字母搜索(仿携程)

城市查找按首字母搜索(仿携程)
  工具提示
 15434  117

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币

    绅士中的绅士 0
    2017/12/6 11:41:03

    感觉好累赘,引用了十几个js,不知道哪几个真正用到了

    回复
    汪星上的喵星人 0
    2017/3/16 16:45:07

    这个挺好的,赞个

    回复
    zhuyuhao 0
    2017/3/15 16:55:06

    不过boostrap也有这个效果

    回复
    简单快乐 0
    2017/2/5 17:57:18

    引导用户提示操作,感觉不错,不过boostrap也有这个效果

    回复
    狂奔的小马 0
    2016/12/13 17:12:01
    感觉不错,不过boostrap也有这个效果 回复
取消回复