Within my angular application, I have implemented an image map using the HTML usemap feature.
Here is the code snippet:
<img src="../../assets/floor2.jpg" usemap="#floor2Map">
<map name="floor2Map">
<area shape="poly" coords="210,340,216,234,312,236,323,323,317,346" matTooltip="Info about the Device" >
<div id='pin-1' class="box" >
<div class="pin-text">
<h4>My Device</h3>
</div>
</div>
</map>In the CSS file:
.box:hover > .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;
}I am looking to place a pin on a specific area of the image and display a tooltip when hovered over. However, currently the SVG icon appears below the image.
Here is the SVG for your reference -