JSFiddle - React, Tailwind, and code Playground
HTML
<div class="info-icon"/><br />
<div class="info-icon"/>
<div id="tooltip">Testing</div>
CSS
div.info-icon {
width: 16px;
height: 16px;
background-image:url(http://cdn.dustball.com/information.png );
cursor: pointer;
}
#tooltip {
position: absolute;
display: none;
font-size: 12px;
padding: 5px;
background-color: #ccc;
border: 1px solid black;
}
JavaScript
$('div.info-icon').mouseenter(function() {
var offset = $(this).offset();
var o = {left: offset.left, top: offset.top};
o.left += $(this).width();
$('#tooltip').offset(o);
$('#tooltip').show();
}).mouseleave(function() {
$('#tooltip').hide();
});