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

2012.10.10

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を構築する為にも上手に利用していきたいですね。

参考