JSFiddle - React, Tailwind, and code Playground
HTML
<div class="info-icon"></div>
<div class="info-icon"></div>
<div id="tooltip">Testing</div>
CSS
div.info-icon {
content:"";
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
var tooltip = $("#tooltip");
$('div.info-icon').mouseenter(function() {
var el = $(this);
var offset = el.offset();
offset.left += el.width();
tooltip.css({
top: offset.top,
left: offset.left
});
tooltip.show();
}).mouseleave(function() {
tooltip.hide();
});