jQuery提示插件tooltips

所属分类：UI-工具提示

74146 390 查看评论 (5)

分享到微信朋友圈

查看演示 website 立即下载

插件描述：一个简单精致的jQuery的箭头带框提示插件

用法示例

<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: '好雨知时节， 当春乃发生。随风潜入夜， 润物细无声。。。'
});

配置参数

名称	类型	默认值	描述
`target`	jQeury Obj	null	目标元素，不能为空。
`position`	String	't'	提示框相对目标元素位置，t=top,b=bottom,r=right,l=left。
`align`	String	't'	提示框与目标元素的对齐方式，自动调节箭头显示位置，c=center, t=top, b=bottom, l=left, r=right [postion=t\|b时，align=l\|r有效][position=t\|b时，align=t\|d有效]。
`arrow`	Boolean	true	是否显示箭头。
`content`	String HTMLElement jQeury Obj	''	消息内容。
`width`	Number	200	设置弹出层内容区宽度。
`height`	Number	'auto'	设置弹出层内容区高度。
`autoClose`	Boolean	true	是否自动关闭。
`time`	Number	2000	自动关闭延时时长，毫秒。
`leaveClose`	Boolean	true	提示框失去焦点后关闭。
`close`	Function	null	关闭回调函数。