鼠标悬停时的 SVG 地图工具提示，可单击

Posted 2023-02-22

【中文标题】鼠标悬停时的 SVG 地图工具提示，可单击

【英文标题】：SVG Map tooltips on mouseover, ability to click

【发布时间】：2016-10-16 05:06:49

【问题描述】：

我创建了一个 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/

感谢您的帮助！

【参考方案1】：

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

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: http://***.com/q/10643426/863110
        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/

更新

对于动态工具提示文本，有一些方法。其中之一是将文本存储在data-* 属性上。在我的示例data-tooltip 中，您可以在想要显示工具提示时阅读它：

html

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

javascript

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

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

工具提示会随着光标移动，你只需要使用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/

【讨论】：

谢谢，这几乎是完美的！有什么办法可以让工具提示跟随鼠标，类似于this?

另外，我将如何制作它以便为每个岛屿创建独特的工具提示？

使用鼠标移动事件的定位信息，例如像这样：jsfiddle.net/3ojet4oL/4。要创建独特的工具提示，您可以例如将工具提示文本存储在路径元素上（请参阅 JSFiddle）。您还可以使用在 <path> 元素内使用 <title> 元素创建的标准工具提示（这些不需要 javascript）。

问题是for 循环以1 和countries 数组开始于0，所以你需要像在这个小提琴中一样访问countries[i - 1]：jsfiddle.net/3ojet4oL/11

我认为代码的作用。但是您总是在该位置添加一些像素。类似：tooltip.style.top = (e.clientY + 5) + 'px'; 之类的。