我在我的表单上使用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;
}
答案 0 :(得分:10)
我希望我能为未来寻找答案的程序员发帖迟到。有一个像这样的问题。转到此链接:How do you change the width and height of Twitter Bootstrap's tooltips?
其中一个答案非常有用。 @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>
只需添加数据容器=&#34;正文&#34; ,您就可以了。
答案 1 :(得分:0)
我认为你对这个问题的整体策略是正确的,但你却陷入了局面。经过快速研究,我建议以下文章:
这就是说,我不能完全确定你是否可以自动完成:你必须知道并计算元素的宽度(如果我调整窗口大小会怎样?)。
但我的链接显示你可以肯定手动完成。因此,可能的解决方案是为您计划的每个大小设置不同的CSS类或文件。不完美,但它有效。
希望我帮忙!