15 款Tooltip工具提示jQuery插件分別是什么

今天就跟大家聊聊有關(guān)15 款Tooltip工具提示jQuery插件分別是什么，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

tooltip或者infotip或者h(yuǎn)int，是一種常見的圖形用戶界面元素。它用于連同一個(gè)光標(biāo)，通常是一個(gè)鼠標(biāo)光標(biāo)。當(dāng)用戶將鼠標(biāo)懸停在一個(gè)特定的地方，無需點(diǎn)擊，就會(huì)出現(xiàn)一個(gè)包含關(guān)于懸停到這個(gè)地方的一些信息的tooltip或小的懸浮框。

jQuery tooltip是應(yīng)該考慮在網(wǎng)頁設(shè)計(jì)和開發(fā)中利用的構(gòu)件之一。Tooltip提供了額外的功能和通用型，可以被視為大多數(shù)網(wǎng)站的最重要的一個(gè)用戶界面組件。

我收集了15個(gè)***的jquery  tooltip插件，這些可以幫助你創(chuàng)建創(chuàng)新的和有創(chuàng)造性的網(wǎng)頁設(shè)計(jì)，同時(shí)也可以幫助你來實(shí)現(xiàn)你的web項(xiàng)目所需要的結(jié)果。我希望這個(gè)jquery  tooltip插件的列表對(duì)你即將到來或已經(jīng)開始的web項(xiàng)目提供了便利并且是確實(shí)有用的。

1. Tooltipster

Tooltipster是一個(gè)jQuery插件，用來快速創(chuàng)建HTML5驗(yàn)證的靈活的提示工具。這個(gè)插件很?。?.8kb大小），工作很快并且可以很容易的被定制。外觀可以隨意改變CSS（支持主題）和鼠標(biāo)箭頭的位置，展現(xiàn)的延遲/時(shí)間都可以被定義。

Source

2. Toolbar.js

Toolbar.js允許你快速創(chuàng)建用于web應(yīng)用程序和網(wǎng)站的提供工具類型的工具欄。這個(gè)工具欄可以很容易的用twitter啟動(dòng)圖標(biāo)定制，還提供自適應(yīng)的環(huán)繞在工具欄周圍顯示一些圖標(biāo)。

Source

3.qTip2

qTip2是第二代先進(jìn)的qTip插件，這是一個(gè)曾經(jīng)很流行的jQuery框架。在1.0版本的友好的用戶和豐富的功能的基礎(chǔ)上，qTip2提供了一些增強(qiáng)的功能，比如氣泡提示、影像映射等等。它是完全免費(fèi)的，許可是MIT/GPLv2。

Source

4. Poshy Tip jQuery Plugin

Poshy Tip jQuery Plugin是一個(gè)提示框插件，允許輕松創(chuàng)建時(shí)尚的提示框。通過Poshy Tip你可以把提示相對(duì)于鼠標(biāo)光標(biāo)或目標(biāo)元素來定位，并可以將它們橫向或縱向展示。

Source

5. Grumble.js

Grumble.js提供了一個(gè)沒有東西南北定位限制的特殊的提示框。它可以從360度的任何角度環(huán)繞一個(gè)給定的元素，可以指定任意的距離。

Source

6. Joyride

Joyride是一個(gè)jQuery的插件，簡化了指導(dǎo)用戶發(fā)現(xiàn)一個(gè)網(wǎng)站的特點(diǎn)的過程。通過定義一個(gè)有序的步驟，可以在任何HTML元素附近通過提示框顯示需要的信息。

Source

7. ImageMapster

ImageMapster是一個(gè)可以通過添加更多地功能給舊圖片來讓它們更有生氣的jQuery插件。使用這個(gè)插件，可以通過各種方式突出顯示、選擇（單個(gè)或多個(gè)區(qū)域）和操縱任何的圖像。提示工具可以顯示用戶友好的可以與該圖像互動(dòng)的信息。

