お手軽高機能！Closure UI【goog.ui.AdvancedTooltip】

お手軽高機能！Closure UI

#JavaScript

#HTML5

#Closure

#RIA

稲毛透

2012.10.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Closure Libraryに用意されている「goog.ui.AdvancedTooltip」はツールチップウィジェットです。マウスカーソルを追跡することで、ツールチップとして開かれている自身の表示を保持するか破棄するかを判定する機能を持っています。

デモ

AdvancedTooltipを表示させるにはここにマウスカーソルをロールオーバーします。

AdvancedTooltipは、ツールチップ自身にマウスカーソルをロールオーバーすることで表示を保持することができます。このデモでは、ターゲットから比較的に離れた場所にツールチップが表示されますが、カーソルトラッキングを有効にしている為、マウスカーソルがツールチップへ向かって移動している間はツールチップの表示が保持され、反対に移動すると即座にツールチップが閉じられます。ツールチップ上に設置されたボタンのクリックイベントをハンドリングしている為、それを押下することでもツールチップを閉じることが可能です。
2012/10/15 11:00 デモが動作していなかった点を修正しました。

デモコード

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>goog.ui.AdvancedTooltip</title>
    <script type="text/javascript" src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
    <script type="text/javascript">
      goog.require('goog.events.EventType');
      goog.require('goog.ui.AdvancedTooltip');
    </script>
    <style type="text/css">
      #target {
        color: blue;
        font-weight: bold;
      }
      .goog-tooltip {
        background: white;
        color: black;
        border: 1px solid black;
        padding: 5px;
        font: menu;
        width: 200px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <p>AdvancedTooltipを表示させるには<span id="target">ここ</span>にマウスカーソルをロールオーバーします。</p>
    <script>
      var tooltip = new goog.ui.AdvancedTooltip('target');
      tooltip.setHtml(
        "<div>AdvancedTooltip!</div>" +
        "<div><button id=\"btn-close\">Close</button></div>");
      tooltip.setHotSpotPadding(new goog.math.Box(5, 5, 5, 5));
      tooltip.setCursorTracking(true);
      tooltip.setMargin(new goog.math.Box(100, 0, 0, 100));
      tooltip.setHideDelayMs(250);
    
      goog.events.listen(document.getElementById('btn-close'),
          goog.events.EventType.CLICK, function(e) {
              tooltip.setVisible(false);
          }
      );
    </script>
  </body>
</html>

使い方

AdvancedTooltipクラスのインスタンスを生成し、プロパティを設定するだけで利用できます。

Closure Libraryのロード

<script type="text/javascript" src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<script type="text/javascript">
  goog.require('goog.events.EventType');
  goog.require('goog.ui.AdvancedTooltip');
</script>

6行目: Closure Libraryのbase.jsをロードします。
（このbase.jsをロードした場合には多くのスクリプト群がロードされる為、リリースするWebアプリケーションではこの形式は取りません。通常はClosure Libraryによる依存性管理およびClosure Compilerによるスクリプトの統合が用いられます。）
7～10行目: 必要とするClosure Libraryを宣言します。ここでは主役である「goog.ui.AdvancedTooltip」とイベントタイプの列挙である「goog.events.EventType」を宣言しています。

AdvancedTooltipオブジェクトの生成と利用

  var tooltip = new goog.ui.AdvancedTooltip('target');
  tooltip.setHtml(
    "<div>AdvancedTooltip!</div>" +
    "<div><button id=\"btn-close\">Close</button></div>");
  tooltip.setHotSpotPadding(new goog.math.Box(5, 5, 5, 5));
  tooltip.setCursorTracking(true);
  tooltip.setMargin(new goog.math.Box(100, 0, 0, 100));
  tooltip.setHideDelayMs(250);

  goog.events.listen(document.getElementById('btn-close'),
      goog.events.EventType.CLICK, function(e) {
          tooltip.setVisible(false);
      }
  );

30行目: ツールチップを表示させるターゲットのIDをコンストラクタ引数としてAdvancedTooltipインスタンスを生成します。
31〜33行目: ツールチップに表示する内容をHTMLの文字列表現で設定します。
34行目: マウスカーソルのロールオーバーで表示が保持されるマージンをツールチップの周りに設定します。ここではgoog.math.Boxオブジェクトを利用してツールチップ周囲5pxをマージンとして設定しています。
35行目: カーソルトラッキングを設定します。引数にtrueを指定することでトラッキングが有効となります。
36行目: ツールチップが開かれる位置を、マウスカーソルの位置を基点としたマージンとして設定しています。ここではターゲットにロールオーバーした際のマウスカーソルの位置から、下方100px、右方100pxに表示するよう設定しています。
37行目: マウスカーソルがターゲットの要素もしくはツールチップから離れた際のツールチップの表示が破棄されるまでの遅延時間をミリ秒で設定します。カーソルトラッキングが有効な場合はターゲット要素から離れた時のツールチップの表示は保持されます。
39～43行目: ツールチップ上に設置したボタンのクリックイベントリスナーにイベントハンドラを設定しています。ハンドラ内の処理41行目ではツールチップの表示を破棄しています。

まとめ

通常のツールチップ（goog.ui.Tooltip）と比較して提供する情報量が多い場合に用いることで、ユーザがゆっくり情報を閲覧することのできる環境を提供することができます。ツールチップはWebアプリケーションを構成する要素としては脇役のような存在ですが、ユーザフレンドリーなUIを構築する為にも上手に利用していきたいですね。