ひな形

まずは以下のひな形ファイルを用意して下さい。
3本の棒グラフを表示するサンプルです。

<!DOCTYPE html>
<html>
<head>
  <title>Tooltipのテスト</title>
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
  <script>
  // データの準備
  var dataset = [100, 150, 200];
  // svg領域の設定
  var svg = d3.select("body").append("svg")
          .attr("width", 300)
          .attr("height", 300);
  // グラフの描画
  svg.selectAll("rect")
      .data(dataset)
      .enter()
      .append("rect")
      .attr({
        x: 0,
        y: function(d,i){ return i*30; },
        width: function(d){ return d; },
        height: 20,
        fill: "green",
       })
  </script>
</body>
</html>

もっとも簡単な方法

図形のタグの中にtitleタグを挿入することで、ツールチップが表示されます。

具体的には、グラフの描画の際にtitleタグをappendすればOKです。

// グラフの描画
svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr({
      x: 0,
        y: function(d,i){ return i*30; },
        width: function(d){ return d; },
        height: 20,
        fill: "green",
     })
    .append("title")
    .text(function(d){ return d; })

デモページ

グラフの上にマウスをしばらく乗っけると、ツールチップが表示されます。
いわゆるブラウザに備え付きの、titleタグを表示するアレです。

はっきり言って使い物にはなりません。

CSSとマウスイベントを用いた方法

ツールチップ用のタグを用意し、それをCSSで良い感じに表示しようという試み。

まず、bodyの中にツールチップで使うspanタグを追加します。

<span id="tooltip"></span>

ツールチップ用のタグに、CSSのスタイルを当てます。
外部ファイルかstyleタグで、以下のCSSを適用して下さい。

span#tooltip{
  position: absolute;
  z-index: 10;
  visibility: hidden;
  padding: 0 5px;
  border: 1px solid #000;
  border-radius: 3px;
  background-color: #333;
  color: #fff;
  font-size: 11px;
  opacity: 0.8;
}

ちょっと長いですが、visibilityより下は見た目の設定なので、あまり気にしなくても良いです。

その後、それぞれのグラフにマウスイベントを追加します。
グラフの描画の部分で、以下のように3つのイベントを加えて下さい。

// グラフの描画
svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr({
      x: 0,
        y: function(d,i){ return i*30; },
        width: function(d){ return d; },
        height: 20,
        fill: "green",
     })
    .on("mouseover", function(d){return tooltip.style("visibility", "visible").text(d);})
    .on("mousemove", function(d){return tooltip.style("top", (event.pageY-20)+"px").style("left",(event.pageX+10)+"px");})
    .on("mouseout", function(d){return tooltip.style("visibility", "hidden");})

デモページ

mouseover, mousemove, mouseoutのイベントを追加しました。
処理としては、以下のようになっています。

  • マウスが乗ったらツールチップを可視化し、テキストを加える
  • マウスの移動に合わせて、ツールチップを表示
  • マウスがグラフから外れたら、ツールチップを隠す

CSSのスタイルを変更することで、ツールチップの見た目を整えることが可能です。

tipsyを用いた方法

少し複雑ですが、もっとも綺麗に表示される方法です。
実装には、tipsyというツールチップ用のプラグインを使います。

tipsy公式サイト

とりあえず、以下のようにgit cloneで取得します。
githubから直接ダウンロードしても構いません。

git clone git://github.com/jaz303/tipsy.git

取得できたら、src/javascriptsの中にjquery.tipsy.jsというファイルがあると思います。
なんと、これを全部書き換えます!

とは言っても簡単で、このサイトの下の方にjquey.tipsy.jsと書かれたコードがあるので、それを全部コピーして貼り付けるだけです。

それができたら、srcフォルダの中のjquery.tipsy.jsとtipsy.cssの2つのファイルを、ひな形ファイルと同じ場所にコピペします。

これで事前準備が完了したので、コードを書いていきます。

まずは先程の2つのファイルを読み込みます。
</head>の直前に以下のコードを追加します。

<script src="jquery.tipsy.js"></script>
<link href="tipsy.css" rel="stylesheet" />

次に、もっとも簡単な方法と同様に、titleタグを挿入します。

// グラフの描画
svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr({
      x: 0,
        y: function(d,i){ return i*30; },
        width: function(d){ return d; },
        height: 20,
        fill: "green",
     })
    .append("title")
    .text(function(d){ return d; })

最後にツールチップを表示したい要素(ここではrectタグ)でtipsyを実行します。
</script>の直前に、以下のコードを追加します。

$("scg rect").tipsy({
  gravity: 'w',
  fade: true
})

デモページ

どうでしょうか。ぬるっと表示されたでしょうか。

gravityは吹き出しの向きを表していて、wはwestの略です。
また、fadeをtrueにすると、フェードイン・フェードアウトの効果が勝手につきます。便利。

以上でツールチップの解説は終わりです。
目的に合わせて使ってみてください。

CATEGORIES