.addEventListener()

JavaScriptの.addEventListener()でhoverした時ツールチップを表示

2022年2月23日2022年3月23日 2分

ツールチップは、要素の上にhoverすると表示される吹き出しで、CSSだけでも作ることはできますがJavaScriptならコード量少なめで簡単に作ることができます。

そんなJavaScriptのツールチップの作り方について、サンプルを交え解説していきます。

.addEventListener()
ツールチップのサンプル
サンプルのコード

.addEventListener()

JavaScriptの .addEventListener() は、クリックなどのイベントを設定することができるメソッドです。

.addEventListener('イベント', 処理（関数）, オプション)

この記事では、以下2つのイベントを発火条件として指定してツールチップを作っています。

mouseover … カーソルが要素へ移動したときに発火するイベント。
mouseleave … カーソルが要素の外に移動したときに発火するイベント。

ツールチップのサンプル

早速ツールチップのサンプルです。

パソコンであれば以下のボタンにカーソルを乗せることで、要素の上に吹き出しのツールチップが表示されます。

かかかず

モバイルの場合は、ボタンをタップしてみてください。

サンプルのコード

コードはHTML・JavaScript・CSSの3種類です。順に解説していきます。

HTML

HTMLは、親要素に「tooltipBlock」のclass名を付けた div タグを作り、その子要素に p タグでツールチップを作り、button タグはツールチップのトリガーとして設置します。

<div class="tooltipBlock">
  <p id="toolTip">ツールチップです。</p>
  <button id="tooltipButton">ツールチップが出る要素</button>
</div>

JavaScript

JavaScriptは、はじめに「tooltipButton」と「toolTip」のid名を持つ要素を取得する .getElementById() で関数宣言を行います。

そして、ボタンにhoverした時とボタンから離れた時でそれぞれ .addEventListener() で条件を分けて、display プロパティを操作します。

const target = document.getElementById("tooltipButton");
const popup = document.getElementById("toolTip");

// ボタンにhoverした時
target.addEventListener('mouseover', () => {
  popup.style.display = 'block';
}, false);

// ボタンから離れた時
target.addEventListener('mouseleave', () => {
  popup.style.display = 'none';
}, false);

かかかず

コード量は少なめのJavaScriptのコードです。

CSS

要素自体が少ない為、CSSのコードもそれに比例して少ないです。

.tooltipBlock {
    position: relative;
}
p#toolTip {
    display: none;
    position: absolute;
    top: -55px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background: #545454;
    padding: 4px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.8;
    animation: fadeIn 0.6s;
    color: #FFF;
    border-radius: 3px;
    filter: drop-shadow(0px 1px 4px #aaa);
}
p#toolTip:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  border: 8px solid transparent;
  border-top: 8px solid #545454;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}