【JS】タイトルタグを利用したツールチッププラグイン「jquery.tgHoverToolTip」をjQueryで作ってみた

jQuery ネタ。
以前作成したクリックタイプのツールチップ「jquery.tgClickToolTip」のスクリプトを拡張し、クリックではなくマウスオーバーでポップアップするようにしてみました。

クリック版ではリンクタグを利用していたためにボタンに埋め込んだりは出来なかったのですが、titleタグを利用する形式にしたため、リンクの他にも使えるようにもなっています。

jquery.tgHoverToolTip イメージとデモ

イメージ

デモ

デモはこちらから。

各種コード

HTML

まずは html から。

[html]

タイトル ?
メッセージ ?

"タイトル"の説明

"メッセージ"の説明
複数行の内容を
書くことも可能。

複数行の内容を書くことも可能。
複数行の内容を書くことも可能。
複数行の内容を書くことも可能。
複数行の内容を書くことも可能。

ボタンを押すと確認画面が開きますので、内容を確認してください。
修正がある場合は、適宜修正してください。

"リセット"の説明

[/html]

inputフォーム、テキストエリア、送信ボタン、リセットボタンを用意。
各フォームにその内容を表示させるのかを、titleタグで設定。
ツールチップを表示させたいものに対し、クラスで hoverToolTip を与えます。

ツールチップ内容は、タイトルタグで設定したID名と同名のIDを持った p タグで作成。改行も利きます。
ツールチップ内容へは最初からクラス invisible を当てておき、非表示とします。

CSS

では次にスタイルシート。
主にツールチップとマウスオーバーさせるオブジェクトの装飾です。

[css]

[/css]

Javascript

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

[js]

[/js]

解説

軽く解説。
マウスオーバーでしたオブジェクトに設定されている「note**」を取得し、取得したものと同名のID名ツールチップに対し、invisibleクラスを削除 ⇔ 付与しています。
hover() を使っているので、カーソルの ON/OFF でそれぞれ処理を書いています。

ボタンやリンクの上でマウスを動かした場合に、ポッポアップされたツールチップがマウスに追随するように、 mousemove関数で、現在地座標を取得し、位置を調整しています。

デモ

デモはこちらから。

プラグインのダウンロード

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

-Javascript,jQuery
-ツールチップ, プラグイン