JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://idata.over-blog.com/0/08/58/81/outils/infobulletop00.gif"></script>
<div class="showtooltipA">Hover over me!
    <div class="tooltipA"><span></span>this is my <a href="http://google.fr">wunderfull</a> tip displayed on hover only :)</div>
</div>

CSS

.showtooltipA {
  position: relative;
  cursor:help;
}

.showtooltipA .tooltipA {
    display: none;
    position: absolute;
    top:24px;
    left: 40px;
    padding:10px;
    font-size: 1em;
    border-radius: 10px; /* Fonctionne pour Google Chrome/Chromium */
    -moz-border-radius: 10px; /* Pour Mozilla Firefox */
    -webkit-border-radius: 10px; /* Pour les navigateurs utilisant le moteur WebKit */   
    color: #000; 
    border: 1px solid #000; 
    background: #ffcc00; 
    -moz-box-shadow: 8px 8px 12px #aaa; 
    -webkit-box-shadow: 8px 8px 12px #aaa; 
    box-shadow: 8px 8px 12px #555;     

}

.showtooltipA:hover .tooltipA,
.showtooltipA:focus .tooltipA {
    display: block;
}

.showtooltipA:hover div span {
    background-image: url(http://idata.over-blog.com/0/08/58/81/outils/infobulletop00.gif);      
    background-color: transparent;
    position: absolute; 
    top: -7px; 
    left: 15px;
    height: 7px; 
    width: 11px; 
    margin:0; 
    padding: 0; 
    border: 0;   
}