twitter-bootstrap 调整 Bootstrap 工具提示宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36263249/
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
Adjust Bootstrap Tooltip Width
提问by user1527762
I am using bootstrap tooltips version 3 and JQuery on my form which has textboxes with different widths. I was wondering if there is a way to adjust the width of the tooltip according to the element it is on. i.e I would like the tooltip content to display in a single line until the width of the element is reached. Once the tooltip width exceeds the element it is on then it should automatically display the content on the next line. Is this possible using bootstrap tooltips?
我在我的表单上使用引导工具提示版本 3 和 JQuery，它具有不同宽度的文本框。我想知道是否有办法根据它所在的元素调整工具提示的宽度。即我希望工具提示内容显示在一行中，直到达到元素的宽度。一旦工具提示宽度超过它所在的元素，它就会自动在下一行显示内容。这可以使用引导工具提示吗？
$('#myTextBox1').tooltip();
$('#myTextBox2').tooltip();
HTML:
HTML：
<input type="text" id="#myTextBox1" class="textBox1" data-placement="top" title="tooltip on first input to check if the width adjusts to the width of the text box!" />
<input type="text" id="#myTextBox2" class="textBox2" data-placement="top" title="tooltip on second input!" />
CSS:
CSS：
.textBox1 {
width:200px;
height:40px;
}
.textBox2 {
width:300px;
height:40px;
}
回答by Rei-chan
I hope I'm not too late to post this for future programmers looking for answers. There's a question like this one. Go to this link: How do you change the width and height of Twitter Bootstrap's tooltips?
我希望我为未来的程序员寻找答案发布这篇文章还为时不晚。有一个这样的问题。转到此链接：如何更改 Twitter Bootstrap 工具提示的宽度和高度？
One of the answers there is very useful. It was answered by @knobli. I don't know how to link the answer but I hope you can go to that page and vote it up. Anyway, I'll just copy it right here.
那里的答案之一非常有用。@knobli 回答了这个问题。我不知道如何链接答案，但我希望您可以转到该页面并投票。不管怎样，我就直接复制到这里。
For CSS:
对于 CSS：
.tooltip-inner {
max-width: 100% !important;
}
For HTML:
对于 HTML：
<a href="#" data-toggle="tooltip" data-placement="right" data-container="body" title="" data-original-title="Insert Title">Insert Title</a>
Just add data-container="body"and you're ready to go.
只需添加data-container="body"就可以开始了。
回答by Flame_Phoenix
I think that your overall strategy for the problem is right, but you are stuck in a tenchicality. After a quick research, I suggest the following articles:
我认为您对问题的总体策略是正确的，但您陷入了技术困境。经过快速研究，我建议阅读以下文章：
- How do you change the width and height of Twitter Bootstrap's tooltips?
- How to make Twitter bootstrap tooltips have multiple lines?
- how to do bootstrap tipsy tooltip multiline
This said, I am not entirely sure if you can do it automatically: you'd have to know and calculate the width of the element (what if I resize my window?).
这就是说，我不完全确定您是否可以自动执行此操作：您必须知道并计算元素的宽度（如果我调整窗口大小会怎样？）。
But my links show you can for sure do it manually. Thus, a possible solution is to have different CSS classes or files for each size you plan on having. Not perfect, but it works.
但是我的链接显示您肯定可以手动完成。因此，一个可能的解决方案是为您计划拥有的每种尺寸使用不同的 CSS 类或文件。不完美，但它有效。
Hope I helped!
希望我有所帮助！
