対象オブジェクトにフォーカスをあてた際に、ツールチップを表示するjQueryコードを自作しました。是非ご利用ください。
仕様
- マウスオーバーしたらチップを表示する
※tipMSG属性の値が、ツールチップとして表示される - マウスアウトしたらチップを非表示にする
- カーソルと同じ動きでツールチップが移動する
ソースコード
html・CSSコード
表示したいメッセージを『tipMSG』の値として設定します。
<a href="#" tipMSG="aタグの属性にtipMSGを追加した場合の例です。">tooltipサンプル</a>
.pbTipMSG{ border: dotted #888888 1px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 10px; font-size: 16px; background-color: #ececec; }
jQueryコード
$(document).ready(function(){ $("[tipMSG]").each(function(){ /* ◯各々のツールチップにフォーカス時 */ $(this).mouseover(function(e){ /* ◯eを使ってるので引数にeが必要! */ /* ◯tipMSGに書いている内容を表示 */ $(this).after("<div class='pbTipMSG'>"+$(this).attr("tipMSG")+"</div>"); $("div.pbTipMSG").css({ position: "absolute", top: e.pageY+(-35), left: e.pageX+20 }); }); /* ◯各々のメニューにフォーカスアウト時 */ $(this).mouseout(function(e){ $("div.pbTipMSG").remove(); }); /* ◯マウス上についていくようにする */ $(this).mousemove(function(e){ $("div.pbTipMSG").css({ top: e.pageY+(-35), left: e.pageX+20 }); }); }); });
jQuery関連記事
jQueryのその他記事もまとめてますので、是非お立ち寄りください(。・ω・。)
この記事へのコメントはありません。