Vinay Vinay - 2 months ago 12
CSS Question

Bootstrap tool tip - setting different widths for different tooltips

I am trying to set different widths for different tooltips. I have a tooltip on hyper link and a tooltip on h1 element. For hyperlink i have large text so I need the width of the tool tip to be large but for h1 element default width is fine.

When I am trying to overwrite the css as below all the tool tips are getting affected. Is there a way to give the width of a tooltip inline to the element on which the tooltip is applied

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


I tried to add two separate tooltip inner styles in the css as a.tooltip-inner and h1.tooltip-inner with different widths but its not taking effect

JSFiddle link
http://jsfiddle.net/vinaybvk/qr1cbu92/

Is there any other way to achieve this.

Thanks.

Answer

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 {
    max-width: 350px;
    width: 350px;
}
Comments