JSFiddle - React, Tailwind, and code Playground

HTML

<div id="JSwrap"> 

<div id="cart2Produkt"> 
    
    
    <p>                    <a href="/Target-7050-Softphone-USB-Duo.220" target="_blank" class="tooltip" title="Target 7050 Softphone USB Duo "> 
        Target 7050 Softphone USB Duo 
       
        
        <span><img src="http://www.euroworker.no/public/upload/productimage/220-353-2.jpg?1251413379" alt="Target 7050 Softphone USB Duo " /> 
            <br /> 
            
        </span> 
        </a> 
        
        
        
        
    </p> 
    <p> 
        
    </p> 
</div> 
</div>

CSS

#JSwrap{ /*for jsfiddle only*/
    position:absolute;
    left:100px;
    top:50px;
}

#cart2Produkt
{
    border:1px solid #ccc;
    width: 500px;
    text-align:left;
    padding:10px;
}

#cart2Produkt a.tooltip span {   
    z-index:999;
    display:block;
    position:absolute;
    left:-999px;
    opacity:0;
    padding:2px 3px; 
    margin-left:8px; 
    width:130px;
    -webkit-transition: opacity;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-duration: 500ms;
}

#cart2Produkt a.tooltip:hover span{
    z-index:999;
    display:block; 
    position:absolute; 
    right:50%;
    opacity:1;
    background:#ffffff; 
    border:1px solid #cccccc; 
    color:#6c6c6c;
    top:-35px;
    left:-15px;
    z-index: 10;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    text-align:center;
    vertical-align:middle;
    padding:1px;
    -webkit-transition: opacity;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
    
}

#cart2Produkt img {
    z-index:999;
}