JSFiddle - React, Tailwind, and code Playground

by Rishi Kumar

HTML

<div data-tip>
This is title
</div>

CSS

[data-tip]{
    position:relative;
    }
     [data-tip]:hover{
    text-decoration:none;

   
    }
     [data-tip]:after{
    content: "Home";
    font-family:Arial, Helvetica, sans-serif;
    font-size:90%;
    line-height:1.2em;
    color:#004562;
    font-weight:bolder;
    font-size:12px;
    text-align:center;
     height:13px;
    width:auto;
    padding:5px 10px;
    border-color:white;
    /*flex-direction:row;*/
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
     background: linear-gradient(#A4C2E4 30%, #F0F5FA, #F0F5FA);
    position:absolute;
     box-shadow: 4px 4px 4px rgba(0,0,0, .65);
    top:23px;
    left:-30px;
    display:none;

    
    }
     [data-tip]:hover{
    z-index:1000;
    position:relative;
    color:#8325f7;
    -moz-animation: cssAnimation 0s ease-in 3s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 3s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 3s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 3s forwards;
    -webkit-animation: cssAnimation 3s forwards; 
    animation: cssAnimation 3s forwards;

   
    }
     [data-tip]:hover:after{
    display:block;

      
    }
     [data-tip]:hover:before{
    display:block;


    }
    
    @keyframes cssAnimation {
    to {
        opacity: 0;
    transition: opacity .6s;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        opacity: 0;
    transition: opacity .6s;
    }
}