指定時間後にツールチップを非表示にする方法【HTML/CSS/JavaScript・サンプルコード付き】

指定時間後にツールチップを非表示にする方法

指定時間後にツールチップを自動で非表示にする方法を紹介します。このサンプルでは、ページを表示した直後からツールチップを表示し、JavaScriptのsetTimeoutを使用して3秒後に自動で非表示へ切り替えます。利用者がマウス操作やクリックをしなくても、設定した時間が経過するとツールチップを消すことができます。

操作方法や補足情報などをページ表示時に一時的に案内し、一定時間が経過したあと自動で消したい場合に利用できます。サンプルではボタンの上にツールチップを表示し、ページ表示から3秒が経過するとフェードしながら非表示になります。

HTMLではボタンとツールチップの文章を変更でき、CSSでは背景色、文字色、余白、角丸、表示位置などを調整できます。JavaScriptでは非表示になるまでの待機時間を変更できるため、用途に合わせて表示時間を設定できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

「ボタン」をクリックするとツールチップが表示され、3秒後に自動で非表示になります。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>指定時間後にツールチップを非表示にする</title>

  <!-- CSSファイル -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- ツールチップ全体 -->
  <div class="timed-hide-tooltip_wrap">

    <!-- タイトル -->
    <div class="timed-hide-tooltip_title">
      3秒後に非表示になるツールチップ
    </div>

    <!-- 説明文 -->
    <p class="timed-hide-tooltip_text">
      ボタンをクリックするとツールチップを表示し、3秒後に自動で非表示にします。
    </p>

    <!-- ツールチップ表示エリア -->
    <div class="timed-hide-tooltip_area">

      <!-- 表示ボタン -->
      <button
        class="timed-hide-tooltip_button"
        type="button">
        ボタン
      </button>

      <!-- ツールチップ -->
      <div class="timed-hide-tooltip_message">
        3秒後に自動で非表示にします。
      </div>

    </div>

  </div>

  <!-- JavaScriptファイル -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* ツールチップ全体 */
.timed-hide-tooltip_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:700px; /* 最大横幅。値を大きくすると全体が横へ広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側余白。値を大きくすると内容と外枠の間隔が広がる */
  border:1px solid #e5e7eb; /* 全体を囲む枠線 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 全体の背景色 */
  text-align:center; /* 内容を中央揃えにする */
  font-family:sans-serif; /* 使用するフォント */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タイトル */
.timed-hide-tooltip_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
}

/* 説明文 */
.timed-hide-tooltip_text{
  margin:0 0 30px; /* 下側30pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間 */
}

/* ツールチップ表示エリア */
.timed-hide-tooltip_area{
  position:relative; /* ツールチップの配置基準にする */
  display:inline-block; /* ボタンの大きさに合わせる */
}

/* 表示ボタン */
.timed-hide-tooltip_button{
  padding:14px 30px; /* 上下14px・左右30pxの内側余白 */
  border:none; /* ブラウザ標準の枠線を削除 */
  border-radius:10px; /* ボタンの角丸 */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタンの文字を太字にする */
  cursor:pointer; /* マウスポインターを指型にする */
}

/* ツールチップ */
.timed-hide-tooltip_message{
  position:absolute; /* ボタンを基準に配置 */
  left:50%; /* 横方向の中央へ配置 */
  bottom:calc(100% + 12px); /* ボタンの上から12px離して配置 */
  transform:translateX(-50%); /* 横方向の中央位置を調整 */
  padding:10px 16px; /* 上下10px・左右16pxの内側余白 */
  border-radius:8px; /* ツールチップの角丸 */
  background:#111827; /* ツールチップの背景色 */
  color:#ffffff; /* ツールチップの文字色 */
  font-size:14px; /* ツールチップの文字サイズ */
  white-space:nowrap; /* 文章を1行で表示 */
  opacity:0; /* 初期状態では透明 */
  visibility:hidden; /* 初期状態では非表示 */
  transition:
    opacity .3s ease,
    visibility .3s ease;
  /*
    0.3秒で表示・非表示を切り替える。
    値を大きくするとゆっくり、小さくすると速くなる。
  */
}

/* ツールチップの三角形 */
.timed-hide-tooltip_message::after{
  content:""; /* 疑似要素を表示 */
  position:absolute; /* ツールチップを基準に配置 */
  top:100%; /* ツールチップの下側へ配置 */
  left:50%; /* 横方向の中央へ配置 */
  transform:translateX(-50%); /* 横方向の中央位置を調整 */
  border:6px solid transparent; /* 三角形を作るための枠線 */
  border-top-color:#111827; /* 上側だけ色を付けて下向き三角形にする */
}

/* ツールチップ表示状態 */
.timed-hide-tooltip_message.is-visible{
  opacity:1; /* ツールチップを表示 */
  visibility:visible; /* 表示状態にする */
}

/* 画面幅640px以下 */
@media (max-width:640px){

  /* ページ全体 */
  body{
    padding:24px 12px; /* スマートフォンでは画面端の余白を縮小 */
  }

  /* ツールチップ全体 */
  .timed-hide-tooltip_wrap{
    margin:24px auto; /* 上下余白を24pxへ縮小 */
    padding:24px 18px; /* 内側余白を縮小 */
  }

}

