Bootstrap tool tip - setting different widths for different tooltips
(This Answer applies to BS 3.2) The only way I can think of achieving this is by overriding the default template for the tooltip. Then you use different selectors for large and regular tooltips like so;
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>'
});
Note I've added the class large to the tooltip-inner element. You can then use css to adjust this size;
.large.tooltip-inner {
width: 350px;
}
Give the container div a class:
<div class="large-tooltip">
<i class="icon ion-help-circled" rel="tooltip" title="Hint"></i>
</div>
.large-tooltip .tooltip-inner {
width: 250px;
}
In order to give different widths for tool-tips, rather than from adding different templates, it is possible to add different css classes for the container element and we can change the width of each element accordingly.