以前に「[JS] JavaScriptで吹き出しを表示するBalloon tooltip 」にて、吹き出しを表示してくれるJavaScriptのライブラリを紹介しましたが、これは指定のHTML要素にマウスを合わせると吹き出しを表示してくれるものでした。
Balloon tooltipのデモ
マウスが特定のリンクなどに重なると吹き出しが表示されます。
マウスがリンクから外れると吹き出しは消えます。
今回紹介するHints.js
はテキストボックスやテキストエリアなどのフォームに、マウスをフォーカスさせるとポンと吹き出しを表示させてくれるものです。
例えば、入力の説明（ヒント）を見せたい場合などに便利です。
吹き出しの色や大きさ、位置などを変更することができます。
もちろん日本語の表示や、複数行にまたがった長い文字列を吹き出しに埋め込む事も可能です。
Hints.jsのデモ
テキストボックスをクリックすると吹き出しが表示されます。
フォーカスが外れる（別のところをクリックする）と吹き出しは消えます。
Hints.jsのライセンスは、「MIT-style license 」で公開されています。
Hints.jsの使い方
さきほどの、公式サイトからHints.js一式をダウンロードして展開しておきます。
展開すると、中に「demo」フォルダがあるのでそれを見ると一通りの動作を確認する事ができると思います。
または、デモサイト から動作を確認する事もできます。
必要なファイルとディレクトリ構造は、下記のようになります。
hints/ ┬ clients ┬ Hints.js
│ └ images
└ moo ─ complete.js
最も簡単に、Hints.jsを使いたいのであれば、clientsとmooフォルダと同一階層（demoフォルダと同じ）にフォルダを用意し、その中に吹き出しを使いたいHTMLファイル（またはプログラムファイル）を配置すると良いでしょう。
もちろん、それ以外のフォルダ構成にしてもHints.jsの多少の変更で動かす事はできます。
1. JavaScriptの読み込み
Hints.jsを使う場合、Hints.js本体のJSファイル以外にも、mootoolsのJavaScriptライブラリファイルを読み込む必要があります。
吹き出しを表示したい、HTML（又はプログラムファイル）のHEADに
<script type='text/javascript' src='/hints/moo/complete.js' charset='utf-8'></script> <script type='text/javascript' src='/hints/client/Hints.js' charset='utf-8'></script>
JSファイルの場所は、環境に合わせて書き換えてください。
2. Hints用オブジェクトの生成
下記のようなJavaScriptを書いてHEADタグ内に埋め込んでおきます。
<script type="text/javascript">
var inputs = null;
window.addEvent('domready', function() {
var inputs = null;
inputs = new Hints();
});
</script>
※ BODYタグ内に入れるのであれば、</body>の前とかに。
3. 吹き出しを出したいフォームに、classとtitle属性をセット
例えば、テキストボックスをクリックすると「名前を入力してください」という吹き出しを出したい場合は、下記のようにします。
<input type="text" name="hoge" class="hint" title="名前を入力してください" />
class名は「hint」で固定です。
title属性に噴出しの中に表示したい文字列を埋め込んでおきます。
このtitleという属性名は、2.のHints用オブジェクトを生成する際にオプションで指定できます。
これだけで、基本的なセットアップは完了。
テキストボックスをクリックすると吹き出しが表示されるはずです。
Hints.jsのカスタマイズ
吹き出しはオプションを指定することで、色々カスタマイズする事ができます。
（デモサイト でも色や吹き出しを表示する位置を変更しています）
カスタマイズ方法は、Hintsオブジェクトを生成する際に引数を渡してあげます。
<script type="text/javascript" charset="utf-8">
var inputs = null;
window.addEvent('domready', function() {
inputs = new Hints({
'theme': 'white',
'position': 'top',
'hintLocation': 'alt'
});
});
</script>
上記では、白色の吹き出しを上部（テキストの上）に表示するようにします。
また、吹き出しの内容を定義する属性をデフォルトのtitle属性からalt属性に変更しています。
これで
<input type="text" name="hoge" class="hint" alt="名前を入力してください" />
と書く事で吹き出しが表示されるようになります。
複数のHintsオブジェクトを定義すれば、一つの画面内で吹き出しを上に出したり、下に出したりも可能ですね。
設定できるパラメータは、Hints.jsファイル内に書かれているように下記
Parameters: theme - *Defaults to 'white'*. Several themes are built-in (distributed) with <Hints>, which can be found in the next section. themes - Adding your own theme is pretty simple. See next section. hintLocation - *Defaults to 'title'*. Which attribute contains your hint body. If this attribute does not exist, *no hint is created!*. width - *Defaults to '250px'*. Size of the total hint in pixels. offset - *Defaults to '[-5, -8]'. Array of pixel offsets to move the hint in relation to the element, *after* it has been positioned. position - *Defaults to 'right'*. Where the hint is aligned in relation to the element. Possible values are *top*, *bottom*, *right*, and *left*. slideDistance - *Defaults to '10'*. When a hint is displayed, it "slides" into position. If you want it to slide the other direction, simply give it a negative value. To disable sliding, give it a value of '0'. opacity - *Defaults to '1'*. In addition to 'sliding', the hint fades in. This parameter lets you make your hints semi-transparent. onEvent - *Defaults to 'focus'*. This is how the hint is triggered by the element. Since most hints accompany an "input" field, we default to "focus". By default, *all non-form elements are defaulted to "mouseenter"*. offEvent - *Defaults to 'blur'*. This is how the hint is hidden by the element. Similar to "onEvent", *all non-form elements are defaulted to "mouseleave"*.
もし吹き出しの画像が上手く表示されない場合は、Hints.js内に書かれているthmesの定義箇所（139～170行目）
のパスを変更すればよいです。
[PR]お名前.comのホームページ作成ツール★誰でも簡単にWebクリエイターに
[PR]光ファイバー/ADSLを楽しむなら「安心」「安全」の@nifty！
[PR]SSLはグローバルサイン（最短2分で発行、年額36,540円）
関連記事
Twitter入力フォームのように文字カウントしてくれるcharacter count
Googleサジェストが実装できるjQuery Autocomplete Mod
[jQuery] マウスオーバー・マウスアウトで画像を表示・非表示にする方法
高機能でカスタマイズも容易なWYSIWYGエディタ [CKEditor]
[JS] thickboxを活用して利用者に分かりやすいサイトを作ろう
[JS] JavaScriptで吹き出しを表示するBalloon tooltip
[JS]JavaScriptで簡単にWindowsエクスプローラー風のツリーを作れるDTree
[jQuery] 外部JavaScriptファイル読込みに関する考察
GO2WEB20のTwitterバッチをAmebloにつけてみた。と、IE対策方法