JSFiddle - React, Tailwind, and code Playground

by karin

HTML

<div class="calendarDay">
    <div class="eventContentHolder"> 
        <a class="eventTitle eventTooltip">THIS IS TITLE</a>
         <span>
             This is description
        </span>
    </div>
</div>

CSS

.calendarDay{
    width:120px;
    min-height:80px;
    float:left;
    border:thin solid #CACC70;
    padding:0.2em 0.3em 0em 0.3em;
    margin:0 0.1em;
    text-align:center;
    font-size:0.9em;
}
.eventContentHolder{
    max-height:150px;
    overflow-y:auto;
    overflow-x:hidden; 
}
.eventContentHolder a{  
    display:block;  
}

a.eventTooltip:hover {
    cursor: pointer;
    position: relative;
}
.eventContentHolder span{
    display: none; 
}
.eventContentHolder span {
    padding: 0.1em;
    display: block;
    z-index: 100;
    position:absolute;
    left: 4em;
    top: 2em;
    margin: 0px;
    width: 12em;
    text-decoration: none;
    background:#DFFADC;
    border:thin solid #ddd;
    border-radius:2px;
}