JSFiddle - React, Tailwind, and code Playground

by rodrigorf

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table cellspacing="0" rules="all" border="1" id="gwColaboradores" style="border-collapse:collapse;">
		<tr style="color:White;background-color:#E74310;">
			<th align="center" scope="col">Avaliação (%)</th>
		</tr><tr>
			<td align="center">87</td>
		</tr><tr>
			<td align="center">37</td>
		</tr><tr>
			<td align="center">78</td>
		</tr>
	</table>
  <div id="imgContainer" style="position:absolute;display:none;" />

JavaScript

$("#gwColaboradores tr td").hover(function f()
{
     var imgPath = "";
     var avaliacao = $(this).html();
console.log(Number(avaliacao));
     if(Number(avaliacao) > 50)
     {
         imgPath = "https://vc.vse.cz/wp-content/uploads/2014/08/Accept-icon.png";
     }else
     {
     		imgPath = "https://cdn4.iconfinder.com/data/icons/hospital-and-medical-v2/512/danger_poison_venom_toxic-128.png";
     }
     $("#imgContainer").position($(this).position().left,      $(this).position().top);
     $("#imgContainer").append("<img src=\"" + imgPath + "\" />");
     $("#imgContainer").show();
  },
  function () {
     //hide the div with fullsize image
     $("#imgContainer").hide();
     //clear out the html from the div
     $("#imgContainer").html("");
  }
);