【jQuery入門】ツールチップを実装する

ソースコード

<div id="article">
  <span class="tiplink" data-tips="人気のJavaScriptライブラリ">jQuery</span>のパッケージは、<span class="tiplink" data-tips="コメントや改行、スペースを除いた圧縮版">production</span>、<span class="tiplink" data-tips="コメントや改行、スペースを含んだ非圧縮版">development</span>という2種類の形式で提供されています。
</div>
<div class="tip"></div>

$(function () {
  $(".tiplink")
    .mouseenter(function (e) {
      $(".tip:not(:animated)")　// アニメーション中でない場合のみ処理
        .text($(this).data("tips")) // data-tips属性からテキストを設定
        .css({
          top: e.pageY, // マウスの座標に応じて表示位置を調整
          left: e.pageX
        })
        .fadeIn(500); // 500ミリ秒かけてフェードイン
      // .fadeTo(500, 0.8); 
    })
    .mouseleave(function (e) {
      $(".tip").fadeOut(1000);
    });
});

#article {
  line-height: 150%;
}

.tiplink {
  border-bottom: 1px dotted Black;
  cursor: pointer;
}

.tip {
  border: 1px solid Black;
  background-color: #ffc;
  font-size: smaller;
  padding: 2px;
  position: absolute;
  display: none;
}

See the Pen
jQuery18-1 by shinjiezumi (@sezumi)
on CodePen.

ツールチップを実装するための準備

ツールチップ用のテキストはdata-tips属性として表現

data-xxx属性は開発者が自由に値を設定できる特別な属性で、data-tipsという属性によって、ツールチップとして表示すべきテキストを設定する。

このように可変な情報(パラメータ)と機能（イベント処理）を明確に切り離しておくことで、あとからコードが再利用しやすくなる

マウスポインターも変更する

ツールチップに関連付いた<span>要素では、破下線を引き、かつマウスポインターをポインタにすることで、ツールチップが関連付いていることで視覚的にもよりわかりやすくなる。

ツールチップの表示領域を準備する

ツールチップには、tipというクラスを割り当てている。ツールチップを表示する際にcssメソッドで設定しても構わないが、静的に決まる情報はできるだけcssファイルとして分離するのがおすすめ。

ツールチップの表示位置はあとからマウスの位置によって決まるため、positionプロパティにはabsoluteを指定しておく。

マウスポインターの動きによってツールチップを表示させる

マウスポインターが要素にあたったら、ツールチップを表示

まずツールチップとなるdiv要素を取得する。この際に$('.tip:not(:animated))と「アニメーション中でない」という条件を入れる。これはマウスを素早く動かした際にアニメーションが続いてしまうため。

残りはサンプルのコメント参照。

fadeToメソッドで透明度を自由に設定する

fadeIn／fadeOutメソッドは、cssのopacityプロパティ(透明度)を0⇔１の間で徐々に変化させる。
もしも完全に透明ではなく、ある程度まで透明度まで変化させたいという場合にはfadeToメソッドを利用する

えず

東京でフリーランスのWebエンジニアやっています。 今はPHPとGoをメインに、プライベートでは広く浅くをモットーにフロント〜インフラまで学習しています。 当面の目標はDevOps寄りのオールラウンダー。