jQuery Plugin Poshy Tip 使用 统一提示信息
项目到了后期，发现前端的提示信息不统一，解决思路如下：
1.回顾系统中tip出现的场景：表单验证提示信息、数据列表中随填随显
2.确定问题域：多条提示信息层叠、信息显示风格不统一
3.结论：找出一款合适的tip插件进行整合快速的响应项目的需要
google关键词：jquery tooltip，检索了好多tip插件，最终选择了Poshy Tip,理由如下：
1.多种不同的外观。
2.同时可以作为 Form Tooltips使用
3.可以自定义气泡出现的位置
先来一个直观的认识：
Poshy Tip tooltip jquery
详细的参数说明如下：
|
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
$.fn.poshytip.defaults = {// 提示内容默认为元素的标题，可以使指定的字符串、元素、回调函数、jquery对象content:'[title]',// 指定的tips class样式className:'tip-yellow',//按照像素计算背景图片和显示内容的内边距bgImageFrameSize:10,showTimeout:500,// 延时多久开始显示hideTimeout:100,// 延时多久开始隐藏timeOnScreen:0,// 自动隐藏之前延时多久//显示方式 支持'hover'鼠标划入、'focus' 获取焦点、'none'手动显式调用showOn:'hover',liveEvents:false,// 支持live 事件 同样可以对未来元素进行影响alignTo:'cursor',// 和谁进行对齐 ('cursor' 鼠标, 'target' 目标元素)// 水平方向对齐方式 可选参数：//('right', 'center', 'left', 'inner-left', 'inner-right')alignX:'right',// 垂直方向对齐方式 可选参数：//('bottom', 'center', 'top', 'inner-bottom', 'inner-top')alignY:'top',offsetX:-22,// 水平偏移量offsetY:18,// 垂直方向偏移量//hover显示方式下，允许鼠标离开元素仍然显示提示信息allowTipHover:true,// 提示信息随着鼠标移动 只在满足hover显示方式下，对齐方式为alignTo:'cursor' 才有效followCursor:false,fade:true,// 使用动画slide:true,// 使用slie效果slideOffset:8,// slide 动画的偏移量// 动画显示的时间间隔 如果不想动画效果，设置为0即可showAniDuration:300,// 动画隐藏的时间间隔 如果不想动画效果，设置为0即可hideAniDuration:300}; |
核心方法
|
1
2
3
4
5
6
7
8
9
10
11
|
.poshytip('show') 手动显示tip.poshytip('hide') 手动隐藏tip.poshytip('update', content, [ dontOverwriteOption ] ) 手动更新tip.poshytip('disable') tip不可用.poshytip('enable') tip可用.poshytip('destroy') 销毁tip |
官方网址：
http://vadikom.com/tools/poshy-tip-jquery-plugin-for-stylish-tooltips/
