Popover on a Image Map

[Dan Vega]

I want to have popovers over certain hit areas of an image map but I am not 
quite sure how to do it or if its even possible. Given the following basic 
image map can I have popovers show up over the location of the coords? I 
can easily show a popover for the image itself but I would like to show it 
for the area of a map. Suggestions/thoughts? 

<img id="map" alt="" src="map.jpg" usemap="#imgMap">
<map name="imgMap">
  <area shape="rect" coords="47,83,177,110"   href="#" rel="popover" 
data-content="And here's some amazing content. It's very engaging. right?" 
data-original-title="A Title">
  <area shape="rect" coords="156,184,287,213" href="#" rel="popover" 
data-content="And here's some amazing content. It's very engaging. right?" 
data-original-title="A Title">
</map>


    <script type="text/javascript">

    $(function(){

    $('#map').popover({
    placement: 'left',
    trigger: 'click'
    });

    });

    </script>