首頁 > 開發者 > JavaScript
jQuery外掛程式Tooltipster實現漂亮的工具提示，jquerytooltipster
Tooltipster是一個輕量級的jQuery工具提示外掛程式，可以快速的協助你產生漂亮的工具提示。
1，載入jQuery和包括Tooltipster的外掛程式檔案
在您下載Tooltipster，移動tooltipster.css和jquery.tooltipster.min.js到根的CSS和JavaScript的目錄。接下來，載入jQuery和包括您的標籤裡面Tooltipster的CSS和JavaScript檔案：
<head> ... <link rel="stylesheet" type="text/css" href="css/tooltipster.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script> <script type="text/javascript" src="js/jquery.tooltipster.min.js"></script> ... </head>
2，設定你的HTML
為了Tooltipster工作，我們首先需要添加.tooltip類（或任何類別/選擇意味著你想使用）的任何元素，我們希望有一個工具提示。接下來，我們將設定標題屬性，無論我們希望我們的提示說。下面是一些例子：
添加工具提示的映像：
複製代碼 代碼如下:
<img src="my-image.png" class="tooltip" title="This is my image's tooltip message!" />
添加工具提示已經有一個類的連結：
複製代碼 代碼如下:
<a href="http://calebjacob.com" class="ketchup tooltip" title="This is my link's tooltip message!">Link</a>
添加工具提示一個div：
複製代碼 代碼如下:
<div class="tooltip" title="This is my div's tooltip message!">
This div has a tooltip when you hover over it!
</div>
3，啟用Tooltipster
我們要做的最後一件事就是啟用外掛程式。要做到這一點，你的結束</ head>前才添加下面的指令碼標籤（使用任何選擇你想 - 在這種情況下，我們使用的是.tooltip類）：
<head> ... <script> $(document).ready(function() { $('.tooltip').tooltipster(); }); </script> </head>
總結：
1.工具提示支援HTML標籤內容
2.輕量級
3.靈活高效
4.樣式定義簡單，100%的CSS
5.支援3種主題
6.支援firefox，Chrome，IE7/8/9，Opera，Safari
以上所述就是本文的全部內容了，希望大家能夠喜歡。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
