2010-01-07 63 views
14

我正在尋找輕量級的輕量級工具提示輕量級jQuery腳本,並且可以方便地與圖像映射一起使用......理想情況下,它會自動將每個區域標記的「標題」作爲提示。這是一個問題的原因是我有數百個區域(它是一個世界地圖),並且每個工具提示的一行代碼很快就會以文件大小加起來。jQuery輕量級工具提示腳本推薦

qTip可以做到這一點......但它的38kb ......這甚至比jQuery本身還要多。任何建議?

回答

1

我使用富有想象力的「jQuery Tooltip」:demo here。適用於圖像映射,並且可以使用CSS輕鬆定製。

(巧合的是,我嘗試qTip與圖像映射,並與Map Hilight插件結合時發現了一個奇怪的錯誤)。

+0

Phew ...我使用的地圖Hilight插件太:D ...你可能爲我節省了很多時間 – Mark 2010-01-07 12:47:41

+2

@Mark:如果你有興趣,這就是我用它建立的 - http:// www.simpsoncrazy.com/characters/poster – DisgruntledGoat 2010-01-20 12:34:09

2

vTip可能是一個很好的候選人(見demo)。這有點過時了,但它很簡單,應該可以工作。

您只需在其上添加class =「vtip」來標記您的DOM元素,例如,

<a href="#" title="Tooltip content" class="vtip">Tooltip test</a> 

未壓縮的JS文件只有4KB。

如果您想以更動態的方式處理您的工具提示,請考慮creating your own simple tooltips

2

PowerTip

http://stevenbenner.github.io/jquery-powertip/

PowerTip採用了非常靈活的設計,很容易定製

  • 支持靜態提示以及提示跟隨鼠標
  • 能夠讓用戶鼠標在工具提示上並與其內容交互
  • 鼠標跟隨工具提示有限制斯內德瀏覽器窗口
  • 輕量級JS〜10KB,CSS〜2KB

醉意

http://onehackoranother.com/projects/jquery/tipsy/

它使用Twitter的,Github上,Slideshare的和到位桶,等等。

  • 輕量級JS〜10KB,CSS〜2KB
+0

感謝您在這個3歲老問題中的更新,powertip就是我需要的:) – s3m3n 2013-05-13 23:03:33

0

研究沒有回答這個問題的大後給了我滿意。

我需要一個解決方案,是輕量級,不放棄的是醉了(最後更新年前,筆者忽略63 bug修復拉請求),我可以使用作爲典型的工具提示爲線索對懸停表單字段,但也爲動態字段驗證表單提交後。

真是好一個是前面提到的PowerTip,但它最大的問題:你只能有一個明顯的提示一次。對我來說,它的取消資格,我檢查資源,這是筆者的基本假設 - 只有一個提示一次,對所有的提示等

一個單一的DOM對象Tooltipster

失去一個小時,我發現解決方案之後,是正是我需要的:Tooltipster。這真的很容易實現(非常類似於PowerTip),但它可以讓你準備並立即顯示出許多提示。另一個優點是完全不使用圖像的事實,這只是JS(〜12K)和CSS。

希望這可以節省很多小時的研究給某人。