jQuery UI逆引きリファレンス
Tooltipウィジェットでツールチップを表示するには？
対象要素にマウス・ポインターを当てるとポップアップするツールチップを実装できるTooltipウィジェットの基本的な使い方を解説。
jQuery UIとは？
jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザーインターフェイス（UI）に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス： jQuery UIを利用するには？」を参照してください。
ツールチップとは、対象となる要素にマウス・ポインターを当てることでポップアップできる小さなテキストのこと。Tooltipウィジェットは、そのようなツールチップを実装するためのウィジェットです。本文テキストに対してちょっとした註を加えたい場合、入力フォームなどでヒントを表示させたい場合などに利用します。
誤解のしようもないシンプルなウィジェットなので、さっそく具体的な例を見ていきましょう。以下は、Tooltipウィジェットを利用して、アンカータグ（＝<a>タグ）にマウス・ポインターを当てると、title属性で記載された内容をポップアップ表示する例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Tooltipウィジェット</title>
<link type="text/css" rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
// 2ツールチップ機能を適用
$('#main').tooltip();
});
</script>
</head>
<body>
<!--1ツールチップ用のテキストを準備-->
<div id="main">
<a href="#" title="John Resig氏によって開発されたJavaScriptの軽量ライブラリ">jQuery</a>の仕組みから、プラグインの使い方、イベントの実装とカスタマイズの方法まで、わかりやすく丁寧に解説します。とくにWeb制作の現場でよく使う<a href="#" title="文書から要素を取り出すためのしくみ">セレクター</a>やメソッドを厳選しました。動きのあるリッチなUIの作り方が簡単に身に付きます。また、骨組みが用意された<a href="#" title="著者サポートサイトからダウンロードが可能です。">サンプルファイル</a>に対して、必要なコードだけを入力しながら、効率よく学べます。
</div>
</body>
</html>
|
Tooltipウィジェットを利用するには、対象の要素に対してtitle属性でツールチップに表示すべきテキストを用意し（1）、tooltipメソッドを呼び出すだけです（2）。ここでは「$('#main')」としていますので、<div id="main">要素配下でtitle属性を持つ要素だけがツールチップ化の対象となりますが、例えば「$(document)」とすることでページ全体をツールチップ化の対象にもできます。
Tooltipウィジェットで利用可能なパラメーター
tooltipメソッドには、ハッシュ形式で以下のようなパラメーターを指定できます。
（1）show／hideパラメーター
ツールチップが表示／非表示される時に適用されるアニメーションを指定します。設定値は、いずれかの型で指定できます。
| 型 | 概要 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Boolean | falseでエフェクトを無効化 | ||||||||||
| Number | エフェクトの所要時間（ミリ秒） | ||||||||||
| String | エフェクト名（詳細は、別稿「jQuery UIで拡張されたエフェクト機能を利用するには？」を参照） | ||||||||||
| Object | エフェクトの個別パラメーター
|
easingパラメーターで指定できる値については、Easingsに、変化をグラフで表現したものも併せて掲載されていますので、参考にしてください。
以下は、show／hideパラメーターを指定した例です。
|
$('#main').tooltip({
// 表示時のエフェクトを無効化
show: false,
// 非表示時のエフェクトをObject型で指定
hide: {
effect: 'explode',
delay: 500,
duration: 5000,
easing: 'easeInBounce'
}
});
|
（2）positionパラメーター
ツールチップの表示位置を、以下のようなキーを持つハッシュ形式で示します。
| キー名 | 概要 | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| my | 自分自身の位置 | ||||||||
| of | 位置の基点となる要素 | ||||||||
| at | 基点要素の位置 | ||||||||
| collision | 画面からあふれる場合の表示
|
デフォルト値は、「{ my: "left top+15", at: "left bottom", collision: "flipfit" }」なので、ツールヒントは対象要素の左下15pxの位置に表示されます。
もしもこれを「対象の要素の右下とツールヒントの左上が接するように」表示するならば、以下のように表します。
|
$('#main').tooltip({
position: {
my: 'left top', at: 'right bottom', collision: 'none'
}
});
|
（3）trackパラメーター
trueに設定した場合、対象の要素内でマウス・ポインターが動くと、対応してツールチップの表示も移動します。デフォルトはfalseです。
※以下では、本稿の前後を合わせて5回分（第20回～第24回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
20. Selectableウィジェットで選択可能なリストを作成するには？
マウス・クリックによる単一選択や、マウス・ドラッグによる範囲選択などが実現できるSelectableウィジェットの基本的な使い方を解説。
21. Draggable／Droppableウィジェットでドラッグ＆ドロップ機能を実装するには？
ページ上の指定された要素をマウスでドラッグ＆ドロップできるようにするDraggable／Droppableウィジェットの基本的な使い方を解説。
23. 【現在、表示中】≫ Tooltipウィジェットでツールチップを表示するには？
対象要素にマウス・ポインターを当てるとポップアップするツールチップを実装できるTooltipウィジェットの基本的な使い方を解説。
24. ツールチップへの表示内容をカスタマイズするには？
画像を含んだツールチップを表示したり、Ajax経由でツールチップの内容を取得したりできるTooltipウィジェットのパラメーターの指定方法を紹介。
