jQuery資訊提示工具 Poshy Tip

poshy tip是一款非常友好的資訊提示工具，它基於jquery，當滑鼠滑向鏈結時，會出現乙個資訊提示條。資訊的內容直接可以在html裡設定也可以是從服務端呼叫的資料，該外掛程式還提供了很多屬性和方法。

檢視演示demo

xhtml

demo中提供了三種使用的例子，頁面**如下：

>1、id="tip1"
title="嗨。。這裡有個工具提示條！"
href="#"
>滑鼠滑上這裡看看
/>
>2、使用者名稱：
/>
id="user"
type="text"
size="30"
title="請輸入使用者名稱"
/>
/>
>3、服務端呼叫:
/>
id="remote"
href="#"
>滑鼠滑向這裡載入  

rel="stylesheet"
href="src/tip-yellow/tip-yellow.css"
type="text/css"
/>

1、基本使用：

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

$('#user').poshytip(); 

$('#remote').poshytip(); 
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資訊提示工具Poshy Tip

poshy tip是一款非常友好的資訊提示工具，它基於jquery，當滑鼠滑向鏈結時，會出現乙個資訊提示條。資訊的內容直接可以在html裡設定也可以是從服務端呼叫的資料，該外掛程式還提供了很多屬性和方法。如下提供了三種使用的例子，如下 1.滑鼠滑上這裡看看 2.使用者名稱 3.服務端呼叫 滑鼠滑向這...

jQuery 側欄與工具提示 20130726

1 效果及功能說明 當滑鼠觸及到標題就會觸發乙個側顯示框來告訴基礎資訊 2 實現原理 主要是靠偽類來觸發效果，當提示框從左邊出來，讓後顯示出上面的資訊，獲得乙個定義好的類來修改上面的字型等資訊，當滑鼠離開後自動回去，並且刪除類，當滑鼠觸及到時多有動畫停止，確保了不會有重複的出現 主要的方法 this...

如何使用jQuery建立工具提示

這是乙個使用jquery建立工具提示訊息的簡單想法。確定需要顯示工具提示訊息的 目標 建立工具提示訊息和css樣式。三個功能 showtooltips，hidetooltips，changetooltipsposition。當滑鼠進入 目標 時，使用showtooltips顯示工具提示訊息，並使用c...