Loading

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

DI_IMG_5763_TP_V

対象オブジェクトにフォーカスをあてた際に、ツールチップを表示する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のその他記事もまとめてますので、是非お立ち寄りください(。・ω・。)

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

[SQLServer] 対象DBに存在する全テーブルのデータ件数取得クエリ

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


New Article

  1. CAFEonnnanoko15212650_TP_V
  2. sangokutenbu_tyoharuka
  3. 三国天武 専用神器 臥龍諸葛 八陣図
  4. sangokutenbu_kokyoku_taosikata
  5. ドラクエウォーク 混乱耐性 こころ

人気記事

  • 該当なし
PAGE TOP