JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<img src="http://www.html5.com/HTML5.com_General_Logo.png" width="278" height="430" alt="tricorder" usemap="#tricorder">
<map name="tricorder">
<area shape="rect" coords="125,110,235,180" href="/" alt="home" title="home">
<area shape="circle" coords="92,120,9" href="{text:Alpha URL}" alt="link" title="{text:Alpha}">
<area shape="circle" coords="91,140,9" href="{text:Beta URL}" alt="link" title="{text:Beta}">
<area shape="circle" coords="89,160,9" href="{text:Gamma URL}" alt="link" title="{text:Gamma}">
<area shape="circle" coords="88,180,9" href="{text:Delta URL}" alt="link" title="{text:Delta}">
<area shape="circle" coords="83,216,20" href="{text:Library URL}" alt="navi" title="{text:Library}">
</map>

CSS

.custom-tooltip, .arrow:after {
	background: black;
	border: 2px solid white;
}
.custom-tooltip {color:white;}

JavaScript

$(document).ready(function() {
    $( document ).tooltip({tooltipClass:"custom-tooltip", position: {my:"left+5 center", at:"right center"}});
});