Question

code所以我正在尝试创建一个交互式地图。我在Illustrator中具有所有图层，并已导出到SVG。图层只是来自Illustrator的分组元素，例如地图轮廓，设施，会议室等。我正在学习平面设计，所以我只了解html和css的基础知识。

我要尝试使用的功能是一个工具提示，其中包含您将鼠标悬停在上方时弹出的设施的名称。我仅用圆圈提供了svg组外观的简短代码。

我已经学会了如何制作图标图像的工具提示。我没有SVG的运气。只是寻找一个简单的解决方案，因为我所做的所有研究都以javascript结尾。

`

<g id="facilites">
<circle class="st2" cx="420.25" cy="333.25" r="25.25"/>

<circle class="st2" cx="666.25" cy="470.25" r="25.25"/>

</g>

目标：在svg悬停时出现的带有名称的工具提示

Answer 1

方法1. HTML / CSS工具提示
请检查以下内容：css tooltip hover

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden; //important
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1; /* put tooltip behind other layers */
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body>

    <div class="tooltip">Hover over me
      <span class="tooltiptext">Tooltip text</span>
    </div>

</body>
</html>

方法2。JavaScript
如果您正在使用某些Map API，请搜索您的Js文件。应该有一些代码可以初始化地图和所有图钉标记。对于Google地图，它是这样的：

var latlng= new google.maps.LatLng(39.8282, -98.5795);  // center latitude and longitude 
var aa = new google.maps.LatLng(42.543214,-83.186111);  // a tooltip

var mapOptions = {
    zoom: 3,
    center: latlng  // center latitude and longitude
}
map = new google.maps.Map(document.getElementById('your-canvas-id'), mapOptions);

markeraa = new google.maps.Marker({
    position: aa,
    map: map,
    title: 'Coolidge Highway in Troy, MI'  // hover and will show this text
});

您要做的就是找到图钉对象并添加标题行。

Answer 2

编辑：再次阅读您的答案后，我认为我可能误解了您的要求。

如果每个圆都有自己的工具提示，那么以下代码是正确的，但是如果工具提示的内容相同并且当您将鼠标悬停在SVG元素的任何部分上时都可以工作，则底部的代码是正确的一个。

<!DOCTYPE html>
<html>
    <body>
        <svg viewBox="0 0 1000 1000">
            <g id="facilites">
                <circle class="st2" cx="420.25" cy="333.25" r="25.25">
                    <title>This is the first tooltip</title>
                </circle>
                <circle class="st2" cx="666.25" cy="470.25" r="25.25">
                    <title>This is the second tooltip</title>
                </circle>
            </g>
        </svg>
    </body>
</html>

原始内容（所有SVG元素的一个工具提示）

尝试使用元素。在下面的代码中，用户将鼠标悬停在svg上，并将其作为工具提示。

<!DOCTYPE html>
<html>
    <style>
        rect {
            width: 100%;
            height: 100%;
            opacity: 0;
        }
    </style>
    <body>
        <svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
            <g id="facilities">
                <circle class="st2" cx="420.25" cy="333.25" r="25.25"/>
                <circle class="st2" cx="666.25" cy="470.25" r="25.25"/>
            </g>
            <rect>
                <title>This is a single tooltip for the full SVG element</title>
            </rect>
        </svg>
    </body>
</html>

仅使用html和css

2 个答案: