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

Posted 2023-02-16

【中文标题】如何更改 Twitter Bootstrap 工具提示的宽度和高度？

【英文标题】：How do you change the width and height of Twitter Bootstrap's tooltips?

【发布时间】：2013-01-13 20:09:57

【问题描述】：

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

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

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

【问题讨论】：

你能接受一个答案吗？这也会对其他人有所帮助。

【参考方案1】：

我使用 Bootstrap 4

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

【参考方案2】：

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

【参考方案3】：

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

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

【参考方案4】：

在 BS3 上

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

【参考方案5】：

另一种解决方案；在 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 tooltip 在包含 tooltip 的元素下方生成标记，因此生成标记后的 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 类的元素，所有其他工具提示将保持不变。

【讨论】：

很好的解决方案，因为您可以选择要使用的工具提示。

在 bootstrap 4 中，工具提示被附加到正文中。但是，使用 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%; 可以让它工作。

这是我在使用带有 BS4 工具提示的模板时看到的第一个真实示例。不错的演示，并且可以轻松地向其中添加自定义类。

【参考方案6】：

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

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

【讨论】：

将此方法与 BS 4.5 中的模板方法相结合，可将工具提示定位在对我来说正确的位置，并允许使用更广泛的工具提示。

【参考方案7】：

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

.tooltip-inner 
  max-width: 350px;

当最大宽度不起作用时（选项 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>

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

【参考方案8】：

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

如果您希望工具提示仅响应一行而不考虑添加多少内容，则宽度必须灵活。但是，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;
    

【参考方案9】：

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

【参考方案10】：

试试这个代码，

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

【参考方案11】：

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

.tooltip-inner 
    max-width: 100%;

【参考方案12】：

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

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

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

【讨论】：

我认为最好的答案，因为它不包括更改引导 CSS。

这对我来说是最好的答案，但这并不能回答问题

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

这是 FAAAR 的最佳答案。 Jquery 提供了在工具提示中做各种事情的功能，那么为什么不使用它呢？修改 CSS 应该是最后的手段。

【参考方案13】：

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

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

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

有了这个，您不必担心尺寸值或类似的事情。主要问题是，如果您有超长的文本行，它就会从屏幕上消失（正如您在 JSBin Example 中看到的那样）。

【参考方案14】：

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

div.tooltip 
    width: 270px;


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

【讨论】：

不应该是最小宽度吗？

【参考方案15】：

设置类 tooltip-inner 不适合我的 最大宽度，我使用的是 bootstrap 3.2

只有在设置父类的宽度时才能设置最大宽度（.tooltip）。

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

给父类添加一个Width：

.tooltip 
  width:400px;

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

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

【讨论】：

这会导致工具提示的对齐混乱。

【参考方案16】：

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

【讨论】：

data-container="body" 一个人为我做了这件事。谢谢！

【参考方案17】：

只需覆盖 bootstrap.css

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

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

【讨论】：

max-width 对我不起作用，但 width 可以。在 Chrome 和 IE9 上测试。有什么线索吗？

在我的例子中，设置 max-width 和 width 效果很好，因为 .tooltip-inner 小于 max-width (200px)，尽管它有很多文本。

只需添加 !important 就可以了 max-width: 350px !important;

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

修改 CSS 应该是最后的手段。 Jquery 提供了改变工具提示外观的功能，那么为什么不使用它呢？

【参考方案18】：

BS3：

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

【参考方案19】：

在 bootstrap 3.0.3 中，您可以通过修改 popover 类来做到这一点

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

【讨论】：

.popover 类不适用于工具提示。

【参考方案20】：

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

选择器选择tooltip所在的div（tooltip是javascript添加进来的，一般不属于任何容器。

【讨论】：

只是好奇，是否有任何特殊原因将覆盖样式定义为 'div[class="tooltip-inner"]' 而不是简单的 'div.tooltip-inner'？

我在刚接触 CSS 的时候写了这些代码，所以我不记得是什么荒谬的原因让我这样写了哈哈

【参考方案21】：

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

【讨论】：

这个调整宽度太棒了！谢谢！这与上面的答案一起是完整的解决方案！

正如@nglinh 所说：“真的不推荐”。您不想在更新引导程序时跟踪所有黑客攻击。