JSFiddle - React, Tailwind, and code Playground

by honglonglong

HTML

<p id="tips"> This is some text: 
    <div>
    <a href="#" class="overlink" id="1"> 
        <strong> Mouse over
here </strong>
    </a>
    this is some more text:

        <div id="note1"> (This is the help text that will be displayed on rollover <a href="http://google.com" target="_blank">test link</a>
in compliant browsers : This is the help text that will be displayed on rollover 
in compliant browsers. This is the help text that will be displayed on rollover 
in compliant browsers : This is the help text that will be displayed on rollover 
in compliant browsers. ) </div> 
</div>
</p>

CSS

p#tips a {
text-decoration:none;
border-bottom:2px solid green;
color: #FF0000;
}
p#tips a:hover {
color: #666666;
background: #FFFFCC;
text-decoration: none;
}
#note1{
    display:none;
    position:absolute;
    top:0px;
    left:0px;
    width:150px;
    border: solid 1px gray;
padding: 5px;
margin: 10px;
z-index: 100;
color: #0000CC;
background: #FFFFCC;
font: 10px Verdana, Arial, Helvetica, sans-serif;
text-align: center;
border: 1px solid #666666;
text-decoration: none;
}

JavaScript

$(".overlink").each(function() {
    $(this).mouseover(function() {
        $(this).parent().find("div").show();
    });
    $(this).parent().find("div").mouseleave(function() {
        $(this).hide();
    });
});