[JS]後発だけに一味違う高性能なツールチップのスクリプト -Poshy Tip
Post on:2010年7月28日
テキストリンクやフォームにツールチップを表示するスクリプトを紹介します。
![デモのキャプチャ](/wp-content/uploads-2010/2010072805.png)
Poshy Tip - jQuery Plugin for Stylish Tooltips
デモページ
ツールチップのスクリプトは既に多くリリースされていますが、このスクリプトはかゆいところに手が届くような便利な機能が豊富に備わったものとなっています。
まず、一番の特徴となるのは、背景に画像を使用している点です。画像はサイズが1024x768pxの大きなもので、これによりツールチップの拡大縮小表示が可能となっています。
また、画像を変更することで、好みの背景に簡単に変更できます。
![サイトのキャプチャ](/wp-content/uploads-2010/2010072807.png)
ツールチップに使用する画像
以下、ツールチップのデモで特徴を紹介します。
![デモのキャプチャ](/wp-content/uploads-2010/2010072806-01.png)
ノーマル版のツールチップです。上からアニメーションで表示されます。
![デモのキャプチャ](/wp-content/uploads-2010/2010072806-02.png)
背景を変更したツールチップです。ダウンロードファイルには複数のカラーが含まれています。
![デモのキャプチャ](/wp-content/uploads-2010/2010072806-03.png)
表示位置を変更したツールチップです。
![デモのキャプチャ](/wp-content/uploads-2010/2010072806-04.png)
背景に画像を使用せず、矢印を真ん中に表示したツールチップです。
![デモのキャプチャ](/wp-content/uploads-2010/2010072806-05.png)
フォームにフォーカスすると、ツールチップが表示されます。
![デモのキャプチャ](/wp-content/uploads-2010/2010072806-06.png)
フォームでの表示位置も変更可能です。
![デモのキャプチャ](/wp-content/uploads-2010/2010072806-07.png)
AJAXにも対応しています。
![デモのキャプチャ](/wp-content/uploads-2010/2010072806-08.png)
読み込みが完了すると位置を再計算して、表示されます。
![デモのキャプチャ](/wp-content/uploads-2010/2010072806-09.png)
Flickrの画像を表示したツールチップです。
![デモのキャプチャ](/wp-content/uploads-2010/2010072806-10.png)
カーソルに追従するツールチップです。
スクリプトのオプションでは、ツールチップを設定する際のclass名、表示・非表示のスピード、表示位置、スライドやフェードのアニメーションの有無、カーソルへの追従などが設定できます。
Poshy TipはjQueryのプラグインのため、実装にはjquery.jsが必要です。
sponsors