<p data-tooltip="Текс подсказки">
  Наведи на меня
</p>

[data-tooltip] {
  position: relative;
  margin: 0 auto;
  width: 104px;
  cursor: pointer;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
  opacity: 1;
}

[data-tooltip]::after {
  left: 50%;
  bottom: -44px;
  position: absolute;
  content: attr(data-tooltip);
  display: block;
  width: 120px;
  padding: 8px;
  border-radius: 8px;
  background: orange;
  text-align: center;
  opacity: 0;
  transition: .3s;
  transform: translate(-50%);
}

[data-tooltip]::before {
  left: 50%;
  bottom: -10px;
  position: absolute;
  content: '';
  display: block;;
  border: 10px solid transparent;
  border-bottom: 10px solid orange;
  opacity: 0;
  transition: .3s;
  transform: translate(-50%);transform: translate(-50%);
}