Css 为什么我的工具提示位置错误？

我已使用以下内容制作了工具提示：

var tooltip = d3.select("#d3tooltip")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip");

和我的html：

<div id="d3">
<div id="d3tooltip"></div>
<div id="d3present"></div>
</div>

svg附加在“div#d3present”之后。当鼠标悬停节点时，tootip显示在节点旁边。它在一个html中工作正常

但是，当我将其渲染到对话框中时，工具提示不再靠近节点，事实上，它会一直延伸到对话框的底部

我已经工作了一整天，任何帮助都将不胜感激

标签的css样式是什么

当浏览器渲染“位置：绝对”元素时，它将找到元素的第一个父元素，该元素的位置在主体之前不是静态的，这意味着相对/绝对或固定的，然后使用该元素的位置渲染元素

默认情况下，每个元素的位置属性都是静态的

所以，如果您的#d3标记没有相对或绝对位置，并且您的模态对话框有绝对或固定位置，则浏览器将呈现相对于该位置的工具提示

---

你能检查一下你的工具提示吗

如果将“#d3”更改为绝对，我会将css样式更改为绝对，但没有任何更改，我仍然遇到了这个问题。我认为你是对的，但我的工具提示似乎总是位于页面的右下角，我是否应该向标记添加更多信息以“修复”工具提示的位置？我建议将#d3元素设置为相对，不进行任何上/左/右/下设置。所以浏览器会像静态元素一样显示它。然后，除了将position:absolute设置为工具提示外，还可以尝试一些“top:10%；left:40%”css样式。这些是真实的位置参数。但是如果我设置10%和40%，我的工具提示总是在一个地方。我如何在节点附近更改它的位置？