如何动态设置工具提示宽度？

Question

我想创建一个根据文本长度具有灵活大小的工具提示。例如，我有以下工具提示：

现在，对于此文本，宽度正常（在css中已修复）。但是，当我有一个非常小的字符串时：

工具提示看起来太大了。我的问题是：如何根据文本长度使工具提示灵活？有没有办法在.css中这样做呢？我使用d3.js，所以从这个角度来看也是可以接受的。

提前感谢您的回答！

编辑： 我使用this tutorial来完成我的目标，我的代码就是这样（不完全，但足够接近）。最好根据这个例子提供一个答案，因为我的代码太大了，不能在这里发布。

Answer 1

您可以使用 CSS 执行此操作，只需使用min-width和max-width代替width

您也可以从 CSS 中删除width或将其更改为width: auto;

Answer 2

tooltops的css看起来像这样（根据你的链接）

div.tooltip {   
  position: absolute;           
  text-align: center;           
  width: 60px;                    /* Width and Height are fixed */            
  height: 28px;                 
  padding: 2px;             
  font: 12px sans-serif;        
  background: lightsteelblue;   
  border: 0px;      
  border-radius: 8px;           
  pointer-events: none;         
}

尝试删除CSS的width属性。在上面你可以看到它设置为60像素的固定宽度。

Answer 3

这可能是最好的CSS。它将根据其中的文本调整大小

div.tooltip{
    position: absolute;
                white-space: pre-line;
                pointer-events: none;
                visibility: visible;
                background-color:White;
                text-align: left;
                padding: 5px 0;
                display: block;
                z-index: 1;
                border: 0.5px solid black;
}