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

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

<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 で指定する