JSFiddle - React, Tailwind, and code Playground

HTML

<img class="downloadPdf title" src="http://icons.iconarchive.com/icons/graphicloads/filetype/256/pdf-icon.png" title="Text for tooltip">

CSS

.downloadPdf {
    width:64px;
    height:64px
}

.autoSugest{background:#fffdef;border:1px solid #cac6ad; 
-webkit-border-radius:4px; 
-moz-border-radius:4px; 
border-radius:4px;color:#7f7943; 
display:none; 
font-size:12px; 
padding:7px 15px; 
position:absolute; 
min-width:100px; 
-o-box-sizing:border-box; 
-ms-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
-moz-box-sizing:border-box; 
box-sizing:border-box;}

.autoSugest:after{ 
content:"";
 border-left: solid 10px transparent;
border-right: solid 10px transparent;
border-bottom: solid 10px #cac6ad;
position: absolute;
top: -11px;
left: 12px;}

JavaScript

$.fn.autoSuggest = function(){   return this.each(function(index, elm){ 
if(!$(elm).is('[data-title]')){ 
$(elm).attr('data-title', $(elm).attr('title')).attr('title', ''); 
}; 

$(elm).on('mouseenter', function(){ 
var element = $(this), 
posTop = element.offset().top + element.outerHeight() + 10, 
posLeft = element.offset().left, 
toolTipWidth = element.outerWidth() > 90 ? element.outerWidth() : 250, 
titleText = element.attr('data-title'); 
if(titleText && titleText != ''){ 
$('<div />', {class: 'autoSugest', text : titleText, css : {left: posLeft, top: posTop, maxWidth: toolTipWidth}}).appendTo('body').fadeIn(); 
}else{ 
return false; 
} 
}); 
$(elm).on('mouseout', function(){ 
$('.autoSugest').fadeOut(function(){ 
$(this).remove(); 
}); 
}); 
}); }; 
$(document).ready(function(){ 
    $('.title').autoSuggest(); });