您如何更改Twitter Bootstrap工具提示的宽度和高度？

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

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

如何更改工具提示的宽度？这是特定于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声明的起始大小。与其他建议的最大宽度相反，它声明了停止宽度。根据您的问题，您不应该声明最终的宽度，否则您的工具提示内容最终将在那一刻结束。而是使用无限宽度或灵活宽度。max-width: 100%;将确保工具提示一旦以100像素宽启动，无论内容量如何，它都会增长并适应您的内容。

保持思想 提示不打算携带很多内容。如果您在整个屏幕上都有一长串字符串，则它看起来可能很时髦。它将肯定会影响您的响应视图，尤其是智能手机（320像素宽）。

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

1. 将您的工具提示内容最小化，以使宽度不超过320像素。即使执行此操作，也必须记住是否将工具提示放置在屏幕的右侧，并带有data-placement:right，您的工具提示内容将在智能手机中不可见（因此，bootstrap最初将其设计为响应其内容并允许它包）
2. 如果您不喜欢使用这一行工具提示概念，请使用@media查询重置您的工具提示以适合智能手机视图，从而涵盖您的六行内容。像这样：

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

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

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

用“重要！”定义最大宽度。并使用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/

另一个解决方案；在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的相邻元素（+），并在应用max-width属性之前从那里导航到.tooltip-inner。这只会影响使用.tooltip-wide类的元素，所有其他工具提示将保持不变。

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

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

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

只需覆盖默认值max-width即可满足您的需求。

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

当最大宽度不起作用时（选项1）

如果最大宽度无效，则可以使用设置的宽度。很好，但是您的工具提示将不再调整大小以适合文本。如果您不喜欢，请跳至选项2。

.tooltip-inner {
  width: 350px;
}

正确处理小容器（选项2）

由于Bootstrap将工具提示附加为目标的同级，因此它受contains元素的约束。如果包含的元素小于您的max-width，则max-width则将不起作用。

因此，当max-width不起作用时，您只需更改container：

<div class="some-small-element">
  <a data-container="body" href="#" title="Your boxed-in tooltip text">
</div>

专家提示：容器可以是任何选择器，当您只想覆盖一些工具提示上的样式时，这是不错的选择。

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

div.tooltip {
    width: 270px;
}

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

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

如文档中所提示，确保您的工具提示完全不包装的最简单方法是使用

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

有了这个，您不必担心尺寸值之类的问题。主要的问题是，如果您有超长的文本行，它只会从屏幕上消失（如您在JSBin示例中所看到的）。

BS3：

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

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

<a href="https://stackoverflow.com/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>

试试这个代码，

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

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

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

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

设置工具提示内部的最大宽度对我不起作用，我正在使用bootstrap 3.2

一些设置最大宽度的方法只有在设置父类的宽度时才有效（.tooltip）时，。

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

向父类添加一个Width：

.tooltip {
  width:400px;
}

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

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

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

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

在Bootstrap 4中，我使用

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

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

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