调整 Bootstrap 工具提示宽度

Question

我在我的表单上使用 bootstrap 工具提示版本 3 和 JQuery，其中文本框的宽度不同。我想知道是否有办法根据它所在的元素调整工具提示的宽度。即我希望工具提示内容显示在一行中，直到达到元素的宽度。一旦工具提示宽度超过它所在的元素，那么它应该自动在下一行显示内容。这可能使用 bootstrap 工具提示吗？

 $('#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

我认为你的问题整体策略是对的，但是你卡在了技术性上。经过快速研究，我建议阅读以下文章：

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

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

但我的链接显示您肯定可以手动完成。因此，一个可能的解决方案是为您计划拥有的每种尺寸设置不同的 CSS 类或文件。不完美，但它有效。

希望我有所帮助！

Answer 2

我希望我 post 为未来的程序员寻找答案还为时不晚。有这样一个问题。转到此 link：How do you change the width and height of Twitter Bootstrap's tooltips?

其中一个答案非常有用。 @knobli 回答了这个问题。我不知道如何 link 回答，但我希望您可以转到该页面并投票。不管怎样，我就直接复制过来吧

对于CSS：

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

对于HTML：

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

只需添加 data-container="body" 即可。

调整 Bootstrap 工具提示宽度

Adjust Bootstrap Tooltip Width

jquery

css

twitter-bootstrap

twitter-bootstrap-tooltip