JSFiddle - React, Tailwind, and code Playground

HTML

<div class='content'>
  <div class='area1' tooltip='this is area 1'>

  </div>
  <div class='area2' tooltip='this is area 2'>

  </div>
  <div class='area3' tooltip='this is area 3'>

  </div>
</div>

CSS

.content {
  display: flex;
  flex-direction: column;
}

.area1 {
  background-color: red;
  height: 20px;
  width: 20px;
}

.area2 {
  background-color: orange;
  height: 20px;
  width: 20px;
}

.area3 {
  background-color: violet;
  height: 20px;
  width: 20px;
}

[tooltip]:before {
  position: absolute;
  content: attr(tooltip);
  opacity: 0;
}

[tooltip]:hover:before {
  opacity: 1;
}