JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<a href="" data-help="Красивые и большие дома">Дома</a><br>
<a href="" data-help="Ковры ручной работы">Ковры</a><br>
<a href="" data-help="Тяжелый кирпич красного цвета">Кирпич</a><br>

CSS

a[data-help] {
  position: relative;
  text-transform: uppercase;
  color: #0617ff;
  font-family: sans-serif;
  text-decoration: none;
  font-weight: 600;

  margin-right: 20px;
}
a[data-help]:before {
  content: attr(data-help);
  display: none;
  position: absolute;
  top: 100%;
  margin-top: 5px;
  font-size: .8em;
  color: #F1F1EF;
  text-transform: none;
  white-space: nowrap;
  font-weight: normal;
  background-color: #828282;
  padding: 5px;
}
a[data-help]:hover {
  color: #666DDC;
  z-index: 1;
}
a[data-help]:hover:before {
  display: block;
}