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

【问题标题】：How to set a tooltip width dynamically?如何动态设置工具提示宽度？
【发布时间】：2014-09-23 02:28:43
【问题描述】：

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

现在，对于这个文本，宽度是可以的（固定在 css 中）。但是，当我有一个非常小的字符串时：

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

提前感谢您的回答！

编辑：我使用this tutorial 来实现我的目标，我的代码就是这样（不完全是，但足够接近）。最好根据该示例提供答案，因为我的代码太大，无法在此处发布。

【问题讨论】：

你能告诉我们HTML结构和CSS吗？可能还会创建fiddle 重新创建您的问题。就目前而言，这个问题过于宽泛，无法正确回答。
编辑了我的帖子，你可以在我提供的链接中找到你需要的代码。

标签： javascript jquery html css d3.js

【解决方案1】：

您可以使用 CSS 做到这一点，只需同时使用 min-width 和 max-width 而不是 width

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

【讨论】：

这不是我想要的。无论如何，Tnx 的答案！
@Belphegor 我已经更新了答案，看看吧
多么明显的答案，哈哈！不敢相信我没有尝试从 CSS 中删除宽度。 Tnx 很多！

【解决方案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像素的固定宽度。

【讨论】：

是的，它就是这样工作的，tnx 的答案！无论如何，@Mujtaba Fathel 已经在你之前几秒钟回答了，对不起，我应该接受他的回答。不过，为答案 +1！

【解决方案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;
}

【讨论】：