javascript - Bootstrap tooltip——为不同的tooltip设置不同的宽度

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

(此答案适用于 BS 3.2) 我能想到的实现这一目标的唯一方法是覆盖工具提示的默认模板。然后，您可以像这样对大型和常规工具提示使用不同的选择器；

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

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

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