仅使用 html 和 css 为 SVG 元素创建悬停工具提示

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

方法一。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>

方法二.Javascript
如果您正在使用某些地图 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
});

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

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 为 SVG 元素创建悬停工具提示

Creating a hover tooltip for SVG elements, using only html and css

html

css

svg

tooltip