jQuery信息提示工具[Poshy Tip]

Poshy Tip是一款非常友好的信息提示工具，它基於jQuery，當鼠標滑向鏈接時，會出現一個信息提示條。信息的內容直接可以在HTML里設定也可以是從服務端調用的數據，該插件還提供了很多屬性和方法。

 

Demo中提供了三種使用的例子，頁面代碼如下：

 

<p>1、<a id="tip1" title="嗨。。這里有個工具提示條！" href="#">鼠標滑上這里看看</a></p> 
<br/> 
<p>2、用戶名：<br/><input id="user" type="text" size="30" title="請輸入用戶名" /></p> 
<br/> 
<p>3、服務端調用:<br/> 
  <a id="remote" href="#">鼠標滑向這里加載圖片</a> 
</p> 

當然，別忘了要加載jquery庫和poshytip插件以及相關樣式。

<script type="text/javascript" src="js/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" /> 

jQuery：

1、基本使用：

 $("#tip1").poshytip(); 

2、表單提示：當輸入框獲得焦點時，在右側會出現提示工具條

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

3、服務端調用：通過調用服務端ajax.php，獲得返回數據

 
$('#remote').poshytip({ 
    alignY: 'bottom', 
    content: function(updateCallback) { 
        $.get('ajax.php?id=1',function(msg){ 
            updateCallback(msg); 
        }); 
        return 'Loading...'; 
    } 
}); 

　　

參數和方法一覽表

參數/方法	描述
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')，手動觸發啟用提示工具條