如何将工具提示添加到 svg 图形？

您可以简单地使用 SVG <title> element 和它所传达的默认浏览器呈现吗？ （注意：这不与您可以在 html 中的 div/img/spans 上使用的 title 属性相同，它需要是一个名为 {3 的子 元素 })

矩形{宽度：100%；高度：100%；填充：#69c；中风：#069；笔画宽度：5px； opacity: 0.5 }

将鼠标悬停在矩形上以查看支持浏览器的工具提示。

或者，如果你真的想在你的 SVG 中显示 HTML，你可以直接嵌入 HTML：

矩形{宽度：100%；高度：100%；填充：#69c；中风：#069；笔画宽度：5px；不透明度：0.5 } foreignObject { 宽度：100%； } SVG div { 文本对齐：居中；行高：150px； }

…但是你需要 JS 来打开和关闭显示。如上所示，使标签出现在正确位置的一种方法是将 rect 和 HTML 包装在同一个 <g> 中，将它们放在一起。

要使用 JS 查找 SVG 元素在屏幕上的位置，您可以使用 getBoundingClientRect()，例如 http://phrogz.net/svg/html_location_in_svg_in_html.xhtml

---

我发现的唯一好方法是使用 Javascript 来移动工具提示 <div>。显然，这只有在 HTML 文档中有 SVG 时才有效——不是独立的。它需要Javascript。

函数 showTooltip(evt, text) { let tooltip = document.getElementById("tooltip"); tooltip.innerHTML = 文本； tooltip.style.display = "块"; tooltip.style.left = evt.pageX + 10 + 'px'; tooltip.style.top = evt.pageY + 10 + 'px'; } 函数 hideTooltip() { var tooltip = document.getElementById("tooltip"); tooltip.style.display = "无"; } #tooltip { 背景：玉米丝；边框：1px纯黑色；边框半径：5px；填充：5px； }

---

您可以使用标题元素，如 Phrogz 所示。还有一些不错的工具提示，例如 jQuery 的 Tipsy http://onehackoranother.com/projects/jquery/tipsy/（可用于替换所有标题元素）、Bob Monteverde 的 nvd3 甚至 Twitter 的 Bootstrap 工具提示 http://twitter.github.com/bootstrap/

---

在svg上，写标题的正确方法

<svg>
  <title id="unique-id">Checkout</title>
</svg>

在这里查看更多详情https://css-tricks.com/svg-title-vs-html-title-attribute/

---

我想出了一些只使用 HTML + CSS 的东西。希望这对你有用

.mzhrttltp { 位置：相对；显示：内联块； } .mzhrttltp .hrttltptxt { 可见性：隐藏；宽度：120px；背景颜色：#040505；字体大小：13px；颜色：#fff；字体系列：IranYekanWeb；文本对齐：居中；边框半径：3px；填充：4px 0；位置：绝对； z-index：1；最高：105%；左：50%；左边距：-60px； } .mzhrttltp .hrttltptxt::after { 内容："";位置：绝对；底部：100%；左：50%；左边距：-5px；边框宽度：5px；边框样式：实心； border-color: transparent transparent #040505 transparent; } .mzhrttltp：悬停 .hrttltptxt { 可见性：可见； }

---

我的设置总是使用通用的 CSS 标题。我只是在为我的博客管理页面构建分析。我不需要任何花哨的东西。这是一些代码...

let comps = g.selectAll('.myClass')
   .data(data)
   .enter()
   .append('rect')
   ...styling...
   ...transitions...
   ...whatever...

g.selectAll('.myClass')
   .append('svg:title')
   .text((d, i) => d.name + '-' + i);

还有chrome的截图...

https://i.stack.imgur.com/cuXW8.png

---

我将 heroicons 用于我正在进行的项目。 （这是 JSX 格式）我将使用此代码处理工具提示问题。

<svg className="h-6 w-6">
        <title>{reasons.join(" ")}</title>
        <QuestionMarkCircleIcon className={style} />
      </svg>

---