Tooltipプラグイン
次は、リンクにカーソルを当てた時や、テキストボックスに入力させる時に表示させるツールチップに対して、表示内容のスタイルをカスタマイズできるTooltipプラグインです。
このプラグインを使うことで、サイトの利用者に注意を喚起したり、説明をする際にインパクトを与えることができます。下記サイトからjquery.tooltip.zipをダウンロードし、解凍後、jquery.tooltipフォルダの下にあるjquery-tooltipフォルダをpluginsフォルダに配置します。
今回は、jquery-tooltipフォルダの中にある、jquery.tooltip.cssをそのまま用い、どのように表示されるのかを例にとります。
このCSSファイルを書きかえることで、ツールチップの表示内容をカスタマイズできます。リスト2に、Tooltipプラグインプラグインの使用例を示します。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tooltipサンプル</title>
<!--1.jQueryの読み込み-->
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<!--2.プラグインの読み込み-->
<script type="text/javascript" src="plugins/jquery-tooltip/jquery.tooltip.js"></script>
<!--3.CSSの設定-->
<link rel="stylesheet" href="plugins/jquery-tooltip/jquery.tooltip.css" />
<!--4.プラグインの設定-->
<script type="text/javascript">
$(function () {
$('#set1 *').tooltip();
$('#photo').tooltip({ delay: 0, showURL: false, bodyHandler: function () { return $("<img/>").attr("src", this.src); } });
});
</script>
</head>
<body>
<div id ="set1">
<h1>Tooltipサンプル</h1>
<li>リンクに対するツールチップの場合
<br /><br />
連載：<a title="jQuery UI／プラグインの活用：CodeZine（コードジン）のバックナンバー一覧です。" href="http://codezine.jp/article/corner/382">jQuery UI／プラグインの活用：CodeZine（コードジン）</a>
<br />
<br />
<a title="jQuery UIのインタラクションを使ってみよう 2010/07/27 14:00 第1回では、jQuery UIのインストールからインタラクションにあたる要素のドラッグ＆ドロップ、リサイズ、並べ替えについて取り上げます。
" href="http://codezine.jp/article/detail/5273">jQuery UI／プラグインの活用（1） </a>
<br />
<a title="jQuery UIのウィジェットを使ってみよう 2010/09/28 14:00 今回は引き続きjQuery UIの中から、Dialog、Datepicker、AutoComplete、ProgressBarの使い方を取り上げます。" href="http://codezine.jp/article/detail/5431">jQuery UI／プラグインの活用（2）</a>
<br />
<a title="jQuery UIのウィジェットを使ってみよう 2010/11/25 14:00" href="http://codezine.jp/article/detail/5514">jQuery UI／プラグインの活用（3）</a>
<br />
<a title="手軽に扱えるjQueryプラグインを使ってみよう 2011/01/06 14:00 第4回ではメニューバー、タブ、画像のスライダー、ズーム機能、Twitterのタイムライン表示といったjQuery Pluginを解説します。" href="http://codezine.jp/article/detail/5628">jQuery UI／プラグインの活用（4）</a>
<br/><br/><br/><br/>
</li>
<li>入力ボックスに対するツールチップの場合 <br/><br/>
<label>ユーザーID:</label>
<input title="ユーザーIDは6桁で入力してください。" type="text" name="action" id="username"/><br/>
<label>パスワード:</label>
<input title="パスワードは8桁以上で入力してください。" type="text" name="action" id="password"/><br/><br/><br/>
</li>
<li>ツールチップに画像を表示させる場合<br/><br/>
<img id="photo" src="plugins/jquery-tooltip/image.jpg" height="20" /><br/>
</li>
</div>
</body>
</html>
今回は、ツールチップの表示領域を「3.CSSの設定」のように、jquery-tooltipフォルダにあるjquery.tooltip.cssに指定します。ここで、文字の色や大きさなどを指定することで、表示内容のカスタマイズが可能です。
次に、プラグインの使い方は、「4.プラグインの設定」のように、表示領域のid属性を指定し、Tooltipメソッドを用います。アンカータグのtitle属性とhref属性を指定した場合の結果を図4に、フォーム要素のtitle属性を指定した場合の結果を図5に示します。
また、Tooltipメソッドの引数のbodyHandlerを指定することで、ツールチップの表示内容を変更させることが可能です。例えば、リスト3のように画像に対して適用すると、ツールチップの表示内容にその画像を表示できます。その他の引数のオプションを表2に示します。例えば、サイトで画像を多数使用している場合に、縮小表示で1ページにおさめ、それぞれの画像にカーソルをあてた時に拡大図を表示させるような使い方が考えられます。実行結果を図6に示します。
$('#photo').tooltip({ delay: 0, showURL: false, bodyHandler: function () { return $("<img/>").attr("src", this.src); } });
| 引数 | 説明 | デフォルト |
| delay | 遅延効果を適用する | 200 |
| showURL | src属性のURLを表示するかを指定 | true |
| bodyHandler | ツールチップ表示領域に対するハンドラーを指定 | 無し |
