I have been playing around with a website design that's using area mapping for href="" and also has popovers on hover for each I don't really have issues with what I am doing but is there a way i can keep my popovers in a certain area of the on different screen widths without having to right @media() for each screen size.
/* HTML Code */
<!-- Content -->
<!-- Landing Image -->
<div class="gridContainer clearfix">
<div class="col-lg-9">
<div class="fluid"><img src="images/pacificsharedservicesimage.png" alt="" usemap="#landingpagebuttons" class="img-responsive col-lg-offset-2 landingpageimage"></div>
</div>
<map name="landingpagebuttons">
<area id="recruitment" shape="circle" coords="276,99,61" href="home.html" data-toggle="popover" data-placement="left" data-container="body" title="popover test" data-content="phone:+61expamle ; email: [email protected]">
<area id="humanresources" shape="circle" coords="206,251,61" href="home.html" data-toggle="popover" data-placement="left" data-container="body" title="popover test2" data-content="phone:+61expamle ; email: [email protected]">
<area id="successionplanning" shape="circle" coords="276,406,61" href="home.html" data-toggle="popover" data-placement="left" data-container="body" title="popover test3" data-content="phone:+61expamle ; email: [email protected]">
<area id="payroll" shape="circle" coords="547,96,61" href="home.html" data-toggle="popover" data-placement="right" data-container="body" title="popover test4" data-content="phone:+61expamle ; email: [email protected]">
<area id="compensationandbenefits" shape="circle" coords="616,253,61" href="home.html" data-toggle="popover" data-placement="right" data-container="body" title="popover test5" data-content="phone:+61expamle ; email: [email protected]">
<area id="educationandlearning" shape="circle" coords="551,405,61" href="home.html" data-toggle="popover" data-placement="right" data-container="body" title="popover test6" data-content="phone:+61expamle ; email: [email protected]">
</map>
</div>
<!-- End Landing Image -->
<div class="gridContainer clearfix"><br></div>
<!-- Widgets -->
<div class="gridContainer clearfix">
<div class="col-lg-7">
<div class="fluid"><img id="socialmediaicons" class="img-responsive col-lg-offset-6" usemap="#widgets" src="images/socialmediaicons.png" alt=""></div>
</div>
</div>
<map name="widgets">
<area id="facebook" shape="circle" coords="67,59,36" href="https://www.facebook.com/Pacific-Shared-Services-645030438932875">
<area id="instagram" shape="circle" coords="158,57,36" href="https://www.instagram.com/pacific_shared_services">
<area id="linkedin" shape="circle" coords="251,58,36" href="https://www.linkedin.com/company/pacific-shared-services">
<area id="pinterest" shape="circle" coords="344,58,36" href="https://au.pinterest.com/PacificSS">
<area id="twitter" shape="circle" coords="436,58,36" href="https://twitter.com/PACIFIC_SS">
</map>
<!-- End Widgets -->
<br>
<!-- End Content -->
/* End HTML Code */
/* CSS Code */
/* Home */
img.map, map area { outline: none; }
map { top:0; left:0; }
/* Popover Position */
#recruitment { border:1px solid #000; width: 20px; height:20px; position:absolute; top:525px; left:680px; }
#humanresources { border:1px solid #000; width: 20px; height:20px; position:absolute; top:680px; left:613px; }
#successionplanning { border:1px solid #000; width: 20px; height:20px; position:absolute; top:840px; left:680px; }
#payroll { border:1px solid #000; width: 20px; height:20px; position:absolute; top:525px; left:1128px; }
#compensationandbenefits { border:1px solid #000; width: 20px; height:20px; position:absolute; top:680px; left:1195px; }
#educationandlearning { border:1px solid #000; width: 20px; height:20px; position:absolute; top:840px; left:1128px; }
/* End Popover Position */
.landingpageimage { width:800px; }
/* End Home */
/* End CSS Code */
I suggest make your POPOVERS near the cursor when it click.
See this PEN on how it done.
With that approach, you're style will be edit minimally in each media.