Life Collections

対象オブジェクトにフォーカスをあてた際に、ツールチップを表示する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
    }); 
   });
  });
 });

2020.05.17

『jQuery』まとめ記事一覧

本サイトのjQuery関連記事をまとめています。是非お立ち寄りください。 jQuery 関連記事一覧 ...

jQuery関連記事

jQueryのその他記事もまとめてますので、是非お立ち寄りください(｡･ω･｡)

2020.05.17

[jQuery] jQueryでツールチップを自作する方法

対象オブジェクトにフォーカスをあてた際に、ツールチップを表示するjQueryコードを自作しました。是非ご利用ください。 仕様 マウスオーバーしたらチップを表示する ※tipMSG属性の値が、ツールチップとして表示される マウスアウトしたらチップを非...

2020.05.17

[jQuery] パフォーマンス向上のコツ（処理速度向上・高速化 あれこれ）

jQueryで少しでも処理速度を向上させるためのTipsをまとめてみました。 1. セレクタにはクラス名だけでなく要素名も書く $("#navi a")と記載した場合、まずa要素を検索し、その中から#naviが先祖要素にあたるa要素をjQueryオ...

2018.08.10

[jQuery] formのアクションを変更する〜フォーム送信時（Submit時）にボタン毎に遷移先URLを変更する方法〜

「送信ボタンを複数配置して、押したボタンによって遷移するURLを変えたい」。そんな時、クライアントサイドのjQueryで実現できるようなコードをご紹介します！ 概要 今回は、submitボタンに新たな属性を追加し、その属性に指定されたURLで遷移する先が決...

2018.08.09

[jQuery] リアルタイムに入力フォームのバリデーションをチェックするコード集

WEBページ作成時に作るに手間がかかる入力バリデーションチェック。PHP等のサーバサイドでのチェック方法もありますが、クライアントサイドでチェックできればリアルタイムにNG箇所を伝えることができます！今回は、javascript・jQueryで実装する入力フォ...

2018.06.20

[jQuery] カーソルをあてた時に画像を切り替える方法（マウスオーバー・マウスアウト）

「送信ボタンにカーソルを押した時に色を変えたい」こういったユーザビリティに関する要望は少なくないです！CSSでも実現できますが、CSSでは複数時に1つ1つソースコードを書かないといけなくなっちゃうので、今回はjQueryで、カーソルをあてた際に画像を切り替える...