JSFiddle - React, Tailwind, and code Playground

by catnose99

HTML

<h1>CSSでツールチップ（吹き出し）</h1>
<br>
<br>

例1
<span class="tooltip">
  <span class="tooltip-text">サンプル</span>
  Example
</span>

<br>
<br>
<br>

例2
<button class="tooltip">
  ✏️
  <span class="tooltip-text">編集する</span>
</button>

SCSS

.tooltip {
  position: relative;
  cursor: pointer;
  &:hover .tooltip-text {
    opacity: 1;
    visibility: visible;
  }
}
.tooltip-text {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -35px;
  display: inline-block;
  padding: 5px;
  white-space: nowrap;
  font-size: 10.5px;
  line-height: 1.3;
  background: #333;
  color: #fff;
  border-radius: 3px;
  transition: 0.3s ease-in;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  &:before {
    content: '';
    position: absolute;
    top: -13px;
    left: 50%;
    margin-left: -7px;
    border: 7px solid transparent;
    border-bottom: 7px solid #333;
  }
}