JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cart2Produkt"> 
    
    
    <p>                    <a href="/Target-7050CC-Duo-UNC.7" target="_blank" class="tooltip" title="Target 7050CC Duo UNC"> 
        Target 7050CC Duo UNC
        <span style="z-index:999; font-size:smaller;"><img src="http://www.euroworker.no/public/upload/productimage/7-250-2.jpg?1251022192" alt="Target 7050CC Duo UNC" /> 
            <br /> 
            
        </span> 
        </a> 
        
        
        
        
    </p> 
    <p> 
        <div class="productOptions" style="color:#b2b2b2;"> 
            
            <div class="nonEditableOption"> 
                Skal tilkobles:
                Alcatel
            </div> 
            
            <div class="productOptionsMenu"> 
                <a  style="color:#6c8aa2;" href="/order/options/1111" ajax="/order/optionForm/1111">Endre valg</a> 
            </div> 
        </div> 
        
    </p> 
</div>

CSS

#cart2Produkt a {
    color:blue;
    text-decoration:none;
    line-height:15px;
    clear:both;
}
#cart2Produkt p {
    margin: 0px;
    letter-spacing: 1px;
    text-align: left;
    color: #000000;
}
#cart2Produkt a:hover {
    
    background:#ffffff; 
    text-decoration:none;
    z-index: 10;
    
} 



#cart2Produkt a.tooltip span {
    z-index:999;
    display:block;
    position:absolute;
    left:-999px;
    opacity:0;
    padding:2px 3px; 
    margin-left:8px; 
    width:130px;

}

#cart2Produkt a.tooltip:hover span{
    z-index:999;
    display:block; 
    position:relative; 
    left:0px;
    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;
}