マウスホバーで表示される吹き出し

はじめに

本記事はProgaku Advent Calendar 2022の19日目の記事です。

このへんの情報はネットにたくさん転がってるけど、どうも見づらかったので使いやすいように自分用にメモ。

見づらい情報を増やすだけだったら申し訳ない。

サンプル

codepen

コード

<div class="div">
  <p>ここにホバーすると吹き出しが表示</p>
  <span class="baloon">吹き出し</span>
</div>

.div {
  position: relative;
}

.baloon {
  display: none;
  position: absolute;
  padding: 10px;
  font-size: 16px;
  color: #fff;
  border-radius: 5px;
  background-color: rgb(14, 152, 190);
  width: 100px;
}

.div:hover .baloon {
  display: inline-block;
  top: 40px;
  left: 20px;
}

.baloon:before {
  content: "";
  position: absolute;
  top: -45%;
  left: 50%;
  border: 10px solid transparent;
  border-top: 10px solid rgb(14, 152, 190);
  margin-left: -15px;
  transform: rotateZ(180deg);
}

説明

特に難しいことはしてない。

吹き出しの三角は、beforeの疑似要素でくっつけてて、transformで矢印の方向を変えてる。

あとは、topとleftを変更すると位置調整ができる。