// ツールチップを表示するボタンを取得
const timedHideTooltipButton=
  document.querySelector(".timed-hide-tooltip_button");

// ツールチップを取得
const timedHideTooltipMessage=
  document.querySelector(".timed-hide-tooltip_message");

// 自動非表示用タイマーを保存
let timedHideTooltipTimer;

// ボタンをクリックしたとき
timedHideTooltipButton.addEventListener("click",function(){

  // すでに動いているタイマーを解除
  clearTimeout(timedHideTooltipTimer);

  // ツールチップを表示
  timedHideTooltipMessage.classList.add("is-visible");

  // 3秒後に実行
  timedHideTooltipTimer=setTimeout(function(){

    // ツールチップを非表示
    timedHideTooltipMessage.classList.remove("is-visible");

  },
  3000 // 3000は3秒。値を大きくすると長く表示され、小さくすると早く非表示になる
  );

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではボタンとツールチップを配置し、CSSではツールチップの位置、背景色、文字色、角丸、表示・非表示の見た目などを設定します。JavaScriptではボタンがクリックされたときにツールチップを表示し、3秒後に自動で非表示にします。

ツールチップは最初は非表示になっており、ボタンをクリックすると表示用のis-visibleクラスが追加されます。その後、JavaScriptのsetTimeout()によって3秒を計測し、時間が経過するとis-visibleクラスを削除して自動で非表示へ戻します。

ボタンを続けてクリックした場合は、それまで動作していたタイマーをclearTimeout()で解除してから新しく3秒を計測します。そのため、最後にボタンをクリックした時点から3秒後にツールチップが非表示になります。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.htmlはツールチップ全体を構成するファイルです。「3秒後に非表示になるツールチップ」のタイトル、説明文、「ボタン」の文字、ツールチップ内の「3秒後に自動で非表示にします。」という文章を変更できます。

style.cssはツールチップのデザインを設定するファイルです。全体の横幅や余白、背景色、ボタンの色や角丸、ツールチップの表示位置、背景色、文字色、文字サイズ、三角形などを変更できます。また、通常時はopacity:0;とvisibility:hidden;で非表示にし、is-visibleクラスが付いたときに表示する設定も行っています。

script.jsはツールチップの表示と自動非表示を制御するファイルです。ボタンをクリックするとis-visibleクラスを追加してツールチップを表示し、setTimeout()で3秒後にクラスを削除して非表示にします。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。

ページを開いた直後はツールチップが非表示になっています。「ボタン」をクリックするとボタンの上に「3秒後に自動で非表示にします。」というツールチップが表示され、そのまま3秒が経過すると自動で非表示になります。再びボタンをクリックすると、同じ動作を繰り返せます。

カスタマイズできる内容
index.htmlではタイトル、説明文、ボタンの文字、ツールチップ内の文章を変更できます。補足説明や操作案内など、表示したい内容に合わせて文章を書き換えられます。

style.cssでは全体の最大横幅、余白、背景色、角丸、ボタンのサイズや色、ツールチップの表示位置、背景色、文字色、文字サイズ、角丸、三角形の大きさなどを変更できます。ツールチップはbottom:calc(100% + 12px);によってボタンの上へ配置されています。

script.jsではsetTimeout()に指定している3000を変更することで、ツールチップが表示されてから自動で非表示になるまでの時間を変更できます。

数値調整
script.js
3000
ツールチップを表示してから自動で非表示にするまでの時間です。3000は3秒を表します。

1000 → 1秒後
3000 → 3秒後
5000 → 5秒後
10000 → 10秒後

例えば5秒後にツールチップを非表示にしたい場合は、script.jsの3000を5000へ変更します。値を大きくするとツールチップが長く表示され、小さくすると早く非表示になります。

style.css
max-width:700px;
ツールチップ全体を囲むエリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
全体の内側余白です。値を大きくすると内容と外枠の間隔が広がり、小さくすると狭くなります。

border-radius:18px;
全体を囲む部分の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示され、小さくすると文字も小さくなります。

margin:0 0 30px;
説明文の下側余白です。30pxを大きくするとボタンとの間隔が広がり、小さくすると狭くなります。

padding:14px 30px;
ボタンの内側余白です。上下の14pxを大きくするとボタンが高くなり、左右の30pxを大きくすると横に広がります。

border-radius:10px;
ボタンの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

bottom:calc(100% + 12px);
ボタンとツールチップの上下間隔です。12pxを大きくするとツールチップがボタンから上へ離れ、小さくすると近づきます。

padding:10px 16px;
ツールチップの内側余白です。上下の10pxと左右の16pxを変更すると、文章とツールチップの外側との間隔を調整できます。

border-radius:8px;
ツールチップの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:14px;
ツールチップ内の文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。

border:6px solid transparent;
ツールチップ下部に表示する三角形の大きさです。6pxを大きくすると三角形が大きくなり、小さくすると小さくなります。

transition:opacity .3s ease, visibility .3s ease;
ツールチップを表示・非表示へ切り替える時間です。0.3秒で変化します。値を大きくするとゆっくり切り替わり、小さくすると速く切り替わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせて全体の横幅が縮小されます。

また、画面幅640px以下ではbodyの余白を24px 12px、ツールチップ全体の余白を24px 18pxへ変更しています。スマートフォン・タブレット・PCで利用できます。