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

Question

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

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

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

我试图在CSS作为a.tooltip-内,h1.tooltip,内有不同的宽度,但其未生效添加两个单独的工具提示内部风格

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

注意:我已经添加了类大的提示,内部元件.然后,您可以使用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 类，我们可以相应地更改每个元素的宽度。