Tooltip as toolbar：jQuery，CSS或...？

我想使用工具提示作爲工具欄，並希望獲得關於這樣做的最佳方式的一些建議。Tooltip as toolbar：jQuery，CSS或...？

這裏是我的要求：

實現在CSS或的jQuery（或兩者）
工具提示示出了後一兩秒鐘懸停
工具提示的有進一步UI按鈕
在mouseout上，工具提示仍然可見一秒
工具提示上都觸發元件的mouseover保持可見和工具提示本身
工具提示可以包含HTML

這裏是想我做的一個例子：

alt text

來源

2010-09-21 Josh Smith

只是一個提示，也考慮到越來越多的觸摸設備，爲此，懸停不觸發。也許單擊/觸摸可能會觸發工具欄？ – mkoistinen 2010-09-21 21:33:22

我同意在觸控平臺的進步，我會通過創建一些瀏覽器/平臺指定創建這兩種情況（如果適用於您的觀衆和預算）。 – taylorjes 2010-09-21 21:39:04

@mkoistinen，謝謝你的提示！順便說一句，你知道iPad（即移動Safari）是否仍然不能和'contentEditable'一起玩嗎？ – 2010-09-21 22:44:05

結帳Prototip特別是隱藏式模式在演示中滿足您的要求。

有很多，你可以從here

來源

2010-10-02 07:49:31

我從來沒有編寫過自己的代碼，但我之前從flowplayer.org使用過this one。有很多設置和配置。

來源

2010-09-21 21:34:23 taylorjes

是的，泰勒傑斯是對的。 tooltip info/download請務必注意，您可以在此工具提示中包含HTML。這意味着你可以包含點擊事件等按鈕。我毫不懷疑你可以根據你的需求調整它。

工具提示圖像可以自定義或使用其中一個非常好。

這裏是我的一個例子：

在JavaScript

：

$("#toolTipBusinessInfo img[title]").tooltip({ effect: 'slide' });

在HTML：

<div id="toolTipBusinessInfo" class="pageTitleContainer"> 
          <div style="float: left"> 
           Business Information</div> 
          <img style="float: left" src="images/question-mark.jpg" alt="?" width="25px" height="25px" 
           title="<p><b>Business Information</b></p>The legal name of the business refers to the name that is reflected on the business license and the name that is used for legal purposes. Legal address reflects the legal address that is used for legal purposes also." /> 
         </div>

看起來是這樣的：

alt text