Bootstrap tool tip - setting different widths for different tooltips

Question

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 1

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

Answer 2

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.

Answer 3

The error lays in the fact that you are using the same selector for the tooltip. You need to use different selector and apply the settings on them:

In the following JSFiddle I changed the class of the second item to example2 and I added the setting for that selector in the JS code.

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>

JS :

$('.example').tooltip();
$('.example2').tooltip({animation:false});

http://jsfiddle.net/qr1cbu92/2/

To change the dimension of the tooltip please refer to : How do you change the width and height of Twitter Bootstrap's tooltips?

Answer 4

I had the same problem, however .tooltip-inner{width} for my task failed to do the job right. As for other (ie shorter) tooltips fixed width was too big. I was lazy to write separate html templates/classes for zilions of tooltips, so I just replaced all spaces between words with   in each text line.