Javascript 在d3力图中缩放div工具提示

一般来说，我不熟悉d3和javascript。我在这里构建了这个fiddle，它是一个基本的d3力图，带有一个.onmousover事件，当用户悬停在一个节点上时，它会显示一个div工具提示

工具提示中的内容来自节点数据

   var nodes = [
    { x:   width/3, y: height/2, "content":"small" },
    { x: 2*width/3, y: height/2,   "content":"biggerbiggerbiggerbiggerbiggerbigger"}
   ];

d3节点javascript

var node = svg.selectAll('.node')
    .data(nodes)
    .enter().append('circle')
    .attr('class', 'node')
    .on("mouseover", function(d) {
        div.transition()
          .duration(200)
          .style("opacity", .9);
        div.html(d.content + "<br/>" + d.content + "<br/>" + d.content + "<br/>" + d.content + "<br/>" )
          .style("left", (d3.event.pageX) + "px")
          .style("top", (d3.event.pageY - 28) + "px");
        })
        .on("mouseout", function(d) {
        div.transition()
          .duration(500)
          .style("opacity", 0);
        })
                ;

div工具提示的css

var div = d3.select("body").append("div")
      .attr("class", "tooltip")
      .style("opacity", 0);

div.tooltip {
  position: absolute;
  overflow: hidden;
  text-align: center;
  width: 200px;
  height: 50px;
  padding: 2px;
  font: 15px "Courier New";
  color: #F2F3F4;
  background: #5D6D7E;
  border: 1px;
  border-radius: 5px;
  border-style: solid;
  border-color: #BDC3C7;
  pointer-events: none;
}

但是，我不知道如何缩放工具提示，使其根据文本长度或内容中的换行数展开或收缩

它可能最容易在小提琴上看到

有人能帮忙吗

---

谢谢

我已经分叉并更新了您的文档，我必须做一些更正，以便它可以运行（可能只是一些拼写错误，与问题无关）。需要改变的是：

div.tooltip {
  width: 200px;
}

到

---

硬编码宽度将强制该宽度，而不管元素内容如何

max content

将基本上使div尽可能大以适应内部内容

太好了，这正是我想要的。非常感谢。是的，有一个打字错误，我多次遇到同样的问题，很高兴我能帮上忙！欢迎来到这个网站！您的JSFIDLE似乎不起作用。当我点击run时，它什么都不做。一些提示：1）你的html末尾有一个字母2）你想把css放在css框中，而不是放在html框中3）同样使用javascript；JSFIDLE不能很好地与HTML框中的js配合使用。要添加js引用（如d3），可以在页面左侧的“参考资料”部分添加这些引用。

div.tooltip {
  width: max-content;
}