11

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.

Vinay
  • 689
  • 3
  • 7
  • 22

4 Answers4

20

(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;
}
Cheeso
  • 189,189
  • 101
  • 473
  • 713
Novocaine
  • 4,692
  • 4
  • 44
  • 66
  • 2
    As a side note, there's no need to use `max-width` and `width` together. – Novocaine Aug 11 '14 at 15:33
  • Thanks Novocaine that solved the issue, I was trying to overwrite class and thinking that is the last level :) you went another level below by overwriting the template and adding a new class to that, good to know that we can even do in this way. Thanks once again.... – Vinay Aug 11 '14 at 15:57
  • Yeah at first I was hoping it was possible to overwrite just a class, but couldn't find anything built in that would allow it. Glad I could help. – Novocaine Aug 11 '14 at 16:08
  • 1
    This works thanks. I replaced tooltip-arrow with arrow to make the arrow appear on my bootstrap. – Water Mar 11 '19 at 00:19
5

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.

Félix Adriyel Gagnon-Grenier
  • 8,422
  • 10
  • 52
  • 65
sarathbabu
  • 51
  • 1
  • 2
0

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?

Community
  • 1
  • 1
David Laberge
  • 15,435
  • 14
  • 53
  • 83
  • Those tooltips are the same size. That's not what the OP was after – Novocaine Aug 11 '14 at 15:09
  • @Novocaine, the OP had to different error I explain the primary error of selecting the right element. But your comment was valid Thus I added the linked to an answer on that question. – David Laberge Aug 11 '14 at 15:14
  • Hi David Laberge thanks for the reply, but the width is remaining same. I tried to intialize separately thinking I can give the width in the options but there is no width option. What I am trying to achieve is having different width's for different tooltips on a page. – Vinay Aug 11 '14 at 15:15
0

I had the same problem, however .tooltip-inner{width} for my task failed to do the job right. As for other (i.e. 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 &nbsp; in each text line.

Ignas
  • 67
  • 1
  • 8