图像地图上的工具提示？

Question

我需要一些工具提示和图像映射的帮助..

我希望能够在悬停那些“热点”时在图像上制作“热点”，它会显示一个包含信息的工具提示..

我的代码：

        <p><img src="../Plan_edited.png" width="2192" height="1520" usemap="#Map">
        <map name="Map">
        <area shape="rect" coords="335,585,480,679" href="#">
        <area shape="rect" coords="483,586,621,679" href="#">
        <area shape="rect" coords="210,733,337,831" href="#">
        <area shape="rect" coords="340,734,452,831" href="#">
        <area shape="rect" coords="455,733,569,830" href="#">
        </map>
        </p>

我希望工具提示显示在“热点”上方，并且自定义样式如下： https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_tooltip_css&stacked=h

任何人都可以告诉我，这是如何通过地图完成的？我的所有尝试都失败了，无法找到有关如何执行此操作的明确说明。

谢谢。