Javascript 鼠标上方的SVG地图工具提示，可以单击

我创建了一个SVG映射，但是，我想使它在有人悬停在它上面时有一个工具提示（在鼠标后面），并且每个路径都是唯一的。除了有一个工具提示外，我希望每个SVG路径都可以单击，如果可能的话，还可以指向一个链接

我想用以下CSS设置工具提示的样式：

.map工具提示{
位置：绝对位置；
显示：无；
-webkit边界半径：3px；
-moz边界半径：3px；
边界半径：3px；
边框：#D3实心1px；
背景：#fff；
颜色：黑色；
字体系列：Comfortaa、Verdana；
字体大小：较小；
填充：8px；
指针事件：无；
盒影：08px17px0rgba（0,0,0,0.2），06px20px0rgba（0,0,0,0.19）；
}

这是我的SVG：

---

谢谢你的帮助

您可以使用以下脚本执行此操作（阅读注释）

var tooltip=document.querySelector（'.map tooltip'）；
//遍历所有“path”标记
[].forEach.call（document.querySelectorAll（'path.HI-map'），函数（项）{
//附加单击事件，例如，您可以从属性读取URL。
item.addEventListener（'单击'，函数（））{
打开窗户http://google.co.il')
});
//附加鼠标事件
item.addEventListener（'mouseenter'，function（）{
var sel=这个，
//获取路径的边界-请参见以下问题：http://stackoverflow.com/q/10643426/863110
pos=sel.getBoundingClientRect（）
tooltip.style.display='block'；
tooltip.style.top=pos.top+'px'；
tooltip.style.left=pos.left+'px'；
});
//鼠标离开时隐藏工具提示
item.addEventListener（'mouseleave'，function（）{
tooltip.style.display='none'；
});
});

请参阅更新的JSFIDLE：

更新

对于动态工具提示文本，有一些方法。其中之一是将文本存储在

data-*

属性上。在我的示例

数据工具提示
中，您可以在需要显示工具提示时阅读它：

html

<path class="HI-map maui" data-tooltip="tooltip10"

刚才，我看到您想在工具提示中添加html。所以我稍微改变了一下逻辑，正如您在下面的JSFIDLE中看到的那样。逻辑是将工具提示内容存储在对象中，然后通过

数据工具提示

属性获取它

由于工具提示将随光标移动，您只需使用事件：

item.addEventListener（'mousemove'，函数（e）{
tooltip.style.top=e.clientY+'px'；
tooltip.style.left=e.clientX+'px'；
});

更新2

对于动态URL添加属性

数据链接

，脚本将在新窗口中打开此URL

---

谢谢，这几乎是完美的！是否有任何方法可以使工具提示跟随鼠标，类似于，如何使工具提示能够为每个岛创建唯一的工具提示？使用mousemove事件的定位信息，例如，如下所示：。要创建独特的工具提示，例如，可以将工具提示文本存储在路径元素上（参见JSFIDLE）。您还可以使用在

元素中使用

元素创建的标准工具提示（这些元素不需要JavaScript）。问题是

for

循环从

1

开始，而

countries

数组从

0

开始，因此您需要访问

国家[i-1]

就像这把小提琴：我认为代码就是这样做的。但是，您总是向该位置添加一些像素。类似于：

tooltip.style.top=（e.clientY+5）+'px'或者什么的。
 tooltip.innerText = item.getAttribute('data-tooltip');