Eyecatch jQuery

Javascript,jQuery

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

2015/05/13

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

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

jquery.tgHoverToolTip イメージ

tgHoverToolTip イメージ

デモ

デモはこちら

タイトルタグを利用したツールチップ解説

HTML

まずは html から。

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

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

CSS

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

JS

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

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

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

プラグインバージョン

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

デモ

プラグインデモ

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

ダウンロードされた方は、コメントしていって頂けると幸いです。

パーフェクトJavaScript (PERFECT SERIES 4)

パーフェクトJavaScript (PERFECT SERIES 4)

井上 誠一郎

価格 : 3,456円

     

-Javascript,jQuery
-, , , ,