Can Bootstrap 4 popovers be used on HTML image maps? Here is my code:

<script>
    $(document).ready(function(){
        $("[data-toggle='popover']").popover();   
    });
</script>

<img class="img-fluid" style="max-width: 800px" src="https://i.imgur.com/####.png" usemap="#theMap"/>
<map name="theMap">
    <area title="Map Reference 1" shape="circle" coords="100,100, 50" alt="Map Reference 1" data-toggle="popover" data-content="And here's some amazing content. It's very engaging. Right?" data-placement="right">
    <area title="Map Reference 2" shape="circle" coords="200,200, 50" alt="Map Reference 2" data-toggle="popover" data-content="And here's some amazing content. It's very engaging. Right?" data-placement="right">
</map>

The resulting popover is always shown in the top-left corner of the image. Never close to the relevant circular area as expected.

Why?