JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pipelines">
            <img src="http://i.stack.imgur.com/Dh0uQ.jpg" usemap="#Map" border="0"/>
            <map name="Map" id="Map">
              <area shape="rect" coords="38,41,152,70" href="#" alt="script"/>
            </map>
        </div>
        <div id="content"><h4>Test!</h4></div>

CSS

#pipelines{
                margin-left:auto;
                margin-right:auto;
                margin-top:auto;
                margin-bottom:auto;

            }

JavaScript

$("#Map").on('mouseenter',function(e){$("#content").stop().show();$("#content").offset({left:e.pageX,top:e.pageY});});

$("#content").on('mouseenter',function(e){$("#content").stop().show();});

$("#Map").on('mouseleave',function(e){$("#content").stop().delay(500).hide();});

$("#content").on('mouseleave',function(e){$("#content").stop().delay(500).hide();});