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/