SVG地图鼠标悬停提示，可点击能力

Question

我创建了一个SVG地图，但我希望当某人悬停在其上时，会出现一个工具提示（跟随鼠标），并且每个路径都是唯一的。除了有工具提示外，如果可能的话，我想让每个SVG路径都可以点击并链接到一个页面。

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

.map-tooltip {
  position: absolute;
  display: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border:#d3d3d3 solid 1px;
  background: #fff;
  color: black;
  font-family: Comfortaa, Verdana;
  font-size: smaller;
  padding: 8px;
  pointer-events:none;
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
}

这是我的SVG图形：https://jsfiddle.net/3ojet4oL/

感谢您的帮助！

- spjy

Answer 1

您可以使用以下脚本完成此操作（请阅读注释）。

var tooltip = document.querySelector('.map-tooltip');

// iterate through all `path` tags
[].forEach.call(document.querySelectorAll('path.HI-map'), function(item) {
  // attach click event, you can read the URL from a attribute for example.
  item.addEventListener('click', function(){
    window.open('http://google.co.il')
  });

  // attach mouseenter event
  item.addEventListener('mouseenter', function() {
    var sel = this,
        // get the borders of the path - see this question: https://dev59.com/mGgv5IYBdhLWcg3wYvyi
        pos = sel.getBoundingClientRect()

    tooltip.style.display = 'block';
    tooltip.style.top = pos.top + 'px';
    tooltip.style.left = pos.left + 'px';
  });

  // when mouse leave hide the tooltip
  item.addEventListener('mouseleave', function(){
    tooltip.style.display = 'none';
  });
});

请查看更新后的jsfiddle：https://jsfiddle.net/3ojet4oL/3/ 更新内容：

1. 对于动态提示文本，有一些方法。其中之一是将文本存储在data-*属性中。在我的示例中使用data-tooltip，然后您可以在需要显示提示时读取它：

html

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

javascript

 tooltip.innerText = item.getAttribute('data-tooltip');

刚才我看到你想在工具提示中放置一个html。所以我稍微改变了逻辑，如下面的jsfiddle所示。逻辑是将工具提示内容存储在对象中，然后通过data-tooltip属性获取它。

2. 对于跟随光标移动的工具提示，您只需要使用mousemove事件：

item.addEventListener('mousemove', function(e) {
  tooltip.style.top = e.clientY + 'px';
  tooltip.style.left = e.clientX + 'px';
});

https://jsfiddle.net/3ojet4oL/7/

更新2

对于动态URL，请添加属性data-link，脚本将在新窗口中打开此URL。

https://jsfiddle.net/3ojet4oL/9/

- Mosh Feu

---

使用mousemove事件的定位信息，例如：https://jsfiddle.net/3ojet4oL/4/。为了创建唯一的工具提示，您可以在路径元素上存储工具提示文本（请参见JSFiddle）。您还可以使用标准工具提示，这些工具提示是在<path>元素内部创建的<title>元素（不需要JavaScript）。 - Thomas W

抱歉，您介意向我展示如何存储提示文本吗？我不知道该怎么做。在你的代码中似乎显示了类别文本。另外，我希望在提示文本中包含HTML；如果我没记错的话，我曾经看过有关无法在<title>标签中使用HTML的内容@ThomasW - spjy

@MoshFeu 几乎完美！但是，当我试图重命名所有岛屿时，由于某种原因它从 Kauai 开始，但在这种情况下，第一个岛屿应该是 Niihau，然后一切都被扔掉了。最后一个岛屿夏威夷变成了undefined，如下所示：https://jsfiddle.net/3ojet4oL/10/。我们是否能够将工具提示定位在鼠标光标的左上部分（这样鼠标就不会重叠）而不是右下部分？ - spjy

问题在于for循环从1开始，而countries数组从0开始，因此您需要像这个fiddle中那样访问countries[i - 1]：https://jsfiddle.net/3ojet4oL/11/ - Mosh Feu

我认为这段代码的作用是将一些像素添加到位置上。例如：tooltip.style.top = (e.clientY + 5) + 'px'; 或者类似的操作。 - Mosh Feu