[JS]後発だけに一味違う高性能なツールチップのスクリプト -Poshy Tip

テキストリンクやフォームにツールチップを表示するスクリプトを紹介します。

Poshy Tip – jQuery Plugin for Stylish Tooltips
デモページ

ツールチップのスクリプトは既に多くリリースされていますが、このスクリプトはかゆいところに手が届くような便利な機能が豊富に備わったものとなっています。

まず、一番の特徴となるのは、背景に画像を使用している点です。画像はサイズが1024×768pxの大きなもので、これによりツールチップの拡大縮小表示が可能となっています。
また、画像を変更することで、好みの背景に簡単に変更できます。

ツールチップに使用する画像

以下、ツールチップのデモで特徴を紹介します。

ノーマル版のツールチップです。上からアニメーションで表示されます。

背景を変更したツールチップです。ダウンロードファイルには複数のカラーが含まれています。

表示位置を変更したツールチップです。

背景に画像を使用せず、矢印を真ん中に表示したツールチップです。

フォームにフォーカスすると、ツールチップが表示されます。

フォームでの表示位置も変更可能です。

AJAXにも対応しています。

読み込みが完了すると位置を再計算して、表示されます。

Flickrの画像を表示したツールチップです。

カーソルに追従するツールチップです。

スクリプトのオプションでは、ツールチップを設定する際のclass名、表示・非表示のスピード、表示位置、スライドやフェードのアニメーションの有無、カーソルへの追従などが設定できます。

Poshy TipはjQueryのプラグインのため、実装にはjquery.jsが必要です。

Post on:2010年7月28日