簡單實用jQuery poshytip

jQuery Poshytip是一塊提示性的插件，可以用來提示用戶操作，提高用戶體驗

1. 首先去poshytip官網下載插件 http://vadikom.com/demos/poshytip/

2. 必須引入的是jQuery的js文件和poshytip的js文件和css文件

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

4. <script type="text/javascript">
   $(document).ready(function(){
   	$("#tip1").poshytip({
   		alignX: 'left', 
   		content:'<input type="text" name="a" value="a標簽的提示" />'
   	});
   	$("#username").poshytip({
   		className: 'tip-yellow',
   		content:'提示內容',
   		showOn: 'focus', 
   		alignTo: 'target', 
   		alignX: 'right', 
   		alignY: 'center', 
   		offsetX: 10,
   		showTimeout:1
   	});
   });
   </script>

5. <a id="tip1" title="這是個工具" href="#">移去看看</a>
   <input type="text" name="username" id="username" />

   
   

6. 這樣子的話基本就可以完成啦，下面提供參數和方法表

   
   

7. 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方向位移，數字
   hideTimeout	工具條消失的過渡時間

   
   

   hideTimeout	工具條消失的過渡時間
   hideTimeout	工具條消失的過渡時間
   offsetY	相對Y方向位移，數字
   allowTipHover	允許鼠標滑向工具條上方
   fade	是否使用漸隱漸顯動畫，true/false
   slide	是否使用滑動動畫，true/false
   方法：show	.poshytip('show')，手動觸發顯示提示工具條
   方法：hide	.poshytip('hide')，手動觸發隱藏提示工具條
   方法：disable	.poshytip('disable')，手動觸發禁用提示工具條
   方法：enable	.poshytip('enable')，手動觸發啟用提示工具條