twitter-bootstrap 如何更改 Twitter Bootstrap 工具提示的宽度和高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14596743/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you change the width and height of Twitter Bootstrap's tooltips?
提问by onejigtwojig
I created a tooltip using Twitter Bootstrap.
我使用 Twitter Bootstrap 创建了一个工具提示。
The tooltip is displaying with three lines. However, I would like to display the tooltip with only one line.
工具提示以三行显示。但是，我只想用一行显示工具提示。
How do I change the width of the tooltip? Is this specific to Twitter Bootstrap or to tooltips themselves?
如何更改工具提示的宽度？这是特定于 Twitter Bootstrap 还是工具提示本身？
回答by Valentin Despa
Just override bootstrap.css
只需覆盖 bootstrap.css
The default value in BS2 is max-width:200px; So you can increase it with whatever fits your needs.
BS2 中的默认值为 max-width:200px；因此，您可以根据自己的需要增加它。
.tooltip-inner {
max-width: 350px;
/* If max-width does not work, try using width instead */
width: 350px;
}
回答by Shina
On BS3
在 BS3
.tooltip-inner {
min-width: 150px; /* the minimum width */
}
回答by LOTUSMS
I realize this is a very old question, but if I landed here, so will others. So I figured I weigh in.
我意识到这是一个非常古老的问题，但如果我来到这里，其他人也会如此。所以我想我很重要。
If you want the tooltip to be responsive to one line only regardless of how much content you add to it, the width has to be flexible. However, Bootstrap does initiate the tooltip to a width, so you have to at least declare what that width will be and make it flexible from that size on up. This is what I recommend:
如果您希望工具提示只响应一行，而不管您添加多少内容，则宽度必须灵活。但是，Bootstrap 确实将工具提示设置为一个宽度，因此您至少必须声明该宽度是多少，并使其从该大小开始变得灵活。这是我推荐的：
.tooltip-inner {
min-width: 100px;
max-width: 100%;
}
The min-widthdeclares a starting size. As opposed to the max-width, as some other would suggest, which it declares a stoppingwidth. According to your question, you shouldn't declare a final width or your tooltip content will eventually wrap at that point. Instead, you use an infinite width or flexible width. max-width: 100%;will ensure that once the tooltip has initiated at 100px wide, it will grow and adjust to your content regardless of the amount of content you have in it.
该min-width声明的起始大小。与 max-width 不同，正如其他人所建议的那样，它声明了一个停止宽度。根据您的问题，您不应声明最终宽度，否则您的工具提示内容最终会在该点换行。相反，您使用无限宽度或灵活宽度。max-width: 100%;将确保一旦工具提示以 100 像素宽启动，无论您拥有多少内容，它都会根据您的内容增长和调整。
KEEP IN MINDTooltips are not intended to carry a lot of content. It could look funky if you had a long string across the entire screen. And it will definitely will have an impact in your responsive views, specially smartphone (320px width).
牢记工具提示不打算携带大量内容。如果整个屏幕上都有一条长字符串，它可能看起来很时髦。它肯定会对您的响应式视图产生影响，特别是智能手机（320 像素宽度）。
I would recommend two solutions to perfect this:
我会推荐两种解决方案来完善这个：
- Keep your tooltip content to a minimum so as to not exceed 320px wide. And even if you do this you must remember if you have the tooltip placed at the right of the screen and with
data-placement:right, your tooltip content will not be visible in smartphones (hence why bootstrap initially designed them to be responsive to its content and allow it to wrap) - If you are hellbent on using this one line tooltip concept, then cover your six by using a
@mediaquery to reset your tooltip to fit the smartphone view. Like this:
- 将您的工具提示内容保持在最低限度，以免超过 320 像素宽。即使您这样做，您也必须记住，如果您将工具提示放置在屏幕右侧并使用
data-placement:right，您的工具提示内容在智能手机中将不可见（因此为什么引导程序最初将它们设计为响应其内容并允许它裹） - 如果您一心想要使用这个单行工具提示概念，那么通过使用
@media查询来重置您的工具提示以适应智能手机视图来覆盖您的六个。像这样：
My demo HEREdemonstrates the flexibility and responsiveness on the tooltips according to content size and device display size as well
我的演示HERE 还根据内容大小和设备显示大小展示了工具提示的灵活性和响应性
@media (max-width: 320px) {
.tooltip-inner {
min-width: initial;
width: 320px;
}
}
回答by nglinh
You should overwrite the properties using your own css. like so:
您应该使用自己的 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;
}
the selector choose the div that the tooltip is held (tooltip is added in by javascript and it usually does not belong to any container.
选择器选择工具提示所在的 div（工具提示是由 javascript 添加的，它通常不属于任何容器。
回答by knobli
Define the max-width with "important!" and use data-container="body"
用“important!”定义最大宽度 并使用 data-container="body"
CSS file
CSS文件
.tooltip-inner {
max-width: 500px !important;
}
HTML tag
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 script
JS脚本
$('.tooltiplink').tooltip();
回答by u4836089
To fix the width problem, use the following code instead.
要解决宽度问题，请改用以下代码。
$('input[rel="txtTooltip"]').tooltip({
container: 'body'
});
example: http://eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip-width/
示例：http: //eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip-width/
回答by Are
Another solution; create a new class (e.g. tooltip-wide) in CSS:
另一种解决方案；在 CSS 中创建一个新类（例如工具提示范围）：
.tooltip-wide + .tooltip > .tooltip-inner {
max-width: 100%;
}
Use this class on elements where you want wide tooltips:
在需要宽工具提示的元素上使用此类：
<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>
Bootstrap tooltip generates markup below the element containing the tooltip, so the HTML actually looks something like this after the markup is generated:
Bootstrap 工具提示在包含工具提示的元素下方生成标记，因此在生成标记后 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>
The CSS uses this to access the adjacent element (+) to .tooltip-wide, and from there navigates to .tooltip-inner, before applying the max-width attribute. This will only affect elements using the .tooltip-wide class, all other tooltips will remain unaltered.
CSS 使用它来访问相邻元素 (+) 到 .tooltip-wide，然后在应用 max-width 属性之前从那里导航到 .tooltip-inner。这只会影响使用 .tooltip-wide 类的元素，所有其他工具提示将保持不变。
回答by onejigtwojig
You may edit the .tooltip-inner css class in bootstrap.css. The default max-width is 200px. You may change the max-width to your desired size.
您可以在 bootstrap.css 中编辑 .tooltip-inner css 类。默认最大宽度为 200 像素。您可以将最大宽度更改为您想要的大小。
回答by Anson
Just override the default max-widthto whatever fits your needs.
只需将默认值覆盖为max-width适合您需要的任何内容。
.tooltip-inner {
max-width: 350px;
}
When max-width doesn't work(option 1)
当最大宽度不起作用时（选项 1）
If max-width does not work, you could use a set width instead. This is fine, but your tooltips will no longer resize to fit the text. If you don't like that, skip to option 2.
如果 max-width 不起作用，您可以改用设置的宽度。这很好，但您的工具提示将不再调整大小以适应文本。如果您不喜欢那样，请跳至选项 2。
.tooltip-inner {
width: 350px;
}
Correctly dealing with small containers(option 2)
正确处理小容器（选项 2）
Since Bootstrap appends the tooltip as a sibling of the target, it is constrained by the containing element. If the containing element is smaller than your max-width, then max-widthwon't work.
由于 Bootstrap 将工具提示附加为目标的兄弟，因此它受包含元素的约束。如果包含元素小于您的max-width，则max-width不起作用。
So, when max-widthdoesn't work, you just need to change the container:
因此，当max-width不起作用时，您只需要更改container：
<div class="some-small-element">
<a data-container="body" href="#" title="Your boxed-in tooltip text">
</div>
Pro Tip: the container can be any selector, which is nice when you only want to override styles on a few tooltips.
专业提示：容器可以是任何选择器，当您只想覆盖几个工具提示上的样式时，这很好。
回答by Xerus
after some experimenting, this worked best for me:
经过一些试验，这对我来说效果最好：
.tooltip-inner {
max-width: 350px; /* set this to your maximum fitting width */
width: inherit; /* will take up least amount of space */
}
