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

Question

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

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

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

score 229 · Accepted Answer

只需覆盖 bootstrap.css

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

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

score 54 · Accepted Answer

54

在 BS3 上

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

于 2014-02-09T00:47:26.987 回答

score 41 · Accepted Answer

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

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

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

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

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

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

将您的工具提示内容保持在最低限度，以便不超过 320 像素宽。即使您这样做，您也必须记住，如果您将工具提示放置在屏幕右侧并且data-placement:right使用裹）
如果您一心想要使用这一单行工具提示概念，那么通过使用@media查询重置您的工具提示以适应智能手机视图来覆盖您的六个。像这样：

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

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

score 24 · Accepted Answer

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

score 23 · Accepted Answer

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

score 18 · Accepted Answer

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

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

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

score 13 · Accepted Answer

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

score 10 · Accepted Answer

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

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

score 8 · Accepted Answer

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

score 7 · Accepted Answer

只需将默认值覆盖为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>

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

score 6 · Accepted Answer

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

score 4 · Accepted Answer

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

div.tooltip {
    width: 270px;
}

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

score 4 · Accepted Answer

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

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

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

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

score 2 · Accepted Answer

2

BS3：

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

于 2014-03-14T16:42:42.220 回答

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

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

向父类添加一个宽度：

.tooltip {
  width:400px;
}

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

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

score 1 · Accepted Answer

1

试试这个代码，

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

于 2016-04-26T05:26:08.927 回答

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

使用 Bootstrap 4 我使用

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

score -1 · Accepted Answer

in bootstrap 3.0.3 you can do it by modifying the popover class

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

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

21 回答 21

Related

Reference