Interface Elements の Tooltips をいろいろな要素で使ってみた

はじめに フォートラベル API の旅行記検索 API を使って、入力した郵便番号からその地域の旅行記を検索します。続けて見つかった旅行記の写真(小)をタイル状に並べます。

次に Interface elements for jQuery の Imagebox を使って、旅行記の写真(小)をクリックしたとき、その写真(大)をポップアップしてオーバーレイ表示します。

続けて Interface elements for jQuery の Slider を使って、ハンドルをスライドすると、旅行記の写真(小)のサイズを拡大(または縮小)表示します。

さらに Interface elements for jQuery の Tooltips を使って、郵便番号の入力ボックス、スライダのハンドル、旅行記の写真(小)にマウスをポイントすると、ツールチップを表示します。

デモを見る

Tooltips は delay オプションを省略すると、表示がチラチラ(チカチカ)して見栄えがよくありません。delay オプションは 200 から 500 あたりが適切のようです。

a 要素のツールチップは title 属性の値のほかに href 属性の値 (URL) も表示してしまいます。URL を表示したくないこともありそうですが、そのオプションはないようです。

input 要素に position オプションの mouse を指定すると、input 要素のフォーカスがある間は、ツールチップがマウスポインタに追随してしまうため、少し違和感があります。bottom にすると、ツールチップがすぐに消えてしまいます。input 要素でツールチップを使うには、ちょっとしたコツが必要そうです。

input 要素や a 要素のほかにも、スライダのハンドルのような div タグでもツールチップを表示できます。


デモを見る

Paper×Paper―uiの紙工作 中林 うい by G-Tools