JSFiddle - React, Tailwind, and code Playground
HTML
<img src="http://www.prodeveloper.org/wp-content/uploads/2008/10/stackoverflow-logo-250.png" class="tooltip" alt="SO Logo"/><br>
<img src="http://www.waleoyediran.com/wp-content/uploads/2011/04/stackoverflow.png" class="tooltip" alt="SO Logo II"/>
CSS
.tip{
background-color: #eee;
border: solid 1px #666;
}
img {
border: solid 2px #888;
padding: 2px;
margin: 5px;
position: absolute;
top: 0;
left: 0;
}
JavaScript
toolTip = function(){
jQuery('<span class="tip"></span>').prependTo('body').hide();
showTooltip = function(event){
$thisTxt = jQuery(this).attr('alt');
var tPosX = event.pageX - 5;
var tPosY = event.pageY +20;
jQuery('.tip').text($thisTxt).css({top:tPosY, left:tPosX, position:"absolute"}).fadeIn();
};
hideTooltip = function(){
jQuery('.tip').fadeOut();
};
jQuery('.tooltip').hover(showTooltip , hideTooltip);
};
jQuery(document).ready(function(){
toolTip();
});