Twitter bootstrap 如何更改Twitter引导的宽度和高度'；什么是工具提示？

我使用Twitter引导创建了一个工具提示

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

---

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

您可以在Bootstrap.css中编辑.tooltip内部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; 
}

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

关于BS3

---

在Bootstrap3.0.3中，您可以通过修改popover类来实现

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

BS3：

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

---

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

只有在设置父类的宽度（.tooltip）时，设置最大宽度才起作用

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

向父类添加宽度：

.tooltip {
  width:400px;
}

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

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

---

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

div.tooltip {
    width: 270px;
}

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

---

请参考下面的帖子。CMCCilloh的回答对我很有用。

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

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

---

这样，您就不必担心尺寸值或类似的问题。主要问题是，如果您有一行超长的文本，它将从屏幕上消失（如图所示）。

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

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

例如：

---

我的所有可变长度和设置的最大宽度对我来说都不起作用，所以将css设置为100%效果很好

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

---

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

如果您希望工具提示只响应一行，而不管您向其中添加了多少内容，则宽度必须是灵活的。但是，引导确实会将工具提示启动到某个宽度，因此您必须至少声明该宽度，并使其从该大小开始变得灵活。我建议：

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

minwidth

声明了一个起始大小。与其他人建议的最大宽度相反，它声明了一个停止宽度。根据你的问题，你不应该声明一个最终宽度，或者你的工具提示内容最终将在该点换行。相反，你使用的是无限宽度或灵活宽度。

 最大宽度：100%；

将确保一旦工具提示以100px的宽度启动，它将根据您的内容进行增长和调整，而不管其中包含多少内容

记住 工具提示并不是用来承载大量内容的。如果你在整个屏幕上有一个长字符串，它可能看起来很时髦。它肯定会对你的响应视图产生影响，特别是智能手机（320像素宽）

我建议两种解决方案来完善这一点：

将工具提示内容保持在最小值，使其宽度不超过320px。即使这样做，您也必须记住，如果将工具提示放置在屏幕右侧，并且使用

数据放置：right

，您的工具提示内容在智能手机中将不可见（因此，bootstrap最初将其设计为响应其内容并允许其包装）

如果你一心想使用这一行工具提示概念，那么通过使用

@media

查询重置工具提示以适应智能手机视图来覆盖你的六行工具提示。如下所示：

我的演示演示了根据内容大小和设备显示大小在工具提示上的灵活性和响应能力

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

试试这个代码

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

---

我也有同样的问题，但是所有流行的答案-更改

。对于我的任务，工具提示内部{width}

未能正确完成任务。至于其他（即更短的）工具提示固定宽度太大。我懒得为大量工具提示编写单独的html模板/类，所以我只是在每个文本行中用

替换单词之间的所有空格。

只需覆盖默认的

最大宽度即可满足您的需要

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

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

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

如果“最大宽度”不起作用，则可以使用设置的宽度。这很好，但工具提示将不再调整大小以适应文本。如果不喜欢，请跳到选项2

.tooltip-inner {
  width: 350px;
}

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

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

因此，当
最大宽度
不起作用时，您只需更改
容器
：

<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中创建一个新类（例如工具提示范围）：

在需要宽工具提示的图元上使用此类：

<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>

长工具提示

引导工具提示在包含工具提示的元素下方生成标记，因此在生成标记后，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的相邻元素（+），并从
<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>

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

.large-tooltip .tooltip-inner {
    max-width: 300px;
}
@media screen and (max-width: 300px) {
  .large-tooltip .tooltip-inner {
    max-width: 100%;
  }
}

$('[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');
        }
    });

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

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

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