CSS でツールチップを実装する

2024-10-16

アイコンボタンをホバーしたときにツールチップによりボタンの説明を表示したい。

<button onClick={handleAddPage}>
  <PlusIcon />
</button>

やり方は以下:

<div className={styles.iconWrapper}>
  <button onClick={handleAddPage}>
    <PlusIcon />
    <span className={styles.tooltipText}>ページを追加</span>
  </button>
</div>

.iconWrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltipText {
  visibility: hidden;
  width: 120px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.iconWrapper:hover .tooltipText {
  visibility: visible;
  opacity: 1;
}

iconWrapper を親クラス、実際のツールチップテキストを子クラスとする
```
visibility
```
と
```
opacity
```
で表示・非表示を切り替える
親要素を
```
position: relative;
```
、子要素を
```
position: absolute;
```
とすることで、iconWrapper を基準に絶対位置で配置する。具体的な位置は bottom と left で指定する