摘要：

分享一款在项目中使用的tooltips插件--poshytip，这是一款基于jQuery的插件，其特点是简单易用，支持浏览器：IE6+, FF 2+, Opera 9+, Safari 3+, Chrome，并且带有六种皮肤的提示框

下载poshytip插件

下载poshytip插件，解压之后将文件夹src拷贝到项目中，然后引入js和css文件。

1 <link rel="stylesheet" href="../src/tip-yellow/tip-yellow.css" type="text/css" />
2 <script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script>
3 <script type="text/javascript" src="../src/jquery.poshytip.min.js"></script>

注意：文件夹中包含所有样式，只需引自己需要的样式，此处引用的是tip-yellow.css。poshytip是基于jQuery的插件，所以在引用插件之前先引用jQuery，版本需要在1.4+。

poshytip包含两个js文件jquery.poshytip.js和jquery.poshytip.min.js，前者是未压缩版，如果在开发中出现错误可以引用这个调试，开发完之后线上引用后者压缩版的。

Demos：

1 <a id="demo" title="Hey, there! This is a tooltip." href="#">
2 <script>
3 $('#demo').poshytip();
4 </script>

如果没有设置poshytip的content，那么它就会将元素的title值作为提示信息。

设置不同皮肤的提示框

$('#demo').poshytip({
　　className: ''
});

设置className值来定义皮肤，缺省状态是tip-yellow。取值：tip-yellow，tip-violet，tip-darkgray，tip-skyblue，tip-yellowsimple，tip-twitter，tip-green

注意：设置className同时应将对应的css文件引入。

表单提示：

1 $('#demo-form-name').poshytip({
2     className: 'tip-yellowsimple',
3     showOn: 'focus',
4     alignTo: 'target',
5     alignX: 'right',
6     alignY: 'center',
7     offsetX: 5,
8     showTimeout: 100
9 });

提示无处不在，更多的提示才能帮助用户轻松的使用产品，不管是表单注册提示、错误提示等等。希望你能够喜欢这款提示插件。

提示无处不在，更多的提示才能帮助用户轻松的使用产品，不管是表单注册提示、错误提示等等。希望你能够喜欢这款提示插件。