[jQuery Tooltip Plugin] ツールチップを活用してページをすっきり見せる

ひとつのページに情報を詰め込みたい。
だけど全部表示するとうるさく感じられる。
ツールチップを活用するとそういうジレンマを多少解消できるかも。

jQuery Tooltip Plugin
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
デモ

ツールチップを実装するにあたっては、こちらのプラグインがデモも充実していて使いやすいと思いました。

ここでは自分が適用した方法を紹介したいと思います。

準備としてはじめに必要なファイルをインクルードします。

<link rel="stylesheet" type="text/css" href="jquery.tooltip" />
<script type="text/javascript" src="/javascripts/jquery.tooltip.js"></script>

1. リンクの上にカーソルを置いたときに文字情報を表示する。

newsy
http://newsy.appspot.com/

newsyはテクノロジー系のブログフィードを読み込んでカテゴリー自動分類をするニュースアグリゲーターです。
1ページに多くの記事を並べたかったので、記事の要約まで表示してしまうとごちゃごちゃした印象を与えてしまうと判断し、記事の要約はツールチップで見せることにしました。

HTML

<a href="http://example.com" title="見出し - ここにツールチップに表示する内容を書きます" class="entry" >ツールチップデモ

Javascript

$(document).ready(function(){
  $('a.entry').tooltip({
    track: true,
    delay: 0,
    showURL: false,
    opacity: 1,
    fixPNG: true,
    showBody: " - ",
    extraClass: 'pretty',
    top: -15,
    left: 5
  });
});

ツールチップで表示したい内容をaタグのtitle属性に書きます。
jQuery Tooltip Pluginのオプションで showBody: " - " と指定しているので、titile属性に書いた文字を " - " で分割します。
前半部分がツールチップの見出し、後半部分がツールチップの内容になります。

jQuery Tooltip Pluginはデフォルトのデザインの他にもデザインが用意されています(funcyとpretty)。
newsyではprettyデザインを採用することにしました。(extraClassで指定)

別デザインに必要なスタイルシートと画像は、ダウンロードしたフォルダ内にあるdemoの中にあります。

screen.css の該当箇所 (#tooltip.prettyなど) をコピーして既存のCSSファイルに貼付けます。

画像 (prettyの場合はshadow.png) もコピーしてしかるべき場所に配置します。
(デフォルトではCSSファイルと同じ階層。別フォルダにする場合はCSSを書き換える)



2. リンクの上にカーソルを置いたときに画像を表示する。

ComiQ
http://comiq.appspot.com/

ComiQはAmazonのProduct Advertising API を利用して漫画の発売日をまとめたサイトです。

1ページに数十冊のコミックを並べると、すべてのコミックに画像を付けた場合どうしても読み込みに時間がかかってしまいます。
そういうわけで思い切って画像を非表示にし、ツールチップで見せることにしました。

HTML

<a href="http://example.com" rel="/images/large-image.jpg" class="book" >ツールチップデモ</a>

Javascript

$(document).ready(function(){
  $('a.book').tooltip({
    track: true, 
    delay: 0, 
    showURL: false,
    opacity: 0.3,
    fixPNG: true, 
    top: -15, 
    left: 5,
    bodyHandler: function() {
      return $('<img/>').attr('src', $(this).attr('rel'));
    }
  });
});

aタグのrel属性にツールチップで表示したい画像のURLを書きます。

tooltipのbodyHandlerオプションにツールチップ表示時に実行するコールバック関数を指定します。
ここでは、rel属性に書かれた画像のURLをもとに、動的に画像要素を作成しています。

このコールバック関数の書き方次第で画像以外にも様々な要素を表示することが可能になっています。