credets for https://sebhastian.com/html-hover-text/#:~:text=A%20hover%20text%20(also%20known,attribute%20for%20your%20HTML%20tags
#html
<body>
<span class="hovertext" data-hover="Hello, this is the tooltip">
Try hover over me
</span>
</body>
#css
.hovertext {
position: relative;
border-bottom: 1px dotted black;
}
.hovertext:before {
content: attr(data-hover);
visibility: hidden;
opacity: 0;
width: 140px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 5px 0;
transition: opacity 1s ease-in-out;
position: absolute;
z-index: 1;
left: 0;
top: 110%;
}
.hovertext:hover:before {
opacity: 1;
visibility: visible;
}