poshytip漂亮的表单提示插件

Poshy Tip 是一个强大的jQuery 工具提示插件，拥有不同的外观。作为 Form Tooltips使用时，可以自定义气泡出现的位置。

分类：悬浮层/弹出层 > 悬浮层难易：初级

查看演示下载资源下载积分： 46 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

HTML

首先记得加载jQuery库和poshytip相关插件：

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="src/jquery.poshytip.js"></script> 
<link rel="stylesheet" href="src/tip-yellow/tip-yellow.css" type="text/css" />

我们提供了两种使用的例子，HTML代码如下：

<p>
    1、
    <a id="tips" title="我是不是很漂亮啊！~" href="#">
        滑动这里有惊喜哦~
    </a>
</p>
<p>
    2、邮箱：
    <br/>
    <input id="email" type="text" size="30" title="请正确输入您的邮箱" />
</p>

1、基本使用：

$("#tips").poshytip({allowTipHover: true});

2、表单提示：当输入框获得焦点时，在右侧会出现提示工具条

$('#email').poshytip({
    className: 'tip-yellowsimple',
    showOn: 'focus',
    alignTo: 'target',
    alignX: 'right',
    alignY: 'center',
    offsetX: 5
});

poshytip相关参数

参数	描述	默认值
content	提示工具条中的内容，默认是从元素的title属性中获取。	-
className	提示工具条的样式	-
showTimeout	提示工具条出现前的过渡时间	-
hideTimeout	提示工具条消失的过渡时间	-
showOn	提示工具条触发方式，有'hover', 'focus', 'none'三种方式	-
alignX	提示工具条出现在水平方向相对当前元素的位置，有'right', 'center', 'left', 'inner-left', 'inner-right'	-
alignY	提示工具条出现在垂直方向相对当前元素的位置，有'bottom', 'center', 'top', 'inner-bottom', 'inner-top'	-
offsetX	相对X方向位移，数字	-
offsetY	相对Y方向位移，数字	-
allowTipHover	允许鼠标滑向工具条上方	-
fade	是否使用渐隐渐显动画，true/false	-
slide	是否使用滑动动画，true/false	-
方法：show	.poshytip('show')，手动触发显示提示工具条	-
方法：hide	.poshytip('hide')，手动触发隐藏提示工具条	-
方法：disable	.poshytip('disable')，手动触发禁用提示工具条	-
方法：enable	.poshytip('enable')，手动触发启用提示工具条	-