Javascript 引导工具提示-为不同的工具提示设置不同的宽度

我试图为不同的工具提示设置不同的宽度。我有一个关于超链接的工具提示和一个关于h1元素的工具提示。对于超链接，我有较大的文本，因此我需要工具提示的宽度较大，但对于h1元素，默认宽度可以

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

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

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

JSFIDLE链路

有没有其他方法可以做到这一点

---

谢谢。

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

在下面的JSFIDLE中，我将第二项的类更改为

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>

要更改工具提示的尺寸，请参考：

（此答案适用于BS 3.2） 我能想到的实现这一点的唯一方法是覆盖工具提示的默认模板。然后使用不同的选择器来显示大型和常规的工具提示，如下所示

---

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

替换单词之间的所有空格

给容器div一个类：

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

---

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

这些工具提示的大小相同。那不是行动计划after@Novocaine，OP有不同的错误。我解释了选择正确元素的主要错误。但是你的评论是有效的，因此我添加了关于这个问题的答案的链接。嗨，大卫·拉贝格，谢谢你的回答，但是宽度保持不变。我试图单独初始化，认为我可以在选项中给出宽度，但没有宽度选项。我试图实现的是在页面上为不同的工具提示提供不同的宽度。作为旁注，没有必要同时使用

max width

和

width

。感谢Novocaine解决了这个问题，我试图覆盖类，并认为这是最后一个级别：）您通过覆盖模板并向其中添加一个新类，进入了下面的另一个级别，很高兴知道我们甚至可以通过这种方式完成。再次感谢…是的，一开始我希望可以只覆盖一个类，但是找不到任何内置的允许覆盖的东西。很高兴我能帮上忙，谢谢。我将工具提示箭头替换为箭头，使箭头显示在引导程序上。此答案缺少信息（描述部分）嘿，为什么不将此文本添加到您的答案中？这将大大提高它的质量！最好的答案！纯CSS！

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

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

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

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

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