<html>
<head>
<title></title>
<style>
.tooltip {
position: relative;
border-bottom: 1px dotted black;
}
.tooltip::before{
content: attr(tooltip-data);
background-color: #fff;
width: 125px;
min-height: 40px;
position: absolute;
bottom: 24px;
display: flex;
left: -25px;
padding: 8px 53%;
opacity: 0;
justify-content: center;
transition: opacity .5s;
align-items: center;
border: 1px solid #dedede;
border-radius: 5px;
visibility: hidden;
}
.tooltip:after {
content: "";
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
opacity: 0;
transition: opacity .5s;
border-color: #000 transparent transparent transparent;
visibility: hidden;
}
.tooltip:hover::before,.tooltip:hover::after{
opacity: 1;
visibility: visible
}
</style>
</head>
<body>
<h1>
HTML/CSS tooltip
</h1>
<p>
Hover <span class="tooltip" tooltip-data="Tooltip Content">Here</span> to see the tooltip.
</p>
<p>
You can also hover <span class="tooltip" tooltip-data="This is another Tooltip ContentThis is another Tooltip ">here</span> to see another example.
</p>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
</script>
</html>