ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery プラグイン Tooltipster は美しいツール Tips_jquery を実装します

jQuery プラグイン Tooltipster は美しいツール Tips_jquery を実装します

WBOYオリジナル: 2016-05-16 16:04:471636ブラウズ

Tooltipster は、美しいツールチップを迅速に生成できる軽量の jQuery ツールチッププラグインです。

1. Tooltipster を含む jQuery およびプラグインファイルをロードします

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 クラス (または使用したいカテゴリ/選択手段) を、ツールチップを含めたい要素に追加する必要があります。次に、プロンプトに表示したい内容を title 属性に設定します。以下にいくつかの例を示します:
ツールチップを追加する画像:

コードをコピーしますコードは次のとおりです:

fc599c3021ff9efc0b48609bcd4a1ba1

既にクラスがあるツールチップへのリンクを追加します:

コードをコピーしますコードは次のとおりです:

632e45927a9a2930a01d226cf24103fbリンク5db79b134e9f6b82c0b36e0489ee08ed

div にツールチップを追加します:

コードをコピーしますコードは次のとおりです:

62802005c82bd6b3830b4ce521e1f800 この div にカーソルを置くとツールチップが表示されます

16b28748ea4df4d9c2150843fecfba68

3、ツールチップスターをアクティブ化します

最後に行う必要があるのは、プラグインを有効にすることです。これを行うには、終了タグ 9c3bca370b5104690d9ef395f2c5f8d1 の直前に次のスクリプトを追加します (任意のオプションを使用します - この場合は .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 をサポート

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：javascript_javascript スキルの基本的なパッケージ化タイプの紹介次の記事：javascript_javascript スキルの基本的なパッケージ化タイプの紹介

続きを見る

jQuery プラグイン Tooltipster は美しいツール Tips_jquery を実装します

関連記事