JSFiddle - React, Tailwind, and code Playground

HTML

<a href="" title="" data-title="Tekst jakis adsdas dadada">Najedź na mnie</a>

SCSS

a[data-title] {
    position: relative;
    margin-top: 100px;
    margin-left: 100px;
    display: inline-block;
    color: red;
    
    &:after {
        position: absolute;
        display: block;
        top: -23px;
        left: 50%;
        content: attr(data-title);
        background: rgba(0,0,0,1);
        color: #ffffff;
        white-space: nowrap;
        z-index: 1;
        font-weight: 300;
        max-width: 100px;
        text-overflow: ellipsis;
        overflow: hidden;
        padding: 0 6px;
        height: 22px;
        line-height: 22px;
        visibility: hidden;
        
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        -webkit-box-sizing(border-box);
        box-sizing(border-box);
    }
        
    &:hover:after {	
        visibility: visible;
        opacity: 1;
    }
}