# ツールチップ（CSSのみ）のCSS実装

> 用語にホバーまたはフォーカスすると上に説明が浮かぶツールチップ。opacityとvisibilityの併用でJSなしのフェード表示を実現します。

- カテゴリ: 表示・フィードバック
- URL: https://www.css-dictionary.com/recipes/tooltip-css/

## HTML

```html
<p>
  この機能は
  <span class="tip-anchor" tabindex="0">
    Baseline
    <span class="tip" role="tooltip">主要ブラウザで使える状態かを示すWeb標準の指標</span>
  </span>
  対応です。
</p>
```

## CSS

```css
.tip-anchor {
  position: relative;
  border-bottom: 1px dashed #8a6d3b;
  cursor: help;
}

.tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 6px;
  background: #1a1712;
  color: #fdfaf3;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden; /* 非表示中はホバー判定からも除外する */
  transition: opacity 0.15s, visibility 0.15s;
}

/* 吹き出しの三角 */
.tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1a1712;
}

.tip-anchor:hover .tip,
.tip-anchor:focus-visible .tip {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .tip { transition: none; }
}
```

## 仕組みの解説

ツールチップは absolute + bottom: calc(100% + 8px) でアンカーの真上に配置し、left: 50% と translateX(-50%) で中央揃えにします。非表示は opacity: 0 だけでなく visibility: hidden も併用するのがポイントで、透明なツールチップが上に被さってホバー判定を奪う事故を防ぎつつ、opacityのフェードも効かせられます。tabindex="0" と :focus-visible でキーボードでも表示できます。

## 実装のポイント

長文になる場合はwhite-space: nowrapを外してwidthを指定してください。今後はAnchor Positioningやpopover属性での実装も選択肢になります（対応状況に注意）。

## AIに依頼するときの文例

JSなしのCSSツールチップを作ってください。ホバーと:focus-visibleの両方で表示し、opacityとvisibilityを併用したフェード、::afterによる吹き出しの三角も付けてください。

## 使っているプロパティ

- [position](https://www.css-dictionary.com/property/position.md)
- [opacity](https://www.css-dictionary.com/property/opacity.md)
- [visibility](https://www.css-dictionary.com/property/visibility.md)
- [transition](https://www.css-dictionary.com/property/transition.md)
- [white-space](https://www.css-dictionary.com/property/white-space.md)