JSFiddle - React, Tailwind, and code Playground

HTML

<div class="div-hover">Hover here
    <div class="div-tooltip">
        <div class="tooltip-header">some text here ?</div>
        <div class="tooltip-body">some text body some text body</div>
    </div>
</div>

CSS

.div-tooltip{
    background-color: #FFF;
    border: 5px solid #DFDFDF;
    color: #717171;
    font-size: 13px;
    height: 150px;
    letter-spacing: 1px;
    line-height: 30px;
    position: relative;
    text-align: center;
    top: -10px;
    left:60px;
    display:none;
    padding:0 20px;

}
.div-tooltip:after{
    content:'';
    position:absolute;
    top:40px;
    left: 0px;
    width:10px;
    height:10px;
    border-bottom:5px solid #dfdfdf;
    border-right:5px solid #dfdfdf;
    background:#f8f8f8;
    margin-left:-10px;
    -moz-transform:rotate(135deg);
    -webkit-transform:rotate(135deg);
    transform:rotate(135deg);
}
.div-hover{
    margin:100px;
    float:left;
    position:relative;
    cursor:pointer;
}

.div-hover:hover .div-tooltip{
    display:block;
}

.tooltip-header {
    background-color:red;
}