Eyecatch jQuery

Javascript,jQuery

クリックされたらツールチップを表示するスクリプトをjQueryで組んでみた

2015/06/09

ということで、またもjQueryネタです。今回はリンクをクリックされると表示するツールチップのスクリプトを組んでみました。
フォーム入力する際のヘルプなどの表示を主な用途と考えていますが、使いどころはほかにもありそうな予感。
基本的なものなので、改造は簡単にできそうですしね。

イメージ / デモ

イメージ

tooltip IMAGE

デモ

デモはコチラ

スクリプト埋込み型

HTML

ではhtmlから。

<a>タグと<p>タグがメインです。
リンク先の「note**(**は数字)」とツールチップのID名の「note**(**は数字)」をついにして設定してください。
ツールチップ内容へ最初からクラス invisible を当てておき、非表示とします。

CSS

では次にスタイルシート。
主にリンクとツールチップ内容の装飾です。

JS

ではメインのスクリプト。

クリックしたリンクに設定されている「note**」を取得し、取得したものと同名のID名ツールチップに対し、invisibleクラスを削除 ⇔ 付与しています。

ツールチップを隠す処理は、html領域内でクリックすれば隠す、という書き方で行なっています。
結構単純な内容ですが、欲しい動作は実現できているので、これで良しとします(笑)

2014.05.02追記

ツールチップを隠す処理ですが、「表示されているツールチップ以外の領域」をクリックした場合に非表示となる、という処理が欲しくなったので、ちょっと手を入れてみました。

スマートかどうかは分かりませんが、色々と試した中でこれが一番シンプルな書き方となりました。
やっていることはコメント通り。

デモ

デモはこちらから。

表示されているツールチップをクリックしても、消えない仕様となります。

追記ここまで

プラグイン版

例によって、プラグイン化したものも作成しましたので、ご利用の方は以下のリンクからどうぞ。
詳細はデモのソースを参照ください。

プラグインデモ
プラグインダウンロード(zip)

2015.03.28追記

オレの知らないところでクリンナップされていたようです。しかも2種類。
ワンダホー!

jQuery - 『クリックしたらツールチップを表示するスクリプト』をちょっと変えてみた。 - Qiita
http://qiita.com/mrd-takahashi/items/4f27927ced6275b16969

jQuery - 「『クリックしたらツールチップを表示するスクリプト』をちょっと変えてみた。」をちょっと変えてみた。 - Qiita
http://qiita.com/smzk/items/aa55b3cb36d6136a32fc

アナリティクスで追っかけて知るってのもアレやな

2015.06.08追記

バージョン2を作ってみました。
「クリックしたらツールチップを表示するスクリプト」のバージョン2を作ってみた

-Javascript,jQuery
-, , , ,