JSFiddle - React, Tailwind, and code Playground

by nju33

HTML

<div>
    <span>tooltip</span>
</div>

CSS

div {
    position: relative;
    background: #c3c3c3;
    height: 2em;
    width: 2em;
    padding: 2em;
    &:hover {
        width: 4em;
    }
}
    span {
        height: 2em;
        line-height: 2em;
        width: auto;
        padding: 2em;
        position: absolute;
        top: 0px;
        opacity: 0;
        -webkit-transition: all 1.5s ease-in 0s;
        background-color: #695d53;
        border: 3px solid red;
    
}
    span:hover {
        top: 100px;
        opacity: 0.9;
    }
    span:after {
            content: "";
            width: 0px;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid red;
            position: absolute;
            bottom: -0.8em;
            left: 2.6em;
    }