Source

8. Tooltipsy

Tooltipsy是一個(gè)提供了創(chuàng)建提示工具的靈活基礎(chǔ)的jQuery插件。它有最小的默認(rèn)樣式或動(dòng)畫，你都可以完全控制它們。它可以按你希望的方式來定位，外觀和感覺均可以通過CSS來定制，任何類型的動(dòng)畫都可以被實(shí)現(xiàn)。

Source

9. jQuery Bubble Popup

jQuery Bubble  Popup是一個(gè)用來幫助創(chuàng)建容易控制的別致Tooltip的***的JS框架的插件。Tooltip通過淡入淡出的方式顯示/隱藏，里面也可以顯示任何 的HTML內(nèi)容。它們可以附加到任何一邊的一個(gè)元素中，也可以獲取Tooltip的狀態(tài)（開/關(guān)，創(chuàng)建，***一次修改或***一次顯示的時(shí)期時(shí)間）而采取相 應(yīng)的動(dòng)作。

Source

10. Beauty Tips

BeautyTips是一個(gè)使用canvas元素來實(shí)時(shí)繪制Tooltip的jQuery插件。每一個(gè)Tooltip默認(rèn)顯示在一個(gè)元素的有足夠空間的一邊，但是這個(gè)位置也可以強(qiáng)制放到一邊。內(nèi)容可以硬編碼進(jìn)去，或者從一個(gè)屬性獲取或者通過一次Ajax請(qǐng)求獲取。

Source

11. Simpletip

Simpletip是一個(gè)新生的輕量級(jí)的創(chuàng)建靈活的Tooltip的jQuery插件。Tooltip可以附加到任何的元素 & 輕松風(fēng)格的演示 & 定位。Tooltip可以是靜態(tài)的、動(dòng)態(tài)的或者通過Ajax加載的。另外，可以應(yīng)用任何組合的效果來使它們更有吸引力。

Source

12. Colortip

它將在你頁面中元素的title屬性轉(zhuǎn)換為一系列豐富多彩的Tooltip。共有六個(gè)可用的顏色主題，所以你可以很容易的匹配你的設(shè)計(jì)。你也可以輕松 地通過添加三個(gè)額外的樣式類到你的stylesheet和在colortip-1.0-jquery.js中的支持顏色數(shù)組中添加一個(gè)元素來創(chuàng)建你自己的 Tooltip。

Source

13.TipTip

TipTip是一個(gè)非常輕量級(jí)和智能的自定義Tooltip的jQuery插件。它使用零圖像，并且是通過CSS完全可定制的。TipTip會(huì)檢測瀏 覽器窗口的邊緣以確保tooltip停留在當(dāng)前窗口的大小。因此Tooltip將調(diào)整自身來顯示在要使用TipTip的元素的上下左右，這取決于要保持在 瀏覽器窗口中的哪些是必要的。

Source

14. (Mb) Tooltip

(mb)Tooltip是為你的使用jQuery的頁面提供的一個(gè)美麗的tooltip。只需很簡單的將你的內(nèi)容作為title屬性的值，然后你就可 以用這個(gè)聰明的漂亮的tooltip代替那丑陋的默認(rèn)tooltip了。你也可以隨時(shí)禁用或啟用(mb)Tooltip。

Source

15. Hovercard

這是一個(gè)免費(fèi)的輕量級(jí)jQuery插件，可以讓你使用懸停的label、link或任何你選擇的html元素來顯示相關(guān)聯(lián)的信息。hovercard 可以用在顯示個(gè)人簡歷、書籍作者和價(jià)格，通過Ajax加載相關(guān)聯(lián)的信息，直接編輯等場景下。你也可以添加你的自定義數(shù)據(jù)源，使用已有的card格式來顯示 分析的數(shù)據(jù)。

看完上述內(nèi)容，你們對(duì)15 款Tooltip工具提示jQuery插件分別是什么有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。