如何改变Twitter Bootstrap的工具提示框的宽度和高度？

Question

我使用Twitter Bootstrap创建了一个提示框。

提示框显示为三行。但是我希望将提示框只显示为一行。

我该如何更改提示框的宽度？这是特定于Twitter Bootstrap还是通用于所有提示框？

- onejigtwojig

---

你可以接受一个答案吗？这也会帮助其他人。 - MERose

Answer 1

只需覆盖bootstrap.css文件即可。

在BS2中默认max-width为200像素；因此您可以根据需要将其增加到适当的大小。

.tooltip-inner {
    max-width: 350px;
    /* If max-width does not work, try using width instead */
    width: 350px; 
}

- Valentin Despa

---

max-width 对我不起作用，但 width 可以。已在 Chrome 和 IE9 上测试。有任何线索吗？ - Rosdi Kasim

在我的情况下，设置max-width和width都很好用，因为.tooltip-inner小于max-width（200px），尽管它有很多文本。 - Nobu

只需像这样添加 !important，它就会起作用：max-width: 350px !important; - Sohail Anwar

对于仍然遇到max-width问题且没有看到@knobli下面的答案的人，请在您的HTML元素中使用data-container="body"。 - kips15

和其他评论一样，宽度可以正常工作，但没有最大宽度。 - Rod Talingting

Answer 2

在BS3上

.tooltip-inner {
    min-width: 150px; /* the minimum width */
}

- Shina

Answer 3

我意识到这是一个非常古老的问题，但如果我来到这里，其他人也会来到这里。所以我想发表一下我的看法。

如果您希望工具提示仅对一行响应，而不管您添加多少内容，则宽度必须具有灵活性。然而，Bootstrap确实将工具提示初始化为某个宽度，因此您至少必须声明该宽度，并使其从该大小开始具有灵活性。这是我推荐的做法：

.tooltip-inner {
    min-width: 100px;
    max-width: 100%; 
}

min-width指定了一个起始大小。与其他一些建议使用的max-width相反，它声明了一个停止宽度。根据您的问题，您不应该声明最终宽度，否则您的工具提示内容最终会在那一点处换行。相反，您可以使用无限宽度或灵活宽度。max-width: 100％;将确保一旦工具提示已在100像素宽处启动，它将根据您的内容增长和调整，而不管您在其中有多少内容。

请记住工具提示不打算携带大量内容。如果您在整个屏幕上有一个长字符串，它可能看起来很奇怪。这肯定会影响您的响应式视图，尤其是智能手机（320像素宽）。

我建议两种解决方案来完善此问题：

1. 保持工具提示内容最小化，以不超过320像素的宽度。即使你这样做了，你必须记住如果你有一个放置在屏幕右侧且带有data-placement:right的工具提示，你的工具提示内容将在智能手机上不可见（这就是为什么Bootstrap最初设计它们对其内容进行响应并允许其换行的原因）。
2. 如果您坚持要使用这个单行工具提示概念，那么可以使用@media查询来重置您的工具提示以适应智能手机视图。就像这样：

我的演示 在此处 演示了工具提示根据内容大小和设备显示大小的灵活性和响应性。

@media (max-width: 320px) {
    .tooltip-inner {
         min-width: initial;
         width: 320px;
    }
}

- LOTUSMS

Answer 4

使用"important!"定义最大宽度，并使用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();

- knobli

---

对我来说，仅仅是 data-container="body" 就足够了。谢谢！ - Izhaki

Answer 5

您应该使用自己的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;
}

选择器选择包含提示框的 div 元素（提示框是由 JavaScript 添加的，通常不属于任何容器）。

- nglinh

---

只是好奇，你为什么要将重写样式定义为“div[class ='tooltip-inner']”，而不是简单的“div.tooltip-inner”？ - slawek

我在刚开始学习CSS时写了那些代码，所以我不记得当时为什么会用那种可笑的方式写它，哈哈。 - nglinh

Answer 6

为解决宽度问题，请改用以下代码。

$('input[rel="txtTooltip"]').tooltip({
    container: 'body'
});

example: http://eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip-width/

- 戈晓伟

---

我认为最好的答案，因为它不包括改变Bootstrap CSS。 - Tim Scarborough

这对我来说是最好的答案，但它并没有回答问题。 - Miguel Peniche

这是我认为最好的解决方案。它使用工具提示配置而不是 CSS Bootstrap 覆盖。 - César León

这绝对是最好的答案。Jquery提供了在工具提示中执行各种操作的功能，为什么不使用它呢？修改CSS应该是最后的选择。 - E10

Answer 7

另一个解决方案是，在CSS中创建一个新类（例如tooltip-wide）：

.tooltip-wide + .tooltip > .tooltip-inner {
     max-width: 100%;
}

在您想要使用宽工具提示的元素上使用此类：

<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>

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>

CSS使用此方法访问与.tooltip-wide相邻的元素(+)，然后导航到.tooltip-inner，再应用max-width属性。这只会影响使用.tooltip-wide类的元素，所有其他工具提示都将保持不变。

- Are

---

伟大的解决方案，因为您可以选择要使用哪些工具提示。 - Will Schoenberger

在Bootstrap 4中，工具提示被附加到了body。但是，通过使用data-template="<div class='tooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner tooltip-wide'></div></div>"和.tooltip-wide {max-width: 100%;min-width: 80%;}可以让它工作。 - Matteo Ferla

这是我看到的第一个在使用BS4工具提示时的真实示例。演示很好，而且添加自定义类也很容易。 - klewis

Answer 8

经过一些尝试，这对我来说效果最好：

.tooltip-inner {
    max-width: 350px; /* set this to your maximum fitting width */
    width: inherit; /* will take up least amount of space */ 
}

- xeruf

---

将此与BS 4.5中的模板方法相结合，使得工具提示定位在正确的位置，并允许更宽的工具提示。 - Brett Green

Answer 9

在Bootstrap 4中，如果您不想更改所有工具提示的宽度，则可以为您想要的工具提示使用特定的模板：

<a href="/link" class="btn btn-info"
   data-toggle="tooltip"
   data-placement="bottom"
   data-template="<div class='tooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner' style='max-width: 400px;'></div></div>"
   title="This is a long message displayed on 400px width tooltip !"
>
    My button label
</a>

- Vincent Decaux

---

为了使其正常工作，我不得不添加 data-sanitize='false'。 - undefined

Answer 10

您可以在bootstrap.css中编辑.tooltip-inner css类。默认的最大宽度为200像素。您可以将最大宽度更改为所需大小。

- onejigtwojig

---

这很棒，可以调整宽度！谢谢！这个加上上面的答案就是完整的解决方案！ - ATSiem

如@nglinh所说：“这并不是一个好建议”。在更新bootstrap时，您不想追踪所有的修改。 - Valentin Despa