JSFiddle - React, Tailwind, and code Playground

by firegroove

HTML

<div  class="couponcode">
First Link
<span class="coupontooltip" style="display: none;">Content 1</span>
</div>
<div  class="couponcode">
Second Link
<span class="coupontooltip" style="display: none;"> Content 2</span>
</div>

CSS

.coupontooltip {
background: #C8C8C8;
margin-left: 28px;
padding: 10px;
position: absolute;
z-index: 1000;
width:200px;
height:100px;
}
.couponcode{
margin:100px;
}

JavaScript

window.addEventListener("load", function () {
    var couponcodes = document.getElementsByClassName("couponcode");
    for (var i = 0; i < couponcodes.length; i++) {
        couponcodes[i].addEventListener("mouseover", function () {
            var coupontooltip = this.getElementsByClassName("coupontooltip")[0];
            coupontooltip.removeAttribute("style");
        });
        couponcodes[i].addEventListener("mouseout", function () {
            var coupontooltip = this.getElementsByClassName("coupontooltip")[0];
            coupontooltip.style.display = "none";
        });
    }
});