jQueryで使えるツールチップ3つ

モモコ

モモコ

近々ツールチップを使う案件があるので、今の内に使いやすそうなプラグインを探して彷徨ってみました。その結果、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(※サービス終了)

※現在リンク切れ

とてもシンプルなツールチップです。
中身はスクリプトの部分に記述、文字情報のみ入れる事が出来ます。
エフェクトや位置変更は勿論可能、フォーム部分など様々な場面で使用出来そうです。
見本で使用されている文字量は少なめですが、記述をすればそれなりに広がってくれます。

Easy Tooltip

※現在リンク切れ
綺麗でとっつきやすそうなツールチップです。
defalt、custom、elementの3タイプがあり用途に合わせて選ぶ事が出来ます。
中身はdefaltタイプの場合はaタグのtitle要素に、他の2つに関してはスクリプトの中に記述します。

さくさく作ってしまいたい時に役立ちそうです。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

デザイナーのモモコです。ジャンプは単行本派です、よろしくお願い致します。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL