JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

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

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.addEventListener()

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

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

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

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

.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 ;}
}