项目到了后期，发现前端的提示信息不统一，解决思路如下：
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/