Loading

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


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

ふぇにば|PhoEniBiR

投稿者プロフィール

わくわくしてて偉い系VTuver ふぇにば です。
少しでもお役に立てておりましたら嬉しいです(。・ω・。)

関連記事

  1. [CSS] ブラウザ毎にずれないCSS!リセットCSS・デフォルトCSSコード公…

    2018.08.07
  2. [CSS] CSSのみでデザインするおしゃれなヘッダー・見出し(h1~h6タグ)…

    2018.06.11
  3. 『Excel VBA』マクロで辞書オブジェクト(KEY-VALUE)の使い方まと…

    2016.09.01
  4. [PHP] ソーシャルボタン自作!PHPでSNSのカウント数を取得する(Face…

    2017.11.25
  5. [PHP] date(): It is not safe to rely on …

    2018.08.08
  6. [PHP] 入力フォームのバリデーションチェックを実装する

    2016.05.09

コメント

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

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

CAPTCHA


New Article

  1. ChatGPTで遊ぶ おもしろい使い方まとめ
  2. ドラクエウォーク スロット どっちがいい
  3. 三國志真戦 戦法中国語翻訳
  4. ドラクエウォーク 2023年装備ガチャ
  5. ドラクエウォーク 覚醒千里行
PAGE TOP