近々ツールチップを使う案件があるので、今の内に使いやすそうなプラグインを探して彷徨ってみました。その結果、jQueryで使える素敵なプラグインを3つほど発見したのでブックマークがてらご紹介します。
Simple CSS + Javascript Tooltip with jQuery
https://www.queness.com/post/92/create-a-simple-cssjavascript-tooltip-with-jquery
JavaScriptとCSSで作れるツールチップです。
aタグのtitle要素に中身を記述、HTMLや画像も入れる事が出来ます。
JS部分を弄ればフェードインなどのエフェクトや、チップを出す位置も変更可能なようです。
tipsy(※サービス終了)
http://onehackoranother.com/projects/jquery/tipsy/
※現在リンク切れ
とてもシンプルなツールチップです。
中身はスクリプトの部分に記述、文字情報のみ入れる事が出来ます。
エフェクトや位置変更は勿論可能、フォーム部分など様々な場面で使用出来そうです。
見本で使用されている文字量は少なめですが、記述をすればそれなりに広がってくれます。
Easy Tooltip
http://cssglobe.com/post/4380/easy-tooltip–jquery-plugin
※現在リンク切れ
綺麗でとっつきやすそうなツールチップです。
defalt、custom、elementの3タイプがあり用途に合わせて選ぶ事が出来ます。
中身はdefaltタイプの場合はaタグのtitle要素に、他の2つに関してはスクリプトの中に記述します。
さくさく作ってしまいたい時に役立ちそうです。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。