JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
	<ul>
		<span egy="1" ketto="2"><a href="#">Link #1</a></span>
		<span egy="1" ketto="2"><a href="#">Link #1</a></span>
    <span egy="1" ketto="2"><a href="#">Link #1</a></span>
    <span egy="1" ketto="2"><a href="#">Link #1</a></span>
	</ul>
  
  <p>
      Some paragraph of text and some other things, mostly containing information about an
      object<span ketto="A whitepaper eg asdef asf asdg sadg sadgsdag sadgasdg asdgasd sdg sddg sdag sdag sadg sadg sd efgeokog  about the object" egy="[1]"></span>,
      where the info has a footnote.
    </p>
</div>

CSS

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: arial;
    font-size: 16px;
}
a{
    color: #000000;
}
a:hover{
    color: #860000;    
}
#menu{
    margin: 15px auto;
    padding: 20px;
    width: 300px;
    background: #DDDDDD;
    
    border-radius: 5px;
    box-shadow: 0 0 5px #000000;
}
#menu ul{
    list-style: none;
}
#menu ul span{
    position:relative;
}
#menu span:before{
    margin-right: 10px;
    content: attr(egy);
    display: inline;
    transition: opacity 0.7s ease;
    -webkit-transition: opacity 0.7s ease;
}
#menu span:after{
    content: attr(ketto);
    display: inline;
    position:absolute;
    opacity:0;
    width: 220px;
    background: rgba(255, 255, 255, 0.95);
    padding: 5px;
    
    transition: opacity 0.7s ease;
    -webkit-transition: opacity 0.7s ease;
}
#menu span:hover:after{
    opacity:1;
}
#menu span:hover:before{
    opacity:1;
}