這期內容當中小編將會給大家帶來有關jQuery信息提示工具是怎樣的，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
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" />
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')，手動觸發啟用提示工具條
上述就是小編為大家分享的jQuery信息提示工具是怎樣的了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
