1. 首頁
  2. 問答
  3. 關於jQuery工具提示的建議

關於jQuery工具提示的建議

2009-02-12 84 views
18

我正在尋找jQuery的工具提示插件，它允許以下類型的行爲。關於jQuery工具提示的建議

<a href="somewhere.html"> 
<span> 
    <img src="someimage.jpg" style="display: none;" /> 
    Here is the tooltip content. 
</span> 
Here is the link to somewhere. 
</a>

，我希望的行爲是懸停在「這裏是鏈接到的地方」，有一個提示彈出顯示含有「someimage.jpg」跨度的內容和「這裏是提示內容」。

我更喜歡工具提示跟蹤鼠標在鏈接上的移動，並且工具提示的背景顏色（不透明度，邊框顏色等）是可配置的。

我發現的兩個最受歡迎的工具提示「clueTip」和JörnZaefferer的「工具提示」似乎並不符合法案，除非我錯過了某些東西。

最終，鏈接和圖像將被動態生成。

來源

2009-02-12 jerome

回答

4

大風扇是否必須是jQuery的？如果你喜歡，你可以用CSS來做。

a.info 
{ 
    position: relative; 
    z-index: 24; 
} 

a.info:hover 
{ 
    z-index: 25;  
} 

a.info span 
{ 
    display: none; 
} 

a.info:hover span 
{ 
    display: block; 
    position: absolute; 
    top: 2em; 
    left: 2em; 
    width: 15em; 
    padding: 6px; 
    border: 1px solid black; 
    background-color: #eeeeee; 
    color: #000; 
}

然後，您可以像使用它一樣使用它。

<a href="somewhere.html" class="info"> 
<span> 
    <img src="images/someImage.jpg" /> 
    Here is the tooltip content. 
</span> 
Here is the link to somewhere. 
</a>

編輯

閱讀我每天的博客this article的劑量來到我的注意。他們創建了一個jQuery插件，可以隨心所欲地彈出一個圖像，並帶有樣式選項和鼠標移動。看看這裏的結果。

http://james.padolsey.com/demos/imgPreview/full/

您應該能夠要麼按照教程寫插​​件或下載示例插件。

來源

2009-02-12 21:25:07 Jab

+0

權。實際上，我們在現在正在開發的網站上使用類似的東西。我有興趣能夠讓工具提示跟蹤鼠標的移動。謝謝。 – jerome 2009-02-12 21:45:54

+0

嗯。這在IE6中似乎不能正常工作。 – jerome 2009-02-12 22:08:07

+0

看看我的編輯，我想這可能就是你正在尋找的。 – Jab 2009-02-13 14:31:41

0

我也製作了a jQuery plugin for tooltips - 它非常小 - 縮小了5KB，非常容易設置和使用，並且有很多配置選項;它會將提示放置在視口內，而不管垂直/水平滾動或窗口大小;寬度和背景顏色可以在初始化時更改。它沒有使用任何圖像 - 它對所有花哨的東西都使用CSS，並且適用於舊版瀏覽器。它的工作原理，即使在IE6 :)，默認情況下，它看起來像這樣：

Screenshot

來源

2013-04-28 18:20:43

相關問題

 相關問題