画面レイアウトの関係上、表示する文字が画面内に収まらなくてどうしようか悩む事はよくあったりします。
あれも表示してくれ、これも入れてくれと要望を出されてもあまりに文字を詰め込み過ぎるとかなり見難い画面になってしまいますので、そういったときの手段として一覧（概要）画面と詳細画面を分けるなどがありますが、ここで紹介する吹き出しに情報を表示すると言うのも画面遷移無しで綺麗に見せる事が出来る一つの解決策になるかと思います。
デモサイトは、こちら にあります。
こういうJavaScriptはいろんな種類がありますが、今回紹介したものは
・ リンクタグ以外にSPANタグやDIVタグで指定したものにも吹き出しを付ける事が可能
・ 表示がシンプル（指定したもの以外の文字を表示しない）
事などから使ってみる事にしました。
Balloon tooltipの使い方
1. まず上記のサイトからファイル一式をダウンロードして、使用したいサーバーに転送しておきます。
使用するファイルは、「css」「js」「images」の3つのフォルダ内にあるファイルです。
2. 1.で転送したファイルを適当な場所に配置します。
配置する際には、「css」「js」「images」それぞれのディレクトリ構成のまま配置します。
適当なディレクトリ
├ css ─ bubble-tooltip.css
├ js ─ bubble-tooltip.js
└ images ┬ bubble_bottom.gif
├ bubble_middle.gif
└ bubble_top.gif
上記のような感じです。
3. 吹き出しを表示したい画面のHTMLファイルを開きJavaScriptとCSSファイルを読み込むように指定します。
<link rel='stylesheet' href='配置したディレクトリ/css/bubble-tooltip.css' type='text/css'> <script type='text/javascript' src='配置したディレクトリ/js/bubble-tooltip.js'></script>
4. 3.と同じHTMLファイルのBODYタグ内に下記を追加
<div id='bubble_tooltip'> <div class='bubble_top'><span></span></div> <div class='bubble_middle'><span id='bubble_tooltip_content'>Content is comming here as you probably can see.Content is comming here as you probably can see .</span></div> <div class='bubble_bottom'></div> </div>
5. 最後に吹き出しを付けたい箇所を下記のように記述します。
□ リンクタグに吹き出しをつける場合
<a href="#" onmousemove="showToolTip(event,'吹き出しに表示したい文字列');return false" onmouseout="hideToolTip()">A word</a>
□ SANタグに吹き出しをつける場合
<span class="tooltip_text" href="#" onmousemove="showToolTip(event,'吹き出しに表示したい文字列');return false" onmouseout="hideToolTip()">A word</span>
これで、5.で指定した文字の上にマウスを持っていくと吹き出しが表示されるはずです。
動作としては、4.で指定した<DIV>タグが吹き出しを構成する要素になっており、これをJavaScriptから変更して
表示させているようですね。
ちなみに、改行を入れたい場合は<br />タグを指定すれば吹き出し内で改行されます。
デザインもすっきりするので用途に応じて使ってみては如何でしょうか。
関連記事
jQuery UI Sortableを使ってドラッグ＆ドロップでリストを並び替える
Twitter入力フォームのように文字カウントしてくれるcharacter count
Googleサジェストが実装できるjQuery Autocomplete Mod
[jQuery] マウスオーバー・マウスアウトで画像を表示・非表示にする方法
高機能でカスタマイズも容易なWYSIWYGエディタ [CKEditor]
[JS] thickboxを活用して利用者に分かりやすいサイトを作ろう
[JS] 特定のフォームにフォーカスすると吹き出しを表示できるHints.js
[jQuery] 外部JavaScriptファイル読込みに関する考察
GO2WEB20のTwitterバッチをAmebloにつけてみた。と、IE対策方法