jQuery插件Tooltipster實作漂亮的工具提示

jQuery插件Tooltipster實作漂亮的工具提示_jquery

WBOY

發布： 2016-05-16 16:04:47

原創

1616 人瀏覽過

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類別（或任何類別/選擇意味著你想使用）的任何元素，我們希望有一個工具提示。接下來，我們將設定標題屬性，無論我們希望我們的提示說。以下是一些例子：
新增工具提示的影像：

複製程式碼程式碼如下:

新增工具提示已經有一個類別的連結：

複製程式碼程式碼如下:

http://calebjacob.com" class="ketchup tooltip" title="This is my link's tooltip message!">Link

新增工具提示一個div：

複製程式碼程式碼如下:

3，啟動Tooltipster

我們要做的最後一件事就是啟動外掛。要做到這一點，你的結束前才添加下面的腳本標籤（使用任何選擇你想 - 在這種情況下，我們使用的是.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

以上所述就是本文的全部內容了，希望大家能夠喜歡。

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

jQuery插件Tooltipster實作漂亮的工具提示_jquery