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.

4 Answers 4

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;
}
4
  • 2
    As a side note, there's no need to use max-width and width together.
    – Novocaine
    Commented Aug 11, 2014 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
    Commented Aug 11, 2014 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
    Commented Aug 11, 2014 at 16:08
  • 1
    This works thanks. I replaced tooltip-arrow with arrow to make the arrow appear on my bootstrap.
    – Water
    Commented Mar 11, 2019 at 0: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.

3
  • 1
    This answer is lacking information (a descriptional part)
    – Clijsters
    Commented Apr 24, 2017 at 9:30
  • Hey, why not adding this text to your answer? It would improve it's quality enormously!
    – Clijsters
    Commented Apr 24, 2017 at 13:12
  • Best answer ! PURE CSS !
    – Roubi
    Commented Mar 28, 2018 at 13:43
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?

3
  • Those tooltips are the same size. That's not what the OP was after
    – Novocaine
    Commented Aug 11, 2014 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. Commented Aug 11, 2014 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
    Commented Aug 11, 2014 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.