如何在SVG元素悬停时显示工具提示div

我需要一个内联SVG图表，它有一个“更多信息”图标，应该在悬停时触发“工具提示”。见附件

我已经设置了工具提示div的样式，并在其他地方使用，但我还需要它在SVG内的信息图标上触发

我知道我不能在SVG中添加工具提示html，那么还有什么其他选项可供我选择呢

“图表”只是直接从图形程序（本例中为草图）中获取的内嵌SVG。我不使用任何框架或库，如D3或chartjs。请不要建议使用库或框架，因为这不是一个选项

类似的问题，但他们没有回答我的问题：

---

这很简单。它只需要几行Javascript

当我们将鼠标移到图标上时，我们定位弹出窗口并显示它。在mouseout上，我们再次隐藏它

还要注意图标上的

pointer events=“all”

，这确保即使对于具有不可见填充的位，鼠标也被视为“覆盖”图标元素

var myicon=document.getElementById（“myicon”）；
var mypopup=document.getElementById（“mypopup”）；
myicon.addEventListener（“鼠标悬停”，showPopup）；
myicon.addEventListener（“鼠标出口”，隐藏点）；
功能显示弹出窗口（evt）{
var iconPos=myicon.getBoundingClientRect（）；
mypopup.style.left=（iconPos.right+20）+“px”；
mypopup.style.top=（window.scrollY+iconPos.top-60）+“px”；
mypopup.style.display=“block”；
}
函数hidePopup（evt）{
mypopup.style.display=“无”；
}

正文{
背景色：#33333f；
}
#我的弹出窗口{
宽度：400px；
填充：20px；
字体系列：Arial，无衬线；
字号：10pt；
背景色：白色；
边界半径：6px；
位置：绝对位置；
显示：无；
}
#mypopup:：之前{
内容：“；
宽度：12px；
高度：12px；
变换：旋转（45度）；
背景色：白色；
位置：绝对位置；
左-6px；
顶部：68px；
}

弹出标题
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作

两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

这很简单。它只需要几行Javascript

当我们将鼠标移到图标上时，我们定位弹出窗口并显示它。在mouseout上，我们再次隐藏它

还要注意图标上的

pointer events=“all”

，这确保即使对于具有不可见填充的位，鼠标也被视为“覆盖”图标元素

var myicon=document.getElementById（“myicon”）；
var mypopup=document.getElementById（“mypopup”）；
myicon.addEventListener（“鼠标悬停”，showPopup）；
myicon.addEventListener（“鼠标出口”，隐藏点）；
功能显示弹出窗口（evt）{
var iconPos=myicon.getBoundingClientRect（）；
mypopup.style.left=（iconPos.right+20）+“px”；
mypopup.style.top=（window.scrollY+iconPos.top-60）+“px”；
mypopup.style.display=“block”；
}
函数hidePopup（evt）{
mypopup.style.display=“无”；
}

正文{
背景色：#33333f；
}
#我的弹出窗口{
宽度：400px；
填充：20px；
字体系列：Arial，无衬线；
字号：10pt；
背景色：白色；
边界半径：6px；
位置：绝对位置；
显示：无；
}
#mypopup:：之前{
内容：“；
宽度：12px；
高度：12px；
变换：旋转（45度）；
背景色：白色；
位置：绝对位置；
左-6px；
顶部：68px；
}

弹出标题
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作

两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

foreignObject标记将允许您在SVG中添加工具提示html。链接的答案有什么问题？到目前为止，您编写了哪些代码？需要解决哪些问题？要求使用自定义工具提示，而不是浏览器内置工具提示，告诉我们您已经拥有了哪些代码。您说您有tooltip div。还提供一些最小的SVG标记，即感谢。我现在有了一个可行的解决方案。foreignObject标记将允许您在SVG中添加工具提示html。链接的答案有什么问题？到目前为止，您编写了哪些代码？需要解决哪些问题？要求使用自定义工具提示，而不是浏览器内置工具提示，告诉我们您已经拥有了哪些代码。您说您有tooltip div。还提供一些最小的SVG标记，即感谢。我现在有一个有效的解决方案。谢谢。getBoundingClientRect方法正是我所需要的。谢谢。getBoundingClientRect方法是我所需要的。