JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
<div class="center">
   <img class="left" src="http://www.jimthatcher.com/knowbility/files/usamap1.gif" alt="USA" usemap="#states" />
   <map name="states">
      <area shape="poly" href="#" rel="democontent" alt="North Dakota, Minnesota, South Dakota, Nebraska and Iowa"
         coords="173,7,181,9,180,10,227,9,232,10,233,12,238,11,244,12,
         250,13,257,14,263,15,267,17,259,27,251,27,245,36,249,41,246,48,
         254,53,256,57,257,61,258,66,262,68,263,73,264,75,263,77,
         262,78,260,78,259,80,258,82,257,84,256,86,254,87,243,87,243,88,
         229,88,229,92,207,92,206,90,186,90,184,85,173,82,170,45,
         172,30,172,7,174,8" >
   </map>
   <div class="clear">&nbsp;</div>
</div>
</div>


<div class="democontent" style="display:none";>
   <img class="photo left" src="/projects/qtip/images/ajaxdemo/3.jpg" alt="" />
   <div class="info">
      <h1>Burrowing Owl</h1>
      <p>The <a href="http://en.wikipedia.org/wiki/Burrowing_Owl">Burrowing Owl</a> (Athene cunicularia) is a small, long-legged owl found throughout open landscapes of North and South America. Burrowing owls can be found in grasslands, rangelands, deserts, or any other dry, open area with low vegetation. They nest and roost in burrows, such as those excavated by prairie dogs.</p>
      <p>Unlike most owls, burrowing owls are often active during the day, although they tend to avoid the mid-day heat. Most hunting is still done from dusk until dawn, when their owl apomorphies are most advantageous.</p>

      <p class="note">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Athene-cunicularia-burrowing-owl-0b.jpg/502px-Athene-cunicularia-burrowing-owl-0b.jpg">
         Image credit: <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Athene-cunicularia-burrowing-owl-0b.jpg/502px-Athene-cunicularia-burrowing-owl-0b.jpg">Flickr</a>
      </p>
   </div>
   <div class="clear">&nbsp;</div>
</div>

<script type="text/javascript"...

JavaScript

$(document).ready(function()
{
   // Use the each() method to gain access to each elements attributes
   $('area').each(function()
   {
        
        test  = $(this).attr('rel');
        $("." + test).html();
      $(this).qtip(
      {
         content: $("." + test).html(), // Use the ALT attribute of the area map
         style: {
            name: 'dark', // Give it the preset dark style
                        hide: {
                fixed: true,
                delay: 240
             },
             style: {
                border: 1,
                cursor: 'pointer',
                padding: '5px 8px',
                name: 'blue'
             },
            border: {}, 
            tip: true // Apply a tip at the default tooltip corner
         }
      });
   });
});