JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<span title="" class="duedate-warning-msg"></span>

CSS

.duedate-warning-msg{
     background: url("/static/img/error.png") no-repeat scroll 14px 12px white;
    border-color: #f5c7c7;
    padding: .5em 0.25em 0.5em 2.5em;
    title:"my tooltip";
    color: #D11006;
}

span:hover{
    position:relative;
}

span[title]:hover:after {
    content: "This statement is past due.";
    padding: 4px 8px;
    color: white;
    font-size:16px;
    font-family: "open_sansregular";
    background-color: #0679ca !important;
    position: absolute;
    left: 0;
    top: 100%;
    white-space: nowrap;
    z-index: 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    box-shadow: 0px 0px 4px #222;
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}