jQueryプラグイン grumble.jsを使って回転する(ような)ツールチップ(tooltip)。
ツールチップの角度、距離、表示時間、表示するテキストなどをスクリプトで設定できます。また、テキストの量にあわせて画像サイズを自動で4段階に切り替えて表示します。画像は、1枚のpngスプライト(色、サイズで8種類)を使用しています。
● リンクをオンマウスでツールチップ表示
各リンクにオンマウスするとツールチップを表示します。閉じるには、画面上のどこかをクリックします。同時に複数表示している場合でも一度のクリックですべて閉じます。表示テキストの量でサイズが切り替わります。
● ツールチップのパターン
下のボタンをクリックすると、タイプの違うツールチップが左側テキストから順にフェードイン、フェードアウトします。3番目のもののみ表示したままなので「画面上のどこかをクリックすると閉じます。
テキスト無し テキスト少し有り 「閉じる」ボタン付き テキスト多め
● 左右に揺れるツールチップ
下のボタンをクリックすると、左右に揺れるツールチップをボタンの下に表示します。画面上のどこかをクリックすると消えます。