使用数据切换工具提示映射 onmouseover

Question

这是这个问题的延续

Image with a link in a specific point

我找到了 onmouseover 属性，并且我认为它可能会触发一个函数这一事实非常有趣。

好吧，我必须在地图区域的顶部显示一个工具提示，我将其归因于 onmouseover 属性。

有什么办法可以做到吗？ 我一直在尝试这样做，但我无法在区域顶部显示它，只能分开

这是我尝试过的：

  <area  id="test" data-toggle="tooltip" data-placement="left" title="Tooltip on left" shape="rect" href="" onmouseover='' onmouseout='' coords="750,435,540,300">

Answer 1

使用您的地图作为background-image：

#mapcontainer { background-image: url('path/to/map.png'); }

然后只需在同一个容器内对齐文本区域或输入：

#mapcontainer input[type="text"] { margin-left: 100px; margin-top: 100px; /*change as necessary*/ }

背景图像使您不必向文本框添加绝对位置/z-index 组合。

Answer 2

CSS positioning 将实现您正在寻找的布局。

我还建议您使用不是输入或文本区域的元素。改用 div 之类的东西来使其具有语义化。