Question

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

工具提示显示三行。但是，我想只用一行显示工具提示。

如何更改工具提示的宽度？这是特定于Twitter Bootstrap还是工具提示本身？

Answer 1

只需覆盖bootstrap.css

BS2中的默认值为max-width：200px;因此，您可以根据自己的需要增加它。

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

Answer 2

在BS3上

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

Answer 3

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

Answer 4

我意识到这是一个非常古老的问题，但如果我降落在这里，其他人也会这样。所以我觉得我在努力。

如果您希望工具提示仅响应一行，无论您添加多少内容，宽度都必须灵活。但是，Bootstrap确实会将工具提示启动到一个宽度，因此您必须至少声明该宽度是什么，并使其从该大小开始变得灵活。这就是我的建议：

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

min-width声明起始大小。与最大宽度相反，正如其他人所暗示的那样，它声明了停止宽度。根据您的问题，您不应该声明最终宽度，否则您的工具提示内容最终会在此处换行。相反，您使用无限宽度或灵活宽度。 max-width: 100%;将确保一旦工具提示以100px宽度启动，它就会增长并根据您的内容进行调整，无论您拥有多少内容。

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

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

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

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

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

Answer 5

使用“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();

Answer 6

另一种解决方案;在CSS中创建一个新类（例如工具提示）：

.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类的元素，所有其他工具提示将保持不变。

Answer 7

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

Answer 8

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

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

Answer 9

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

div.tooltip {
    width: 270px;
}

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

Answer 10

只需将默认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>

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

Answer 11

BS3：

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

Answer 12

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

正如in the documentation暗示的那样，确保工具提示完全不包装的最简单方法是使用

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

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

Answer 13

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

Answer 14

试试这段代码，

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

Answer 15

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

Answer 16

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

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." />

Answer 17

我使用Bootstrap 4

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

Answer 18

我的所有可变长度和设定的最大宽度对我来说都不起作用所以将我的css设置为100％就像魅力一样。

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

Answer 19

设置类tooltip-inner 的 max-width 对我不起作用，我使用的是bootstrap 3.2

如果设置父类的宽度（.tooltip），设置最大宽度的方式有效。

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

向父类添加宽度：

.tooltip { width:400px; }

然后添加max-width并将显示更改为inline-block，这样它就不会占用整个空间

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

Answer 20

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

来实现

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

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

20 个答案: