jQueryプラグイン eztipの使い方をサンプルを使いながら説明します。
まず、前ページの一番下にあるダウンロードリンクからeztipプラグインのアーカイブをダウンロードします。ダウンロードしたものを自分のサーバーに設置します。設置場所に特に制限はありませんので、他のjavascriptやjQueryのプラグインなどと同じ場所にでもコピーしておけばよいと思います。
インストール
ダウンロードしたアーカイブに含まれるファイルのうち、インストールする必要があるのは以下のファイルです。- jquery.eztip.js
Javascriptプログラム
- stylesheets/jquery.eztip.css
CSSファイル
- images/balloon*.png (全6ファイル)
balloonスタイル用イメージ
但し、balloonスタイル用イメージファイルはballoonスタイルを使わない場合は不要です。これらのファイルを自分の環境にあわせて適当な場所にコピーします。この際、balloonスタイル用イメージファイルは、jquery.eztip.cssのスタイルシートでは相対URLを使って「../images/balloonXXXX.png」のように指定されていますのでインストールする場所のURLに合わせてこの部分を変更してください。
スクリプトの組み込み
eztipを使えるようにするためにJavascriptとCSSファイルの2つを使用したいHTMLのページのヘッダー部に組み込みます。対象となるHTMLを記述
この例では全て、tooltipと言うクラスを使用しています。jQueryのセレクタになるものであれば何でも大丈夫ですので、クラスでなくてもIDでもタグ自体でも対象として指定することは可能です。サンプル1 （タイトル＋データ）
- <a title="タイトル1|ここはtitleに記述したデータです(1)" class="tooltip">サンプル1</a>（タイトル＋データ）
サンプル2 （タイトルのみ）
- <a class="tooltip" title="タイトル2">サンプル2</a>（タイトルのみ）
サンプル3 （データのみ）
- <a class="tooltip" title="|ここはtitleに記述したデータです(3)">サンプル3</a>（データのみ）
eztipはもちろんアンカー以外のタグでも使うことができます。
サンプル8 (p要素：タイトルもデータも有り)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla turpis, malesuada vitae, congue iaculis, congue et, metus. Donec commodo lectus eu metus.
- <p title="タイトル8|ここはtitleに記述したデータです(8)" class="tooltip">サンプル8 (p要素：タイトルもデータも有り)<br/>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla turpis, malesuada vitae, congue iaculis, congue et, metus. Donec commodo lectus eu metus. </p>
サンプル9 (span要素：タイトルもデータも有り)
- <span title="タイトル9|ここはtitleに記述したデータです(9)" class="tooltip">サンプル9(span要素：タイトルもデータも有り)</span>
サンプル10 (div要素：タイトルのみ)
- <div title="タイトル10" class="tooltip">サンプル10 (div要素：タイトルのみ)</div>
eztipをコールする
あとやらなければならない事は、eztipをコールすることです。これは他のjQueryプラグインと同様にページヘッダに記述するready関数部に記述します。となります。この例では、tooltipクラスのa(アンカー)タグを対象としています。
バルーンスタイルにする場合には、eztip({balloon:true});としてパラメータballoonにtrueを渡してください。