ツールチップとは

アイコンやボタンにマウスを重ねたときだけ表示される、小さな補足説明の吹き出し。

概要

アイコンやボタンなど、文字だけでは意味が伝わりにくい部品にマウスを重ねる（ホバー）か、キーボードでフォーカスしたときだけ表示される小さな吹き出しです。常に画面に出しっぱなしにせず、必要なときだけ補足情報を出せるので、画面をすっきり保てます。

別名

表記ゆれ：ツールチップ、ツールチップス、ホバーヒント、tooltip

英語の “tool” + “tip”（道具の先端＝ちょっとした助言）が語源です。

AI への伝え方

「ツールチップを付けて」で通じます。スマホではホバーができないため、「タップでも表示できるようにして」と伝えると、タッチ操作にも対応したコードになります。

似たパーツとの違い

似た部品に「ポップオーバー」があります。ツールチップは 1〜2 行程度の短い説明用、ポップオーバーはボタンやリンクを含むもう少し複雑な内容を表示する用途に向いています。

デモ

コード

HTML

<div class="tooltip-demo">
  <button class="tooltip-demo__trigger" type="button" aria-describedby="tooltip-demo-1">
    保存
  </button>
  <span class="tooltip-demo__bubble" role="tooltip" id="tooltip-demo-1">
    Ctrl + S でも保存できます
  </span>
</div>

CSS

.tooltip-demo {
  position: relative;
  display: inline-block;
  font-family: sans-serif;
}

.tooltip-demo__trigger {
  padding: 10px 20px;
  border: 1px solid #999;
  border-radius: 8px;
  background: #fff;
  font-size: 15px;
  cursor: pointer;
}

.tooltip-demo__bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1a1a1a;
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

.tooltip-demo__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1a1a1a;
}

/* ホバーまたはキーボードフォーカスで表示する */
.tooltip-demo__trigger:hover + .tooltip-demo__bubble,
.tooltip-demo__trigger:focus-visible + .tooltip-demo__bubble {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}