JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="container">
<p class="top">Der Text soll immer hier stehen.</p>
<p class="class">
<a href="#" class="text">Eins<span>Hier steht ein Text.</span></a> | <a href="#" class="text">Zwei<span>Hier steht ein Text.</span></a> | <a href="#" class="text">Drei<span>Hier steht ein Text.</span></a> | <a href="#" class="text">Vier<span>Hier steht ein Text.</span></a> | <a href="#" class="text">Fuenf<span>Hier steht ein Text.</span></a> | <a href="#" class="text">Sechs<span>Hier steht ein Text.</span></a> | <a href="#" class="text">Sieben<span>Hier steht ein Text.</span></a> | <a href="#" class="text">Acht<span>Hier steht ein Text.</span></a>
</p>

CSS

*, html, body {margin:0; padding:0;}

html{
}

.container{
background-color: #CCC;
width: 1000px;
height: 500px;
padding: 100px 0 0 0;
}

.class{
margin: 0 auto 0 auto;
text-align: center;
}

.top{
text-align: center;
margin: 0 auto 0 auto;
padding: 50px 0 50px 0;
color: red;
}

a.text {
  position: relative;
  text-decoration: none;
}

a.text span {display: none;}

a.text:hover span {
   display: block;
   position: absolute;
   content: attr(title);
   text-align: center;
   left: 50%;
   top: -40px;
   width: 150px;
}