一個強大，靈活的jQuery插件使您能夠輕松地創建增強CSS的強大的語義，現代的工具提示
欄目分類：效果代碼 發布日期：2014-09-11 來源： 瀏覽次數：次
1，加載jQuery和包括Tooltipster的插件文件在您下載Tooltipster，移動tooltipster css和jquery tooltipster min js到根的CSS和JavaScript的目錄。接下來，加載jQuery和包括您的標簽里面Tooltipster的CSS和JavaSc
在您下載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>前才添加下面的腳本標簽（使用任何選擇你想 - 在這種情況下，我們使用的是.tooltip類）：
- <head>
- ...
- <script>
- $(document).ready(function() {
- $('.tooltip').tooltipster();
- });
- </script>
- </head>
相關熱詞：jQuery插件
相關內容
這些是最新的
熱門關鍵詞
AE軟件 返回頂部 js模塊拖動 jQuery表單美化 偽靜態 標簽云 AdSense 彩色粉筆 js客服代碼 滾動表格 綠色版 翻頁效果 帝國CMS 交互式透明工具 slicebox Retina RangeSlider 指定位置 CSS3美化 觸摸 wamp5 頁面設計 PIGCMS 首字母轉換成大寫 vba代碼 左右滾動 百度 幻燈片配音 jQuery編輯器 圖片放大鏡熱門排行
- 手機網站WebApp頁面布局JS UI 框架App.js
- 基于Bootstrap改造的國產前端框架 H-ui
- 漂亮jQuery 3D動畫圖片輪播切換特效插件jquery.slicebox.js
- 文字橫向不間斷滾動js代碼
- 一款圖片彈出層相冊jQuery插件for jQuery or Zepto.js
- jQuery響應式手機端移動端幻燈片圖片切換特效插件slick
- jQuery刮刮卡特效插件jQuery.eraser
- 非常優秀響應式jQuery焦點圖插件bxSlider
- 實用jQuery分頁特效插件jquery.pagination.js
- 實用的jQuery網頁元素固定導航置頂插件StickUp