cssとhtmlのみ！要素にhoverした際のツールチップを簡単な仕組みでつくる方法

この記事をシェアする：

↑こちらの動画をご覧ください。要素にhoverすると、ツールチップが表示できます。cssのみでできているので、とても簡単に実装することができます。

それでは次のセクションから、上記の動画のような、htmlとcssだけで作成できるツールチップを実装するためのコードを書いていきます。

コードをご紹介

[html]

<div class="tooltip-container">
  <p class="tooltip-container-target">hoverでTooltipを表示</p>
  <span class="tooltip-item">Only CSS Tooltip</span>
</div>

<div class="tooltip-container">
  <p class="tooltip-container-target">hoverで右にTooltipを表示</p>
  <span class="tooltip-item is-right">Only CSS Tooltip</span>
</div>

<div class="tooltip-container">
  <p class="tooltip-container-target">hoverで左にTooltipを表示</p>
  <span class="tooltip-item is-left">Only CSS Tooltip</span>
</div>

<div class="tooltip-container">
  <p class="tooltip-container-target">hoverで上にTooltipを表示</p>
  <span class="tooltip-item is-top">Only CSS Tooltip</span>
</div>

↑上から順に、デフォルト状態(下に出ます)、
右に表示、左に表示、上に表示です。

[css]

.tooltip-container {
  margin: 100px auto;
  position: relative;
  /* width: max(264px, min(calc(100vw - 8px), 600px)); */
  text-align: center;
  width: clamp(240px, calc(100vw - 8px), 240px);
}
.tooltip-item {
  background: hsla(180, 75%, 70%, 1);
  border-radius: 5px;
  color: #fff;
  display: block;
  font-size: .75rem;
  left: 50%;
  opacity: 0;
  padding: .25rem .75rem;
  position: absolute;
  transform: translateX(-50%);
  transition: opacity .3s;
  width: 7rem;
}
.tooltip-container-target {
  cursor: pointer;
  display: block;
}
.tooltip-container-target:hover + .tooltip-item {
  opacity: 1;
}
.tooltip-item.is-left {
  left: -140px;
  top: 50%;
  transform: translateY(-50%);
}
.tooltip-item.is-right {
  left: initial;
  right: -140px;
  top: 50%;
  transform: translateY(-50%);
}
.tooltip-item.is-top {
  left: 50%;
  top: -2.5rem;
  transform: translateX(-50%);
}

↑重要なのは、
.tooltip-container-target:hover + .tooltip-item
この部分です。隣接セレクタ( + ) を使用して、
.tooltip-container-target の「隣の」
.tooltip-item に対してのスタイルを設定していると言うことです。

ツールチップが表示されるデフォルト位置は下で、そのほかは
.is-left, .is-right, .is-top
という各classを付与することで、それぞれの位置に表示させている仕組みになります。