调整引导工具提示宽度

Question

我正在我的表单上使用引导工具提示版本3和JQuery，它有不同宽度的文本框。我想知道是否有办法根据工具提示所在的元素调整工具提示的宽度。i、 我希望工具提示内容显示在一行中，直到达到元素的宽度。一旦工具提示宽度超过它所在的元素，它将自动在下一行显示内容。这是否可以使用引导工具提示？

 $('#myTextBox1').tooltip();
 $('#myTextBox2').tooltip();

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:

    .textBox1 {
     width:200px;
     height:40px;
}

    .textBox2 {
     width:300px;
     height:40px;
}

Answer 1

我认为你对这个问题的总体策略是正确的，但是你陷入了紧张状态。经过快速研究，我建议以下文章：

• 如何更改Twitter Bootstrap工具提示的宽度和高度？
• 如何使Twitter引导工具提示有多行？
• 如何做引导微醺工具提示多行

这就是说，我不完全确定是否可以自动完成：您必须知道并计算元素的宽度（如果我调整窗口大小会怎么样？）。

但是我的链接显示你肯定可以手动完成。因此，一个可能的解决方案是为您计划的每个大小使用不同的CSS类或文件。虽然不完美，但它确实有效。

希望我帮了忙！

Answer 2

我希望我不会太迟为未来寻找答案的程序员发布这个。有一个像这样的问题。转到此链接：如何更改Twitter引导工具提示的宽度和高度？

那里的答案之一非常有用。它是由@Knobli回答的。我不知道如何链接答案，但我希望你能去那个页面投票。不管怎样，我就在这里抄下来。

对于CSS：

.tooltip-inner {
    max-width: 100% !important;
}

对于超文本标记语言：

<a href="#" data-toggle="tooltip" data-placement="right" data-container="body" title="" data-original-title="Insert Title">Insert Title</a>

只需添加data container=“body”，就可以开始了。