CSS Tips | 超実務コアCSSテクニック：UIパーツ － ツールチップCSSのみ

Web APP CSS
スポンサーリンク

ツールチップは「補足情報を、邪魔せず、そっと添える」UIパーツ

ツールチップは、ボタンやアイコンの近くに ふわっと現れる説明文。 ユーザーの操作を邪魔せず、必要なときだけ情報を出すのが役割です。

CSSだけで作る場合は ホバー時に表示する仕組み（visibility / opacity / transform）＋位置調整＋矢印の擬似要素 という構造が基本になります。

ここでは CSS と Tailwind CSS の両方で、 初心者でも迷わないように、実務で使えるツールチップを丁寧に解説します。

ツールチップの基本構造

親要素を relative にする

子要素（ツールチップ）を absolute で配置

hover 時に opacity と transform を変化させてふわっと表示

擬似要素で矢印を作る

この4つを押さえると、どんなツールチップでも作れます。

例1：最も基本の「上にふわっと出るツールチップ」

CSS 版

.tooltip-wrap {
  position: relative;
  display: inline-block;
}

.tooltip-wrap .tooltip {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #1f2937;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.tooltip-wrap:hover .tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.tooltip-wrap .tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #1f2937 transparent transparent transparent;
}
CSS
<div class="tooltip-wrap">
  <button>ボタン</button>
  <div class="tooltip">ツールチップの説明</div>
</div>
HTML

Tailwind 版（CSSなしで完全再現）

<div class="relative inline-block group">
  <button class="px-3 py-2 bg-slate-800 text-white rounded">ボタン</button>

  <div
    class="absolute bottom-[120%] left-1/2 -translate-x-1/2 translate-y-[6px]
           bg-slate-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap
           opacity-0 invisible
           group-hover:opacity-100 group-hover:visible group-hover:translate-y-0
           transition">

    ツールチップの説明

    <span
      class="absolute top-full left-1/2 -translate-x-1/2
             border-[6px] border-solid
             border-slate-800 border-x-transparent border-b-transparent">
    </span>
  </div>
</div>
HTML

深掘りポイント

opacity と visibility を同時に使うことで、 「ふわっと出て、ふわっと消える」自然なアニメーションになります。 transform の Y 軸を少し動かすと、さらに気持ちよくなります。

例2：右側に出るツールチップ（アイコン説明に最適）

CSS 版

.tooltip-right {
  position: relative;
  display: inline-block;
}

.tooltip-right .tooltip {
  position: absolute;
  left: 110%;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: #334155;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.tooltip-right:hover .tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.tooltip-right .tooltip::after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent #334155 transparent transparent;
}
CSS

Tailwind 版

<div class="relative inline-block group">
  <span class="p-2 bg-slate-700 text-white rounded">i</span>

  <div
    class="absolute left-[110%] top-1/2 -translate-y-1/2 -translate-x-[6px]
           bg-slate-700 text-white text-xs px-2 py-1 rounded whitespace-nowrap
           opacity-0 invisible
           group-hover:opacity-100 group-hover:visible group-hover:translate-x-0
           transition">

    詳細情報

    <span
      class="absolute right-full top-1/2 -translate-y-1/2
             border-[6px] border-solid
             border-transparent border-r-slate-700">
    </span>
  </div>
</div>
HTML

深掘りポイント

右側に出す場合は、 矢印の向き（border の方向）を変えるだけでOKです。 アイコン説明や設定項目の補足に向いています。

例3：下に出る「フォーム補足説明ツールチップ」

CSS 版

.tooltip-bottom {
  position: relative;
  display: inline-block;
}

.tooltip-bottom .tooltip {
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: #1e293b;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.tooltip-bottom:hover .tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.tooltip-bottom .tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #1e293b transparent;
}
CSS

Tailwind 版

<div class="relative inline-block group">
  <input type="text" class="border px-2 py-1 rounded" placeholder="メール">

  <div
    class="absolute top-[120%] left-1/2 -translate-x-1/2 -translate-y-[6px]
           bg-slate-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap
           opacity-0 invisible
           group-hover:opacity-100 group-hover:visible group-hover:translate-y-0
           transition">

    メールは正しい形式で入力してください

    <span
      class="absolute bottom-full left-1/2 -translate-x-1/2
             border-[6px] border-solid
             border-transparent border-t-slate-800">
    </span>
  </div>
</div>
HTML

深掘りポイント

フォームの補足説明は下に出すと自然です。 入力欄の邪魔にならず、視線の流れもスムーズになります。

例4：フェード＋ズームの“リッチなツールチップ”

CSS 版

.tooltip-zoom {
  position: relative;
  display: inline-block;
}

.tooltip-zoom .tooltip {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  background: #0f172a;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.tooltip-zoom:hover .tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}
CSS

Tailwind 版

<div class="relative inline-block group">
  <button class="px-3 py-2 bg-indigo-600 text-white rounded">詳細</button>

  <div
    class="absolute bottom-[120%] left-1/2 -translate-x-1/2 scale-90
           bg-slate-900 text-white text-xs px-3 py-2 rounded-lg
           opacity-0 invisible
           group-hover:opacity-100 group-hover:visible group-hover:scale-100
           transition">

    高度な設定を開きます
  </div>
</div>
HTML

深掘りポイント

scale を使うと「ふわっと拡大して出る」演出が可能。 LP やアプリの UI でよく使われるリッチなツールチップです。

ツールチップ設計の重要ポイント

位置は「上・右・下・左」のどれかに固定

動かしすぎると不安定に見えるので、 基本は1方向に固定します。

opacity＋visibility＋transform の組み合わせが最強

opacity だけだと「見えないけどクリックできる」状態になることがあるため、 visibility を併用するのが正解。

矢印は border を使う

CSSだけで矢印を作るなら border-width と border-color の組み合わせが最も軽量で綺麗。

Tailwind では group-hover を使う

親要素に group を付けて、 子要素で group-hover: を使うのが定番。

そのまま使える「万能ツールチップ」（Tailwind）

<div class="relative inline-block group">
  <button class="px-3 py-2 bg-slate-700 text-white rounded">ヘルプ</button>

  <div
    class="absolute bottom-[120%] left-1/2 -translate-x-1/2 translate-y-[6px]
           bg-slate-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap
           opacity-0 invisible
           group-hover:opacity-100 group-hover:visible group-hover:translate-y-0
           transition">

    ここでは設定を変更できます

    <span
      class="absolute top-full left-1/2 -translate-x-1/2
             border-[6px] border-solid
             border-slate-800 border-x-transparent border-b-transparent">
    </span>
  </div>
</div>
HTML

どんな UI にも使える、 軽量で美しいツールチップテンプレートです。

さいごに

ツールチップは、 「必要なときだけ、そっと情報を添える」 UI パーツです。

opacity・visibility・transform の組み合わせを理解すると、 CSSだけで美しいツールチップが簡単に作れます。

もしあなたが作っている UI（ボタン、アイコン、フォームなど）があれば、 その画面に合わせた最適なツールチップを一緒に設計できます。

スポンサーリンク
タイトルとURLをコピーしました