Question

我正在尝试为不同的工具提示设置不同的宽度。我在超链接上有一个工具提示，在h1元素上有工具提示。对于超链接，我有大文本，所以我需要工具提示的宽度很大但是对于h1元素默认宽度很好。

当我尝试覆盖下面的css时，所有工具提示都会受到影响。有没有办法将工具提示的宽度内联到应用工具提示的元素

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

我尝试在css中添加两个单独的工具提示内部样式作为a.tooltip-inner和h1.tooltip-inner，具有不同的宽度但不生效

JSFiddle链接 http://jsfiddle.net/vinaybvk/qr1cbu92/

还有其他方法可以达到这个目的。

感谢。

Answer 1

我能想到实现这一目标的唯一方法是覆盖工具提示的默认模板。然后对大型和常规工具提示使用不同的选择器，如此;

DEMO

$('.tt_reg').tooltip();

$('.tt_large').tooltip({
    template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner large"></div></div>'
});

注意我已将类大添加到tooltip-inner元素中。然后，您可以使用css来调整此大小;

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

Answer 2

给容器div一个类：

<div class="large-tooltip">
    <i class="icon ion-help-circled" rel="tooltip" title="Hint"></i>
</div>

.large-tooltip .tooltip-inner {
    width: 250px;
}

为了给工具提示提供不同的宽度，而不是添加不同的模板，可以为容器元素添加不同的css类，我们可以相应地更改每个元素的宽度。

Answer 3

错误在于您使用相同的选择器进行工具提示。您需要使用不同的选择器并对其应用设置：

在下面的JSFiddle中，我将第二项的类更改为example2，并在JS代码中添加了该选择器的设置。

HTML：

<div>
    <h1 rel="tooltip" title="This is Normal tooltip" class="example">Tooltip1 with normal width </h1>
    <a href="#" class="example2" rel="tooltip" title="Tool tip with large text Tool tip with large text  Tool tip with large text Tool tip with large text Tool tip with large text Tool tip with large text >Tooltip 2 with larger width</a>
</div>

JS：

$('.example').tooltip();
$('.example2').tooltip({animation:false});

http://jsfiddle.net/qr1cbu92/2/

要更改工具提示的尺寸，请参阅：How do you change the width and height of Twitter Bootstrap's tooltips?

Answer 4

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

Bootstrap工具提示 - 为不同的工具提示设置不同的宽度

4 个答案: