JSFiddle - React, Tailwind, and code Playground

by techappetite

HTML

<div id="content">
    Lorem ipsum test text this is some cool text.<br />
    <span class="desc">Don't<div>Grammer: This is a contraction.</div></span> you think this is pretty awesome?
</div>

CSS

#content{
    font-family:Calibri;
    font-size:12px;
    margin:0 auto;
    width:80%;
    border:1px solid blue;
    padding:10px;
    border-radius:7px;
    
    padding:10px;
}
.desc {
    position:relative;
    border-bottom:1px dotted red;
}
.desc div {
    display:none;
}
.desc:hover div{
    display:inline;
    position:absolute;
    top:1.2em;
    right:0px;
    background-color:yellow;
    border:1px solid red;
}