工具提示未在 SVG 中显示（使用 ECMAScript）答案

【问题标题】：Tooltip not displaying in SVG (using ECMAScript)工具提示未在 SVG 中显示（使用 ECMAScript）
【发布时间】：2021-09-18 06:39:52
【问题描述】：

我正在尝试将 ECMAScript 嵌入 XML。我在网上找到了this tutorial。我在本地尝试了他们的代码以确认它有效，然后尝试以此为基础创建工具提示功能。

最后，这是我的代码：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="6cm" height="5cm" viewBox="0 0 600 500" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <!-- ECMAScript to change the radius with each click -->
  <script type="application/ecmascript"> <![CDATA[
        function showTooltip(evt, text) {
            let tooltip = document.getElementById("tooltip");
            tooltip.innerHTML = text;
            tooltip.style.display = "block";
            tooltip.style.left = evt.pageX + 10 + 'px';
            tooltip.style.top = evt.pageY + 10 + 'px';
        }
        function hideTooltip() {
            var tooltip = document.getElementById("tooltip"); 
            tooltip.style.display = "none";
        }
  ]]> </script>

  <!-- Outline the drawing area with a blue line -->
  <rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/>

  <!-- Act on each click event -->
  <circle onmousemove="showTooltip(evt, 'some text')" onmouseout="hideTooltip()" cx="300" cy="225" r="100"
          fill="red"/>

  <text x="300" y="480" 
        font-family="Verdana" font-size="35" text-anchor="middle">

    Hover over circle for tooltip
  </text>
</svg>

但工具提示功能不起作用 - 当您将鼠标悬停在圆圈上时没有任何反应。

我有点困惑为什么它不起作用——毕竟，唯一的主要变化是被调用的函数。

这是我尝试过的：

在纯 HTML 中模拟了工具提示逻辑，并且成功了
保留了他们的教程代码 javascript 函数，但将 onclick 属性更改为 onmouseover，这有效

基于此，我认为这与我调用 showTooltip 的方式有关，但我不确定它究竟是什么。不胜感激调试和解决问题的帮助：D

【问题讨论】：

没有id="tooltip"的元素。

标签： javascript xml svg ecmascript-6 tooltip

【解决方案1】：

只需在您的文档中添加一个带有“工具提示”ID 的 DIV 元素。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="6cm" height="5cm" viewBox="0 0 600 500" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <!-- ECMAScript to change the radius with each click -->
  <script type="application/ecmascript"> <![CDATA[
        function showTooltip(evt, text) {
            let tooltip = document.getElementById("tooltip");
            tooltip.innerHTML = text;
            tooltip.style.display = "block";
            tooltip.style.left = evt.pageX + 10 + 'px';
            tooltip.style.top = evt.pageY + 10 + 'px';
        }
        function hideTooltip() {
            var tooltip = document.getElementById("tooltip"); 
            tooltip.style.display = "none";
        }
  ]]> </script>

  <!-- Outline the drawing area with a blue line -->
  <rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/>

  <!-- Act on each click event -->
  <circle onmousemove="showTooltip(evt, 'some text')" onmouseout="hideTooltip()" cx="300" cy="225" r="100"
          fill="red"/>

  <text x="300" y="480" 
        font-family="Verdana" font-size="35" text-anchor="middle">

    Hover over circle for tooltip
  </text>
</svg>
<div id="tooltip" style="position: absolute; left: 300px; top: 300px"></div>

【讨论】：