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

jQuery UI逆引きリファレンス

ツールチップへの表示内容をカスタマイズするには?

2013年12月26日

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

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

jQuery UIとは?

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

 別稿「jQuery UI逆引きリファレンス: Tooltipウィジェットでツールチップを表示するには?」では、Tooltipウィジェットを使って基本的なツールチップを作成する方法について紹介しました。本稿では、引き続きTooltipウィジェットのパラメーターを利用しながら、画像を含んだツールチップを表示したり、Ajax経由でツールチップの内容を取得したりする方法について紹介していきます。

画像付きのツールチップを生成する

 tooltipメソッドのitems/contentパラメーターを利用することで、ツールチップの内容は自作することもできます。例えば以下は、(title属性ではなく)data-isbn/data-price/data-publishなどの属性をもとに、ツールチップの内容を動的に組み立てる例です。

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() {
  // 2data-xxxxx属性をもとに、ツールチップを生成
  $('#list').tooltip({
    items: '[data-isbn]',
    content: function() {
      // 3data-xxxxx属性からコンテンツを組み立て
      var isbn = $(this).data('isbn');
      var price = $(this).data('price');
      var publish = $(this).data('publish');
      return '<img src="http://www.wings.msn.to/books/' + isbn + '/' + isbn + '.jpg" /><br />出版社:' + publish + '<br />価格:' + price + '円';
    }
  });
});
</script>
</head>
<body>
<!--1ツールチップ組み立てのためのdata-xxxxx属性を準備-->
<ul id="list">
  <li><a href="#" data-isbn="978-4-7981-3332-4" data-price="2940"
    data-publish="翔泳社">10日でおぼえるjQuery入門教室 第2版</a></li>
  <li><a href="#" data-isbn="978-4-7741-5878-5" data-price="3360"
    data-publish="技術評論社">AndroidエンジニアのためのモダンJava</a></li>
  <li><a href="#" data-isbn="978-4-7981-3257-0" data-price="3990"
    data-publish="翔泳社">独習ASP.NET 第4版</a></li>
  <li><a href="#" data-isbn="978-4-8222-9621-6" data-price="2310"
    data-publish="日経BP社">書き込み式SQLのドリル 改訂新版</a></li>
  <li><a href="#" data-isbn="978-4-7981-3049-1" data-price="3780"
    data-publish="翔泳社">独習Java サーバサイド編 第2版</a></li>
  <li><a href="#" data-isbn="978-4-7980-3585-7" data-price="3150"
    data-publish="秀和システム">はじめてのAndroidアプリ開発</a></li>
</ul>
</body>
</html
画像付きのツールチップを生成するためのコード(tooltip2.html)
書籍情報に対応して、画像付きのツールチップを表示
書籍情報に対応して、画像付きのツールチップを表示

 まず、ツールチップに表示すべき内容を、ターゲット要素のdata-xxxxx属性として準備しておきます(1)。サンプルであれば、data-isbn/data-price/data-publish属性がそれです。data-xxxxx属性は「独自データ属性」と呼ばれ、JavaScriptなどで利用するためのパラメーター情報を表します。

 マークアップ側の準備ができたら、2のようにtooltipメソッドを呼び出します。itemsパラメーターは、ツールチップとして表示する要素/属性を宣言します。デフォルトは「[title]」となっており、Tooltipウィジェットはtitle属性をキーにツールチップを生成します。

 ただし、itemsパラメーターはツールチップを生成するトリガーとなるだけなので(この場合であれば、data-isbn属性を持つ要素についてツールチップを生成)、実際に表示されるべきコンテンツは、contentパラメーターの側で指定しなければなりません。

 contentパラメーターは、ツールチップを生成する際に呼び出されるコールバック関数を表します。戻り値として、ツールチップに表示されるべきテキストを返します。テキストにはHTMLのタグを含めることもできますので、ツールチップに画像を埋め込むならば、戻り値に<img>要素を埋め込むだけです。

 コールバック関数の中では、「$(this)」でターゲット要素にアクセスできます。そこで3では、そのdataメソッドにアクセスし、data-xxxxx属性の値を取得、その値を基にHTML文字列を組み立てているわけです。

Web API経由でツールチップの情報を取得する

 同じ要領で、Web API経由でツールチップに表示すべき情報を生成することもできます。例えば以下は、リンクリストに対してマウス・ポインターを当てると、対応するはてなブックマークの件数を表示する例です。

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() {
  // 1はてなブックマーク APIにアクセス
  $('#list a').each(function() {
    var target = $(this);
    var url = target.attr('href');
    $.getJSON(
      'http://b.hatena.ne.jp/entry/jsonlite/?callback=?',
      { url: url }
    )
    .done(function(data) {
      target.data('count', data.count);
    });
  });
  // 2ツールチップを初期化
  $('#list').tooltip({
    items: '[href]',
    content: function() {
      return 'ブックマーク件数:' + $(this).data('count');
    }
  });
});
</script>
</head>
<body>
<ul id="list">
  <li><a href="http://www.wings.msn.to/">サーバーサイド技術の学び舎</a></li>
  <li><a href="/">Build Insider</a></li>
  <li><a href="http://codezine.jp/">CodeZine</a></li>
</ul>
</body>
</html>
Web API経由でツールチップの情報を取得するコード例
リンクに関連付いたブックマーク件数を表示
リンクに関連付いたブックマーク件数を表示

 ページロード時に、アンカータグ(=<a>タグ)のhref属性を順に読み込み、その内容でブックマーク件数を問い合わせます(1)。はてなブックマークAPIについては、Hatena Developer Centerを参照してください。また、$.getJSONメソッドについては、別稿「非同期でJSON形式のデータを取得するには?」を参照してください。

 問い合わせの結果、取得したブックマーク件数はdataメソッドでそれぞれのアンカータグにひも付け、キャッシュしておきます。

 あとは、先ほどと同じようにitems/contentパラメーターの組み合わせで、ツールチップを生成するだけです(2)。dataメソッドでキャッシュしたデータは、同じくdataメソッドで取得できます。

※以下では、本稿の前後を合わせて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でつぶやこう!