提示插件常用于说明一些必要的帮助信息，今天介绍的提示插件叫做poshytip，提示插件我们一般称为tooltip。先来看下poshytip的效果图：
有个"?"，鼠标放上去之后，可以在指定位置出现你定制的提示内容，这就是poshytip提示插件的作用了。
几个需要注意的地方：
1.poshytip这个插件需要依赖jquery，因此要想使用它，你需要先引入jquery。
2.我们看到提示内容所在框框是浅黄色的，这里的颜色是什么取决于你使用的poshytip的主题
接下来我们就来看看上边的效果是如何通过代码实现的吧，先来贴出html代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="anti/poshytip/tip-yellow/tip-yellow.css"> <script src="anti/js/jquery-1.10.2.js"></script> <script type="text/javascript" src="anti/poshytip/jquery.poshytip.min.js"></script> <title>poshytip提示tooltip插件</title> </head> <body> <div class="question">?</div> </body> </html>
接下来是css代码，css代码不是必须的，我这里之所以写css代码，是为了让页面上的"?"展示的好看一点：
<style>
.question{
width:16px;
height:16px;
margin: 200px auto;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
</style>
js代码：
<script>
$('.question').poshytip({
alignTo: 'target',
alignX: 'right',
alignY: 'center',
offsetX: 5,
showOn:"hover",
content:function(){
return "最终在工程根目录生成zip文件,包含：1.表结构 2.表数据<br>"+
"3.uploads文件夹所有内容 4.tpls文件夹所有内容";
}
});
</script>
代码说明：
可以看到我引用的皮肤就是tip-yellow.css这个浅黄色主题的皮肤。
上面的代码就实现了文章教程开头的效果，poshytip结构：
上面用到了poshytip的属性，其实你可以什么属性都不用写，只需要写个content属性填充内容就可以出现效果，我之所以写了上边的几个属性，是为了给大家多展示一点poshytip的属性用法，下面我举了一些常用属性的介绍：
alignTo:可用值'cursor', 'target'，表示提示框的位置相对于鼠标，还是相对于触发元素，在上面的例子中就是相对于触发元素".question"了
alignX：可用值有'right', 'center', 'left', 'inner-left', 'inner-right'，指的是tooltip条出现在水平方向相对于参照物(cursor或target)的位置
alignY：类似alignX,可用值'bottom', 'center', 'top', 'inner-bottom', 'inner-top'
offsetX:数字，在x方向即水平方向的偏移量
offsetY:数字，类似offsetX
showOn:可用值'hover', 'focus', 'none'，默认就是hover，即鼠标悬停的时候触发工具条并显示，当为none时，工具条就不显示了，可以通过poshytip的方法来控制tooltip工具条的再显示与隐藏，比如：
$('input[name=dbPort]').focus(function(){
$('input[name=dbPort]').poshytip("hide");
});
if(!gt0Int($('input[name=dbPort]').val())){
$('input[name=dbPort]').poshytip("show");
return;
}
content：poshytip工具条中要显示的内容，默认是从元素的title属性中获取的。
方法：
show:手工显示tooltip工具条，参见上例
hide：手工隐藏，用法参见上例
更多用法请参考官方网站：http://vadikom.com/demos/poshytip/
824
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
