JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

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

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: #7C806C;
  text-transform: none;
  white-space: nowrap;
  font-weight: normal;
}
a[data-help]:hover {
  color: #666DDC;
}
a[data-help]:hover:before {
  display: block;
}