Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery UI逆引きリファレンス

jQuery UI逆引きリファレンス

Tooltipウィジェットでツールチップを表示するには?

2013年12月19日

対象要素にマウス・ポインターを当てるとポップアップするツールチップを実装できるTooltipウィジェットの基本的な使い方を解説。

  • このエントリーをはてなブックマークに追加

jQuery UIとは?

 jQuery UIは、jQueryを拡張するライブラリ(プラグイン)の一種で、名前のとおり、ユーザーインターフェイス(UI)に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス: jQuery UIを利用するには?」を参照してください。

 ツールチップとは、対象となる要素にマウス・ポインターを当てることでポップアップできる小さなテキストのこと。Tooltipウィジェットは、そのようなツールチップを実装するためのウィジェットです。本文テキストに対してちょっとした註を加えたい場合、入力フォームなどでヒントを表示させたい場合などに利用します。

 誤解のしようもないシンプルなウィジェットなので、さっそく具体的な例を見ていきましょう。以下は、Tooltipウィジェットを利用して、アンカータグ(=<a>タグ)にマウス・ポインターを当てると、title属性で記載された内容をポップアップ表示する例です。

HTML
<!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.html)
リンクにマウス・ポインターを当てると、ツールチップを表示

 Tooltipウィジェットを利用するには、対象の要素に対してtitle属性でツールチップに表示すべきテキストを用意し(1)、tooltipメソッドを呼び出すだけです(2)。ここでは「$('#main')」としていますので、<div id="main">要素配下でtitle属性を持つ要素だけがツールチップ化の対象となりますが、例えば「$(document)」とすることでページ全体をツールチップ化の対象にもできます。

Tooltipウィジェットで利用可能なパラメーター

 tooltipメソッドには、ハッシュ形式で以下のようなパラメーターを指定できます。

(1)show/hideパラメーター

 ツールチップが表示/非表示される時に適用されるアニメーションを指定します。設定値は、いずれかの型で指定できます。

概要
Boolean falseでエフェクトを無効化
Number エフェクトの所要時間(ミリ秒)
String エフェクト名(詳細は、別稿「jQuery UIで拡張されたエフェクト機能を利用するには?」を参照)
Object エフェクトの個別パラメーター
プロパティ名概要
effect エフェクト名
delay 遅延時間(ミリ秒)
duration エフェクトの所要時間(ミリ秒)
easing 変化の度合い
show/hideパラメーターのデータ型

 easingパラメーターで指定できる値については、Easingsに、変化をグラフで表現したものも併せて掲載されていますので、参考にしてください。

 以下は、show/hideパラメーターを指定した例です。

JavaScript
$('#main').tooltip({
  // 表示時のエフェクトを無効化
  show: false,
  // 非表示時のエフェクトをObject型で指定
  hide: {
    effect: 'explode',
    delay: 500,
    duration: 5000,
    easing: 'easeInBounce'
  }
});
表示/非表示時のエフェクトを指定

(2)positionパラメーター

 ツールチップの表示位置を、以下のようなキーを持つハッシュ形式で示します。

キー名概要
my 自分自身の位置
of 位置の基点となる要素
at 基点要素の位置
collision 画面からあふれる場合の表示
設定値概要
none 何もしない(デフォルト)
fit 画面の端に合わせる
flip 表示位置を反転(topならbottom、leftならrightに)
positionパラメーターで利用できるキー

 デフォルト値は、「{ my: "left top+15", at: "left bottom", collision: "flipfit" }」なので、ツールヒントは対象要素の左下15pxの位置に表示されます。

 もしもこれを「対象の要素の右下とツールヒントの左上が接するように」表示するならば、以下のように表します。

JavaScript
$('#main').tooltip({
  position: {
    my: 'left top', at: 'right bottom', collision: 'none'
  }
});
ツールチップの表示位置を変更
ツールヒントの左上が対象の要素の右下と接するように表示

(3)trackパラメーター

 trueに設定した場合、対象の要素内でマウス・ポインターが動くと、対応してツールチップの表示も移動します。デフォルトはfalseです。

※以下では、本稿の前後を合わせて5回分(第20回~第24回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery UI逆引きリファレンス
20. Selectableウィジェットで選択可能なリストを作成するには?

マウス・クリックによる単一選択や、マウス・ドラッグによる範囲選択などが実現できるSelectableウィジェットの基本的な使い方を解説。

jQuery UI逆引きリファレンス
21. Draggable/Droppableウィジェットでドラッグ&ドロップ機能を実装するには?

ページ上の指定された要素をマウスでドラッグ&ドロップできるようにするDraggable/Droppableウィジェットの基本的な使い方を解説。

jQuery UI逆引きリファレンス
22. Progressbarウィジェットでプログレスバーを作成するには?

時間のかかる処理の進行状況をユーザーに対して通知できるProgressbarウィジェットの基本的な使い方を解説。

jQuery UI逆引きリファレンス
23. 【現在、表示中】≫ Tooltipウィジェットでツールチップを表示するには?

対象要素にマウス・ポインターを当てるとポップアップするツールチップを実装できるTooltipウィジェットの基本的な使い方を解説。

jQuery UI逆引きリファレンス
24. ツールチップへの表示内容をカスタマイズするには?

画像を含んだツールチップを表示したり、Ajax経由でツールチップの内容を取得したりできるTooltipウィジェットのパラメーターの指定方法を紹介。

サイトからのお知らせ

Twitterでつぶやこう!