如何更改 Bootstrap 提示的宽度和高度？

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

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

重写 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 3.0.3中，可以通过修改 popover 类来实现

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

BS3:

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

使用“ important!”定义 max-width 并使用 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();

设置类工具提示内部 不适合我的 最大宽度，我正在使用 bootstrap 3.2

一些如何 设置最大宽度只有在设置父类的宽度时才起作用(。工具提示)。

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

向父类添加 Width:

.tooltip {
width:400px;
}

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

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

将类设置为主工具提示 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 示例)。

若要修复宽度问题，请改用以下代码。

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

例如: Http://eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip-width/

我的地方所有可变长度和设置最大宽度不会为我工作，所以设置我的 css 为100% 工作喜欢一个魅力。

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

我知道这是一个很老的问题，但如果我在这里着陆，其他人也会。所以我觉得我也有份。

如果您希望工具提示只响应一行，而不管您向其中添加了多少内容，那么宽度必须是灵活的。但是，Bootstrap 确实将工具提示初始化为一个宽度，因此您至少必须声明该宽度将是什么，并使其从该大小向上具有灵活性。这是我的建议:

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

min-width声明一个起始大小。与最大宽度相反，正如其他一些建议，它声明了一个 停下来宽度。根据您的问题，您不应该声明最终的宽度，否则您的工具提示内容将最终包装在该点。相反，您可以使用无限宽度或灵活宽度。max-width: 100%;将确保一旦工具提示开始在100像素的宽度，它将增长和调整到您的内容，而不管您有内容的数量。

记住 工具提示并不打算包含大量内容。如果在整个屏幕上有一条长长的字符串，那么它看起来会很时髦。而且它肯定会对你的响应视图产生影响，特别是智能手机(320px 宽)。

为了完善这一点，我推荐两种解决方案:

1. 保持您的工具提示内容到最小，以便不超过320像素宽。即使你这样做了，你也必须记住，如果你把工具提示放在屏幕的右边，使用 data-placement:right，你的工具提示内容将不会在智能手机中可见(这就是为什么 bootstrap 最初设计它们来响应它的内容并允许它包装)
2. 如果您执意使用这一行工具提示概念，那么使用 @media查询来重置您的工具提示以适应智能手机视图，从而覆盖您的六个工具提示。像这样:

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

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

试试这个代码,

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

我有同样的问题，但所有流行的答案-改变 .tooltip-inner{width}为我的任务未能做好工作。至于其他(即较短)的工具提示固定宽度太大。我懒得为大量的工具提示编写单独的 html 模板/类，所以我只是在每行文本中用  替换单词之间的所有空格。

只需覆盖默认的 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>

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

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

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

另一个解决方案; 在 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 使用它来访问相邻的元素(+)。工具提示范围，并从那里导航到。工具提示-inner，然后应用 max-width 属性。这将只影响使用。类，所有其他工具提示将保持不变。

我需要调整一些工具提示的宽度，但不是整体设置，所以我最终做了以下工作:

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

我用的是 Bootstrap 4

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

所有这些答案都很棒，但是我只需要绕过 css 并连接到 bootstrap js 函数并执行内联样式函数。

• 使用 css 主要限制整个页面的一个大小，但是通过使用 js，您可以使用可定制的属性分别定制每个单独的工具提示。
• 下面的方法还允许您以与 bootstrap 相同的方式向工具提示添加自定义属性，这样您就可以实际做任何您想做的事情。只需要在整个站点上使用下面的 js 一次，而不是逐页使用，这是非常合理的。

说明: 在工具提示绘制 dom 对象之后，但是在用户看到它之前，下面的引导程序调用挂钩。

  $('[data-toggle="tooltip"]').tooltip().on('inserted.bs.tooltip', function() {
var width = $(this).attr('data-width');


if(width == undefined || width=="") {
$('.tooltip-inner').prop('style','');
} else {
$('.tooltip-inner').prop('style','width:' + width );
}


});;

它检查我自定义创建的名为 data-width 的新属性。如果它找到了工具提示，它就会得到由于内联样式而呈现的宽度。如果没有，则将其重置为默认样式。注意，我可以以这种方式包含任何属性，或者如果我想要的话，可以包含许多属性。在我的工作网站上，我实际上必须添加更多的，因为我们使用了不同的默认风格的工具提示，但即使这样，这种方法工作。

<span class="fa fa-icon-circle data-toggle="tooltip" data-width="300px" title="Some Text..."</span>