你如何改变Twitter Bootstrap的工具提示的宽度和高度？
我使用Twitter Bootstrap创build了一个工具提示。
工具提示显示三行。 不过，我只想用一行显示工具提示。
如何更改工具提示的宽度？ 这是特定于Twitter的Bootstrap或工具提示自己？
只要覆盖bootstrap.css
BS2中的默认值是max-width：200px; 所以你可以增加任何适合你的需求。
.tooltip-inner { max-width: 350px; /* If max-width does not work, try using width instead */ width: 350px; } 你应该用自己的css覆盖这些属性。 像这样：
div.tooltip-inner { text-align: center; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; margin-bottom: 6px; background-color: #505050; font-size: 14px; }
select器select工具提示的div（tooltip是通过javascript添加的，通常不属于任何容器。
在BS3上
.tooltip-inner { min-width: 150px; //the minimum width }
我意识到这是一个非常古老的问题，但如果我在这里降落，其他人也会这样。 所以我觉得我的重量
如果您希望工具提示仅响应一行，而不pipe添加了多less内容，则宽度必须是灵活的。 然而，Bootstrap并没有启动工具提示到一定的宽度，所以你至less要声明这个宽度将会是什么，并且从这个尺寸上弹性化。 这是我build议的：
.tooltip-inner { min-width: 100px; max-width: 100%; }
min-width声明一个起始大小。 与最大宽度相反，正如其他人所暗示的，它声明了一个停止宽度。 根据你的问题，你不应该声明一个最终的宽度，否则你的工具提示内容将最终包装在这一点上。 而是使用无限宽度或灵活宽度。 max-width: 100%; 将确保一旦工具提示在100px宽的范围内启动，它就会随着您的内容数量的增长而增长并适应您的内容。
保持头脑工具提示并不打算携带大量的内容。 如果你在整个屏幕上有一个很长的string，它可能看起来很时髦。 而且它肯定会影响你的反应意见，特别是智能手机（宽320px）。
我会推荐两个解决scheme来完善这个：
- 保持您的工具提示内容最小化，以不超过320px宽。 即使你这样做，你也必须记住，如果你的工具提示放在屏幕的右侧，并且有
data-placement:right，那么你的工具提示内容将不会在智能手机中显示出来（因此，bootstrap最初devise为响应内容并允许它包装） - 如果您正在使用这一行工具提示概念，那么通过使用
@media查询覆盖您的六个工具提示以重置智能手机视图。 喜欢这个：
我的演示在这里根据内容大小和设备显示大小展示了工具提示的灵活性和响应能力
@media (max-width: 320px) { .tooltip-inner { min-width: initial; width: 320px; } }
用“重要”来定义最大宽度 并使用data-container =“body”
CSS文件
.tooltip-inner { max-width: 500px !important; }
HTML标记
<a data-container="body" title="Looooooooooooooooooooooooooooooooooooooong Message" href="#" class="tooltiplink" data-toggle="tooltip" data-placement="bottom" data-html="true"><i class="glyphicon glyphicon-info-sign"></i></a>
JS脚本
$('.tooltiplink').tooltip();
要修复宽度问题，请改用以下代码。
$('input[rel="txtTooltip"]').tooltip({ container: 'body' });
例如： http : //eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip-width/
您可以编辑bootstrap.css中的.tooltip-inner css类。 默认的最大宽度是200px。 您可以将最大宽度更改为所需的大小。
将类设置为主工具提示div和内部工具提示
div.tooltip { width: 270px; } div.tooltip-inner { max-width: 280px; }
只要覆盖默认的max-width以适应您的需求。
.tooltip-inner { max-width: 350px; }
当最大宽度不起作用时 （选项1）
如果最大宽度不起作用，则可以使用设置的宽度。 这很好，但是您的工具提示将不再resize以适应文本。 如果你不喜欢，跳到选项2。
.tooltip-inner { width: 350px; }
正确处理小型集装箱 （选项2）
由于Bootstrap将工具提示附加为目标的兄弟，因此它受到包含元素的限制。 如果包含元素小于max-width ，则max-width将不起作用。
所以，当max-width不起作用，你只需要改变container ：
<div class="some-small-element"> <a data-container="body" href="#" title="Your boxed-in tooltip text"> </div>
专业提示：容器可以是任何select器，这是很好的，当你只想在几个工具提示覆盖样式。
BS3：
.tooltip-inner { width:400px; max-width: 400px; }
解决scheme 在CSS中创build一个新的类（例如工具提示）
.tooltip-wide + .tooltip > .tooltip-inner { max-width: 100%; }
在需要宽工具提示的元素上使用此类：
<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>
引导工具提示会在包含工具提示的元素下方生成标记，因此在标记生成后，HTML实际上看起来像这样：
<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div> <div class="tooltip" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner">I am a long tooltip</div> </div>
CSS使用这个来访问相邻的元素（+）.tooltip-wide，并从那里导航到.tooltip-inner，然后应用max-width属性。 这只会影响使用.tooltip范围的类的元素，所有其他的工具提示将保持不变。
试试这个代码，
.tooltip-inner { max-width:350px !important; }
我有同样的问题，但是所有stream行的答案 – 为我的任务更改.tooltip-inner{width}未能做好工作。 至于其他（即较短）的工具提示固定宽度太大。 我懒得为zilions的工具提示编写单独的html模板/类，所以我用 replace了单词之间的所有空格 在每个文本行。
经过一些实验，这对我来说最合适：
.tooltip-inner { max-width: 350px; /* set this to your maximum fitting width */ width: inherit; /* will take up least amount of space */ }
设置class tooltip-inner的最大宽度对我不起作用 ，我正在使用bootstrap 3.2
一些如何设置最大宽度只工作，如果你设置父类 （.tooltip） 的宽度 。
但是，然后所有的工具提示成为您指定的大小。 所以这是我的解决scheme：
给父类添加一个宽度：
.tooltip { width:400px; }
然后添加最大宽度并将显示更改为内嵌块，因此它不会占用整个空间
.tooltip-inner { max-width: @tooltip-max-width; display:inline-block; }
请参考下面的post。 cmcculloh的答案为我工作。 https://stackoverflow.com/posts/31683500/edit
正如在文档中暗示的那样，确保工具提示完全不打包的最简单的方法就是使用
.tooltip-inner { max-width: none; white-space: nowrap; }
有了这个，你不必担心尺寸值或类似的东西。 主要的问题是，如果你有一个超长的文本行，它会离开屏幕（你可以在JSBin例子中看到）。
我的所有可变长度和设置最大宽度都不适合我，所以把我的CSS设置为100％就像一个魅力。
.tooltip-inner { max-width: 100%; }
在bootstrap 3.0.3中，你可以通过修改popover类来实现
.popover { min-width: 200px; max-width: 400px; }
