¿Se pueden usar popovers de Bootstrap 4 en mapas de imágenes HTML ? Aquí está mi código:

 <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>

El popover resultante siempre se muestra en la esquina superior izquierda de la imagen. Nunca se acerque al área circular relevante como se esperaba.

¿Por qué?