添加幫助彈出框

Question

我想添加有關我的web應用程序中某些項目的「幫助」信息。用戶將光標移至該項目，幫助將顯示在彈出框或小窗口中。有沒有人有一個很好的例子顯示在jQuery或JavaScript？

Answer 1

你的問題是相當開放的，但你可以有一個最初隱藏DIV，其內容和位置是動態的：

<div id="tooltip" style="display:none; position: absolute; z-index: 1000"></div> 

的Z-index屬性是確保DIV的知名度。當然，價值取決於你是否有其他元素具有更高的Z指數。

然後，你可以創建幾個JS功能：用於顯示DIV一個，另一個用於hidding它：

function showTooltip (content, x, y) { 
    $('#tooltip') 
     .html(content) 
     .css({left: x, top: y}) 
     .show(); 
} 
function hideTooltip() 
{ 
    $('#tooltip').hide(); 
} 

職能將由鼠標事件被觸發，例如（mousenter，鼠標離開.. ）。 當然，DIV的審美可以通過CSS進行調整。

Answer 2

這裏是JQuery的工具提示插件列表：

• tipsy
• qTip2
• TipTip
• PowerTip
• clueTip

Answer 3

這也是一個不錯的插件來爲新用戶

jquery-joyride