jQuery提示插件tooltips

所属分类:UI-工具提示

 18008  75  查看评论 (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提示
  工具提示
 11232  77

jq 提示插件

封装 jq 提示插件 Confirm ,兼容ie811chrome ff
  工具提示
 14867  86

jquery 工具提示插件awTooltip

awTooltip是一个工具提示插件,用css和jQuery插件创建的。 它可以显示工具提示右,左,顶部或底部的元素。 也可以使用彩色工具提示样式。
  工具提示
 10655  37

按首字母搜索(仿携程)

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

讨论这个项目(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也有这个效果 回复
取消回复