javascript 如何动态设置工具提示宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25053905/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set a tooltip width dynamically?
提问by Belphegor
I want to create a tool-tip that will have flexible size according to the text length. For example, I have the following tool-tip:
我想创建一个工具提示，根据文本长度具有灵活的大小。例如，我有以下工具提示：
Now, for this text, the width is OK (fixed in the css). But, when I have a very smaller string:
现在，对于这个文本，宽度是可以的（在 css 中是固定的）。但是，当我有一个非常小的字符串时：
the tool-tip looks too big. My question is: how do I make the tool-tip flexible according to the text length? Is there a way to do this in the .css maybe? I work with d3.js, so an answer from this point of view would be acceptable too.
工具提示看起来太大了。我的问题是：如何根据文本长度使工具提示灵活？有没有办法在 .css 中做到这一点？我使用 d3.js，所以从这个角度来看答案也是可以接受的。
Thank you in advance for your answer!
预先感谢您的回答！
EDIT:I use this tutorialin order to accomplish my goal, my code is something like that (not exactly, but close enough). It would be best to provide an answer based on that example, since my code is too big to post here.
编辑：我使用本教程来实现我的目标，我的代码是这样的（不完全，但足够接近）。最好根据该示例提供答案，因为我的代码太大而无法在此处发布。
回答by MujtabaFR
You can do that with CSS, just use min-widthand max-widthtogether instead of width
你可以用CSS做到这一点，只需使用min-widthandmax-width代替width
Also you can simply remove widthfrom your CSSor change it into width: auto;
您也可以简单地width从CSS 中删除或将其更改为width: auto;
回答by jasonscript
the css for the tooltops looks like this (according to your link)
工具顶部的 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;
}
Try removing the widthproperty of the CSS. Above you can see that this is set to a fixed-width of 60 pixels.
尝试删除widthCSS的属性。在上面你可以看到它被设置为 60 像素的固定宽度。
回答by CodingKida Patil
This may be best CSS for this. It will adjust its size according to text inside it
这可能是最好的 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;
}
