title: How to add pin in a specific area created using image map
body: <p>I have an angular application in which I have created an image map using HTML usemap</p>
  
  <p>code:</p>
  
  <pre><code>    &lt;img src="../../assets/floor2.jpg" usemap="#floor2Map"&gt;    
          &lt;map name="floor2Map"&gt;
              &lt;area shape="poly" coords="210,340,216,234,312,236,323,323,317,346" matTooltip="Info about the Device" &gt;
              &lt;div id='pin-1' class="box" &gt;
              &lt;div class="pin-text"&gt;
                  &lt;h4&gt;My Device&lt;/h3&gt;
               &lt;/div&gt;
          &lt;/div&gt;
          &lt;/map&gt;
  
  
  In CSS file
  
  .box:hover &gt; .pin-text {
      display: block;
    }
  
    .box {
      width:8%;
      height:8%;
      background-image:   url('http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg');
      background-position: top;
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute; 
    }
  
    .pin-text {
      position: absolute;
      top:50%;
      transform:translateY(-50%);
      left:75%;
      white-space:nowrap;
      display: none;
    }
  </code></pre>
  
  <p>I want to add a pin on this particular area of image, and when I hover over it, then the tooltip should come. How to do that? Currently my svg icon is coming below the image.<br>
  svg for reference - <a href="http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg" rel="nofollow noreferrer">http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg</a></p>