誰でも簡単に実装できる！CSS・HTML・JavaScriptで作るツールチップの基本と応用

Webサイトをより便利で直感的にするための小技として、「ツールチップ（tooltip）」は非常に有用なパーツです。マウスを乗せたときに補足情報を表示したり、入力欄の使い方を示したりと、ユーザー体験を向上させる場面でよく使われます。この記事では、CSSとHTML、そしてJavaScriptを活用してツールチップを実装する方法を基礎から丁寧に解説します。初心者でもすぐに真似できる実装例を多数紹介しますので、ぜひ実際に試してみてください。

ツールチップとは何か？その役割と利点
HTMLとCSSだけで作るシンプルなツールチップ
JavaScriptを使って動的にツールチップを制御する
より高度なデザイン：アニメーションや位置調整
よくある実装ミスとその対処法
実用例：フォームの入力補助に使うツールチップ
まとめ：ツールチップは小さくても効果絶大なUIパーツ

ツールチップとは何か？その役割と利点

ツールチップとは、ユーザーがある要素にマウスオーバーした際に、説明文や補足情報が小さなボックスとして表示されるUIのことです。たとえば、ボタンの意味やアイコンの補足説明を出すのに使われます。

主なメリットは以下の通りです：

情報を補足できる
画面をシンプルに保てる
入力や操作のガイドに役立つ

これらはすべて、ユーザーの迷いを減らし、快適な操作につながります。

HTMLとCSSだけで作るシンプルなツールチップ

HTMLとCSSだけでツールチップを実装することができます。以下は基本的なコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSSだけでツールチップ</title>
  <style>
    .tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }

    .tooltip .tooltip-text {
      visibility: hidden;
      background-color: #333;
      color: #fff;
      padding: 5px 8px;
      border-radius: 4px;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity 0.3s;
      white-space: nowrap;
    }

    .tooltip:hover .tooltip-text {
      visibility: visible;
      opacity: 1;
    }
  </style>
</head>
<body>

<p>こちらにマウスを乗せてください：
  <span class="tooltip">アイコン
    <span class="tooltip-text">これはツールチップの説明です</span>
  </span>
</p>

</body>
</html>

このコードでは、.tooltipクラスで囲ったテキストにマウスを乗せると、.tooltip-textで指定した補足説明が表示されます。

JavaScriptを使って動的にツールチップを制御する

JavaScriptを使うと、より柔軟にツールチップを操作できます。たとえば、ボタンをクリックしたときに表示されるようにしたり、ツールチップの中身を動的に変更したりできます。

以下に簡単な例を示します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScriptでツールチップ</title>
  <style>
    .tooltip {
      position: relative;
      display: inline-block;
    }

    .tooltip-content {
      display: none;
      position: absolute;
      background-color: black;
      color: white;
      padding: 5px;
      border-radius: 4px;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
    }
  </style>
</head>
<body>

<div class="tooltip" id="tooltip1">
  <button onclick="toggleTooltip()">クリックして説明を見る</button>
  <div class="tooltip-content" id="tooltipText">
    JavaScriptで表示されるツールチップです。
  </div>
</div>

<script>
  function toggleTooltip() {
    const tooltip = document.getElementById('tooltipText');
    tooltip.style.display = tooltip.style.display === 'block' ? 'none' : 'block';
  }
</script>

</body>
</html>

このスクリプトでは、ボタンのクリックでツールチップが出たり消えたりします。

より高度なデザイン：アニメーションや位置調整

CSSを使えばツールチップの表示方法にアニメーションを追加したり、表示位置を上下左右に調整することが可能です。

例として、ツールチップを上部ではなく「右側」に表示したい場合：

.tooltip .tooltip-text {
  bottom: auto;
  top: 50%;
  left: 120%;
  transform: translateY(-50%);
}

また、フェードインのアニメーションを追加することで、より滑らかな表示が実現します。

.tooltip .tooltip-text {
  transition: opacity 0.5s ease;
}

よくある実装ミスとその対処法

表示されない

→ position: relative や z-index が不足している可能性あり。

スマホでうまく機能しない

→ hoverが機能しないため、クリックやタッチイベントで制御する工夫が必要です。

テキストが枠からはみ出す

→ white-space: nowrap; や max-width などのスタイルを適用しましょう。

実用例：フォームの入力補助に使うツールチップ

ユーザーフォームで活用する実装例：

<label for="email">メールアドレス:
  <span class="tooltip">?
    <span class="tooltip-text">有効なメールアドレスを入力してください</span>
  </span>
</label>
<input type="email" id="email" name="email">

小さな「?」にマウスを合わせると説明が表示され、ユーザーの入力ミスを防ぐことができます。