我创建了一个SVG地图,但我希望当某人悬停在其上时,会出现一个工具提示(跟随鼠标),并且每个路径都是唯一的。除了有工具提示外,如果可能的话,我想让每个SVG路径都可以点击并链接到一个页面。
我想使用以下CSS样式来设置工具提示:
我想使用以下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/
感谢您的帮助!
undefined
,如下所示:https://jsfiddle.net/3ojet4oL/10/。我们是否能够将工具提示定位在鼠标光标的左上部分(这样鼠标就不会重叠)而不是右下部分? - spjyfor
循环从1
开始,而countries
数组从0
开始,因此您需要像这个fiddle中那样访问countries[i - 1]
:https://jsfiddle.net/3ojet4oL/11/ - Mosh Feutooltip.style.top = (e.clientY + 5) + 'px';
或者类似的操作。 - Mosh Feu