jQuery プラグイン Tooltipster は美しいツール Tips_jquery を実装します-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 16:04:47

オリジナル

1670 人が閲覧しました

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 属性に設定します。以下にいくつかの例を示します:
ツールチップを追加する画像:

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

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

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

" class="ketchup tooltip" title="これは私のリンクのツールチップメッセージです!">リンク

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

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

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

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

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