调整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

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

其中一个答案非常有用.@knobli回答了这个问题.我不知道如何链接答案,但我希望你可以去那个页面投票.无论如何,我只是在这里复制它.

对于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"就可以了.