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

Question

我想为不同的工具提示设置不同的宽度。我在超链接上有一个工具提示，在h1元素上也有一个工具提示。对于超链接，我有大量文本，所以我需要工具提示的宽度很大，但对于h1元素，默认宽度就可以了。

当我尝试像下面这样覆盖css时，所有的工具提示都受到影响。有没有一种方法可以在应用工具提示的元素内联提供工具提示的宽度。

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

我尝试在CSS中添加两个不同宽度的独立的提示框内部样式，分别为a.tooltip-inner和h1.tooltip-inner，但该样式未生效。

JSFiddle链接

是否有其他方法可以实现这一点。

谢谢。

- Vinay

Answer 1

（本答案适用于BS 3.2） 我能想到的唯一实现方法是覆盖默认的工具提示模板。然后，您可以使用不同的选择器来为大型和常规工具提示设置样式，如下所示：

演示

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

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

请注意，我已将类< strong>large添加到工具提示内部元素中。您可以使用CSS来调整此大小；

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

- Novocaine

---

顺便提一下，不需要同时使用 max-width 和 width。 - Novocaine

谢谢Novocaine，问题解决了，我一直在尝试覆盖类并认为那是最后一层 :) 你通过覆盖模板并添加一个新类到其中又进了一层，很高兴知道我们甚至可以这样做。再次感谢.... - Vinay

起初我希望只能覆盖一个类，但是找不到任何内置的东西可以允许这样做。很高兴我能帮忙。 - Novocaine

谢谢，这个方法可行。我将tooltip-arrow替换为arrow，使箭头出现在我的bootstrap中。 - Water

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类来实现，而无需添加不同的模板。这样，我们就可以根据需要更改每个元素的宽度。

- sarathbabu

---

这个答案缺少信息（描述性部分）。 - Clijsters

嘿，为什么不把这段文字加入到你的答案中呢？这会极大地提高它的质量！ - Clijsters

最佳答案！纯CSS！ - Roubi

Answer 3

我曾经遇到过同样的问题，但是对于我的任务来说，.tooltip-inner{width}并没有起到正确的作用。对于其他（即较短的）工具提示，固定宽度太大了。我懒得为成千上万的工具提示编写单独的HTML模板/类，所以我只是在每行文本中将单词之间的所有空格替换为 。

- Ignas

Answer 4

错误在于您正在使用相同的选择器用于工具提示。您需要使用不同的选择器并在它们上应用设置：

在下面的 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/

如需更改工具提示的尺寸，请参考以下链接：如何更改 Twitter Bootstrap 工具提示的宽度和高度？

- David Laberge

---

这些工具提示的大小是相同的。这不是 OP 想要的。 - Novocaine

@Novocaine，原帖作者遇到了两个不同的错误，我解释了选择正确元素的主要错误。但是你的评论也是有效的，因此我添加了链接到那个问题的答案。 - David Laberge

嗨，David Laberge，感谢您的回复，但宽度仍然保持不变。我尝试单独初始化，以为可以在选项中提供宽度，但没有宽度选项。我想要实现的是在页面上有不同宽度的不同工具提示。 - Vinay