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

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宽度).

我会推荐两种解决方案来完善它:

1. 将工具提示内容保持在最低限度,以便不超过320像素宽.即使你这样做,你必须记住,如果你的工具提示位于屏幕右侧,并且data-placement:right你的工具提示内容将无法在智能手机中看到(因此,为什么bootstrap最初设计它们以响应其内容并允许它包裹)
2. 如果您对使用这一行工具提示概念感到满意,那么请使用@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

要解决宽度问题,请改用以下代码.

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

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

Answer 7

另一种方案; 在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>

在应用max-width属性之前,CSS使用它来访问相邻元素(+)到.tooltip-wide,并从那里导航到.tooltip-inner.这只会影响使用.tooltip-wide类的元素,所有其他工具提示将保持不变.

Answer 8

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

Answer 9

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

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

Answer 10

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

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

Answer 11

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

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

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

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

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