如何更改 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; 
}

---

在 BS3 上

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

---

我意识到这是一个非常古老的问题，但如果我来到这里，其他人也会。所以我想我在权衡。

如果您希望工具提示仅响应一行而不管您添加多少内容，宽度必须灵活。但是，Bootstrap 确实将工具提示设置为一个宽度，因此您至少必须声明该宽度将是多少，并使其从该大小开始变得灵活。这是我推荐的：

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

min-width 声明起始大小。与其他人建议的最大宽度相反，它声明了一个 stopping 宽度。根据您的问题，您不应声明最终宽度，否则您的工具提示内容最终将在该点换行。相反，您使用无限宽度或灵活宽度。 max-width: 100%; 将确保一旦工具提示以 100 像素宽开始，无论您包含多少内容，它都会增长并适应您的内容。

记住工具提示并不打算包含大量内容。如果你在整个屏幕上有一根长串，它可能看起来很时髦。它肯定会对您的响应式视图产生影响，特别是智能手机（320px 宽度）。

我会推荐两种解决方案来完善这一点：

将您的工具提示内容保持在最低限度，以便不超过 320 像素宽。即使您这样做，您也必须记住，如果您将工具提示放置在屏幕右侧并使用 data-placement:right，那么您的工具提示内容将不会在智能手机中可见（因此为什么 bootstrap 最初将它们设计为响应它的内容并允许它换行）如果您一心想要使用这一行工具提示概念，那么通过使用@media 查询重置您的工具提示以适应智能手机视图来覆盖您的六个。像这样：

我的演示 HERE 还根据内容大小和设备显示大小演示了工具提示的灵活性和响应能力

@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();

---

您应该使用自己的 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 添加的，它通常不属于任何容器。

---

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

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

示例：http://eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip-width/

---

另一种解决方案；在 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 类的元素，所有其他工具提示将保持不变。

---

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

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

---

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

---

只需将默认 max-width 覆盖为适合您需要的任何内容。

.tooltip-inner {
  max-width: 350px;
}

当 max-width 不起作用时（选项 1）

如果 max-width 不起作用，则可以改用设置宽度。这很好，但您的工具提示将不再调整大小以适合文本。如果您不喜欢这样，请跳至选项 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>

专业提示：容器可以是任何选择器，当您只想覆盖几个工具提示上的样式时，这很好。

---

在 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>

---

请参考以下帖子。 cmcculloh 的回答对我有用。 https://stackoverflow.com/posts/31683500/edit

正如 in the documentation 所暗示的，确保您的工具提示完全不换行的最简单方法是使用

.tooltip-inner {
    max-width: none;
    white-space: nowrap;
}

有了这个，您不必担心尺寸值或类似的东西。主要问题是如果您有超长的文本行，它就会离开屏幕（如您在 JSBin Example 中所见）。

---

将类设置为主工具提示 div 和内部工具提示

div.tooltip {
    width: 270px;
}

div.tooltip-inner {
    max-width: 280px;
}

---

BS3：

.tooltip-inner { width:400px; max-width: 400px; }

---

我需要调整一些工具提示的宽度。但不是整体设置。所以我最终这样做了：

CSS

.large-tooltip .tooltip-inner {
    max-width: 300px;
}
@media screen and (max-width: 300px) {
  .large-tooltip .tooltip-inner {
    max-width: 100%;
  }
}

jQuery

$('[data-toggle="tooltip"]')
    .tooltip()
    .on('shown.bs.tooltip', function(e) {
        /**
         * If the item that triggered the event has class 'large-tooltip'
         * then also add it to the currently open tooltip
         */
        if ($(this).hasClass('large-tooltip')) {
            $('body').find('.tooltip[role="tooltip"].show').addClass('large-tooltip');
        }
    });

html

<img src="/theimage.jpg" class="large-tooltip" data-toggle="tooltip" data-html="true" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />

---

设置类 tooltip-inner 的最大宽度对我不起作用，我使用的是 bootstrap 3.2

某些设置 max-width 的方法仅在您设置父类的宽度 (.tooltip) 时起作用。

但随后所有工具提示都会变成您指定的大小。所以这是我的解决方案：

向父类添加一个宽度：

.tooltip {
  width:400px;
}

然后你添加最大宽度并将显示更改为内联块，这样它就不会占据整个空间

.tooltip-inner {
  max-width: @tooltip-max-width;
  display:inline-block;
}

---

试试这个代码，

.tooltip-inner {
     max-width:350px !important;
}

---

我遇到了同样的问题，但是所有流行的答案 - 为我的任务更改 .tooltip-inner{width} 未能正确完成工作。至于其他（即较短的）工具提示，固定宽度太大了。我懒得为无数的工具提示编写单独的 html 模板/类，所以我只是用   在每个文本行中替换了单词之间的所有空格。

---

使用 Bootstrap 4 我使用

.tooltip-inner {
    margin-left: 50%;
    max-width: 50%;
    width: 50%;
    min-width: 300px;
}

---

我的所有可变长度和设置的最大宽度都不适合我，所以将我的 css 设置为 100% 就像一个魅力。

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

---

在 bootstrap 3.0.3 中，您可以通过修改 popover 类来实现

.popover {
    min-width: 200px;
    max-width: 400px;
}

---