JSFiddle - React, Tailwind, and code Playground

HTML

<div class="center">
  <span class="tooltip" data-title="ipsum">lorem</span>
</div>

CSS

.tooltip {
  position: relative;
}

.tooltip:before {
  content: attr(data-title);
  position: absolute;
  top: calc(-100% - 12px);
  left: 50%;
  transform: translateX(-50%);
  background: black;
  color: white;
  padding: 3px;
  display: none;
}

.tooltip:hover:before,
.tooltip:hover:after {
  display: block;
}

.tooltip:after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  width: 3vw;
  height: 3vw;
  background: black;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

/* Pozostałości, nieistotne dla ciebie */

html,
body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6vw;
  font-family: Arial, Halvetica;
  text-transform: uppercase;
}