如何改变Twitter的引导的工具提示的宽度和高度?(How do you change the w

2019-07-19 00:03发布

我创建了使用Twitter的引导提示。

该工具提示三行显示。 不过,我想只有一行来显示工具提示。

如何更改工具提示的宽度是多少? 这是特定于Twitter的引导或工具提示自己?

Answer 1:

只是覆盖bootstrap.css

在BS2的默认值是最大宽度:200像素; 所以,你可以用任何适合您的需求增加了。

.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;
}

选择选择工具提示举行(提示是由JavaScript添加在div,它通常不属于任何容器。



Answer 4:

我意识到这是一个很古老的问题,但如果我在这里登陆,所以将他人。 所以,我想我的体重。

如果你想提示来响应一个行仅不管你有多少内容添加到它的宽度必须是灵活的。 然而,引导不启动工具提示的宽度,所以你必须至少声明什么的宽度会,并使其从该向上弹性的大小。 这是我的建议:

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

min-width声明了一个起始大小。 相对于最大宽度,其他一些建议,它宣布的停止宽度。 根据你的问题,你不应该宣布最终宽度或您的提示内容在这一点最终会换行。 相反,你用无限的宽度或灵活宽度。 max-width: 100%; 将确保一旦提示已在100像素宽发起的,它会不断地调整您的内容,无论您在它拥有的内容量。

请MIND工具提示不打算携带大量的内容。 它可能看起来时髦,如果你有在整个屏幕上长长的一串。 它将肯定会在你的回应意见的影响,特别是智能手机(320像素宽)。

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

  1. 保持你的提示内容到最低限度,以不超过320像素宽。 而且,即使你做到这一点,你必须记住,如果你有一个设置在屏幕和正确的工具提示data-placement:right ,你的提示内容将不会在智能手机(因此可以看到为什么引导最初设计他们来响应其内容并允许它包裹)
  2. 如果你使用这一行提示的概念背水战,然后通过使用覆盖你的六@media查询重置您的提示,以适应智能手机的看法。 像这样:

我的演示该处根据内容大小和设备的显示尺寸,以及将演示在工具提示的灵活性和反应

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


Answer 5:

与定义最大宽度“重要!” 和使用数据容器=“主体”

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:

To fix the width problem, use the following code instead.

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

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

引导提示生成的标记包含工具提示元素下方,所以生成的标记后的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范围,并从那里导航到.tooltip-内,在施加最大宽度属性之前。 这只会影响使用.tooltip范围类的元素,所有其他的工具提示将保持不变。



Answer 8:

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



Answer 9:

一些试验后,这个工作最适合我:

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


Answer 10:

类集合到主提示DIV和内部提示

div.tooltip {
    width: 270px;
}

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


Answer 11:

只是覆盖默认max-width以任何适合您的需求。

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

当最大宽度不工作 (方案1)

如果最大宽度不工作,你可以使用一组宽度来代替。 这是好的,但你的提示将不再调整大小以适合文本。 如果你不喜欢这样,跳过选项2。

.tooltip-inner {
  width: 350px;
}

正确处理小容器 (选项2)

由于自举追加工具提示作为目标的同级,它是由包含元素的限制。 如果包含的元素是比你小的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 12:

BS3:

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


Answer 13:

请参考下面的文章。 cmcculloh的回答为我工作。 https://stackoverflow.com/posts/31683500/edit

截至暗示的文档中 ,最简单的方法,以确保您的提示,在所有不换行是使用

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

有了这个,你不用担心尺寸值或者类似的东西。 如果你有一个超长的文本行会只是去关闭屏幕的(你可以在看主要问题是JSBin例 )。



Answer 14:

试试这个代码,

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


Answer 15:

我有同样的问题,但是所有流行的答案-改变.tooltip-inner{width}为我的任务无法正确完成这项工作。 至于其他的(即更短)的工具提示固定的宽度过大。 我是懒得写独立的HTML模板/类的工具提示zilions,所以我刚刚更换字与字之间的所有空间与&nbsp; 在每一行文本。



Answer 16:

设置为我的类提示,内didn't工作最大宽度 ,I'm使用引导3.2

一些如何设置最大宽度只有当你设置父类 (.tooltip) 的宽度工作

但后来所有的提示成为您指定的大小。 所以here's我的解决方案:

增加的宽度父类:

.tooltip {
  width:400px;
}

然后添加的最大宽度和改变显示为inline-block的,所以它不会占用整个空间

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


Answer 17:

矿所有可变长度和设置最大宽度将不适合我,所以我设置的CSS 100%努力的工作就像一个魅力。

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


Answer 18:

在引导3.0.3,你可以通过修改酥料饼类做

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


文章来源: How do you change the width and height of Twitter Bootstrap's tooltips?