How do you change the width and height of Twitter Bootstrap's tooltips?

Question

I created a tooltip using Twitter Bootstrap.

The tooltip is displaying with three lines. However, I would like to display the tooltip with only one line.

How do I change the width of the tooltip? Is this specific to Twitter Bootstrap or to tooltips themselves?

Can you maybe accept an answer? This will help others as well. — MERose, May 24 '16 at 12:33

Valentin Despa · Answer 1 · 2014-06-05T05:56:28.687

235

Just override bootstrap.css

The default value in BS2 is max-width:200px; So you can increase it with whatever fits your needs.

.tooltip-inner {
    max-width: 350px;
    /* If max-width does not work, try using width instead */
    width: 350px; 
}

edited Jun 05 '14 at 05:56

answered May 27 '13 at 08:07

Valentin Despa

40,712
18
80
106

14

`max-width` doesn't work for me, but `width` does. Tested on Chrome and IE9. Any clue? – Rosdi Kasim Jul 24 '13 at 13:27
2

In my case, setting both max-width and width worked well since .tooltip-inner was less than max-width (200px) although it had plenty of texts. – Nobu Jan 22 '14 at 01:57
Just add !important like this it will work max-width: 350px !important; – Sohail Anwar Aug 25 '16 at 11:01
1

For anyone still having issues with `max-width` and does not see @knobli's answer below, please use `data-container="body"` in your HTML element. – kips15 Oct 12 '17 at 12:39
Modifying the CSS should be the last resort. Jquery provides functionality to alter the appearance of the tooltip so why not use it? – E10 Nov 05 '18 at 18:55
It works for me! Thank you. Is that a way to width dinamically, using the lenght of the text, for example? Short text, short tooltip...BIG TEXT, BIG TOOLTIP ? – LUISAO Jul 24 '20 at 02:33
Same with the other comments, the width worked but no max-width – Rod Talingting Sep 20 '21 at 17:37

score 57 · Answer 2 · edited Jun 26 '18 at 21:49

57

On BS3

.tooltip-inner {
    min-width: 150px; /* the minimum width */
}

edited Jun 26 '18 at 21:49

benomatis

5,536
7
36
59

answered Feb 09 '14 at 00:47

Shina

2,019
2
19
25

score 44 · Answer 3 · edited Nov 03 '16 at 16:01

I realize this is a very old question, but if I landed here, so will others. So I figured I weigh in.

If you want the tooltip to be responsive to one line only regardless of how much content you add to it, the width has to be flexible. However, Bootstrap does initiate the tooltip to a width, so you have to at least declare what that width will be and make it flexible from that size on up. This is what I recommend:

.tooltip-inner {
    min-width: 100px;
    max-width: 100%; 
}

The min-width declares a starting size. As opposed to the max-width, as some other would suggest, which it declares a stopping width. According to your question, you shouldn't declare a final width or your tooltip content will eventually wrap at that point. Instead, you use an infinite width or flexible width. max-width: 100%; will ensure that once the tooltip has initiated at 100px wide, it will grow and adjust to your content regardless of the amount of content you have in it.

KEEP IN MIND Tooltips are not intended to carry a lot of content. It could look funky if you had a long string across the entire screen. And it will definitely will have an impact in your responsive views, specially smartphone (320px width).

I would recommend two solutions to perfect this:

Keep your tooltip content to a minimum so as to not exceed 320px wide. And even if you do this you must remember if you have the tooltip placed at the right of the screen and with data-placement:right, your tooltip content will not be visible in smartphones (hence why bootstrap initially designed them to be responsive to its content and allow it to wrap)
If you are hellbent on using this one line tooltip concept, then cover your six by using a @media query to reset your tooltip to fit the smartphone view. Like this:

My demo HERE demonstrates the flexibility and responsiveness on the tooltips according to content size and device display size as well

@media (max-width: 320px) {
    .tooltip-inner {
         min-width: initial;
         width: 320px;
    }
}

knobli · Answer 4 · 2014-11-19T17:05:50.587

26

Define the max-width with "important!" and use data-container="body"

CSS file

.tooltip-inner {
    max-width: 500px !important;
}

HTML tag

<a data-container="body" title="Looooooooooooooooooooooooooooooooooooooong Message" href="#" class="tooltiplink" data-toggle="tooltip" data-placement="bottom" data-html="true"><i class="glyphicon glyphicon-info-sign"></i></a>

JS script

$('.tooltiplink').tooltip();

edited Nov 19 '14 at 17:05

answered Nov 19 '14 at 10:03

knobli

657
1
9
18

18

`data-container="body"` alone did it for me. Thanks! – Izhaki Jan 11 '15 at 21:00

score 24 · Answer 5 · edited Dec 11 '13 at 18:42

24

You should overwrite the properties using your own css. like so:

div.tooltip-inner {
    text-align: center;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    margin-bottom: 6px;
    background-color: #505050;
    font-size: 14px;
}

the selector choose the div that the tooltip is held (tooltip is added in by javascript and it usually does not belong to any container.

edited Dec 11 '13 at 18:42

pizza247

3,869
7
33
47

answered Mar 31 '13 at 10:14

nglinh

601
4
11

2

Just curious, is there's any particular reason why you defined overriding style as 'div[class="tooltip-inner"]' and not as simple 'div.tooltip-inner'? – slawek Jul 09 '13 at 09:48
7

I wrote those code when I was very new to CSS hence I can not remember what ridiculous reason made me write it that way haha – nglinh Oct 14 '13 at 03:59

score 18 · Answer 6 · answered Dec 20 '15 at 20:33

18

To fix the width problem, use the following code instead.

$('input[rel="txtTooltip"]').tooltip({
    container: 'body'
});

example: http://eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip-width/

answered Dec 20 '15 at 20:33

戈晓伟

181
1
3

4

Best answer in my opinion because it doesn't include changing bootstrap CSS. – Tim Scarborough Apr 29 '16 at 11:28
1

This is the best answer for me, but this does't answer the question – Miguel Peniche May 14 '17 at 22:59
This is the best solution i think. It uses the tooltip configuration instead CSS Bootstrap override. – César León Jun 22 '17 at 15:05
This is by FAAAR the best answer. Jquery provides functionality to do all kinds of things in the tooltip, so why not use it? Modifying the CSS should be the last resort. – E10 Nov 05 '18 at 18:53

score 14 · Answer 7 · answered Apr 10 '17 at 14:51

Another solution; create a new class (e.g. tooltip-wide) in CSS:

.tooltip-wide + .tooltip > .tooltip-inner {
     max-width: 100%;
}

Use this class on elements where you want wide tooltips:

<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>

Bootstrap tooltip generates markup below the element containing the tooltip, so the HTML actually looks something like this after the markup is generated:

<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>
<div class="tooltip" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">I am a long tooltip</div>
</div>

The CSS uses this to access the adjacent element (+) to .tooltip-wide, and from there navigates to .tooltip-inner, before applying the max-width attribute. This will only affect elements using the .tooltip-wide class, all other tooltips will remain unaltered.

Great solution because you can choose which tooltips you want to use it. — Will Schoenberger, May 11 '17 at 17:09
In bootstrap 4, the tooltip gets appended to the body. However, with `data-template=""` and `.tooltip-wide { max-width: 100%; min-width: 80%; }` one can get it to work. — Matteo Ferla, Dec 19 '18 at 19:51
This is the first real-life example I've seen in using templates with BS4 tooltips. Nice demo and ease of adding custom classes to it as well. — klewis, Feb 26 '19 at 19:48

score 11 · Answer 8 · answered Apr 02 '17 at 23:13

11

after some experimenting, this worked best for me:

.tooltip-inner {
    max-width: 350px; /* set this to your maximum fitting width */
    width: inherit; /* will take up least amount of space */ 
}

answered Apr 02 '17 at 23:13

xeruf

2,602
1
25
48

Combining this with template approach in BS 4.5 kept the tooltip positioning in the correct place for me and allowed for wider tooltips. – Brett Green Mar 04 '21 at 15:01

score 8 · Answer 9 · answered Jan 30 '13 at 04:46

8

You may edit the .tooltip-inner css class in bootstrap.css. The default max-width is 200px. You may change the max-width to your desired size.

answered Jan 30 '13 at 04:46

onejigtwojig

4,771
9
32
35

This is great to adjust the width! Thanks! This along with the answer above is the full solution! – ATSiem May 15 '13 at 03:08
6

As @nglinh said: "It's not really recommended". You don't want to keep track of all your hacks when updating bootstrap. – Valentin Despa May 27 '13 at 08:09

score 8 · Answer 10 · edited Nov 15 '19 at 18:59

On Bootstrap 4, and if you don't want to change all tooltips width, you can use specific template for the tooltip you want :

<a href="/link" class="btn btn-info"
   data-toggle="tooltip"
   data-placement="bottom"
   data-template="<div class='tooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner' style='max-width: 400px;'></div></div>"
   title="This is a long message displayed on 400px width tooltip !"
>
    My button label
</a>

score 7 · Answer 11 · answered Nov 10 '16 at 19:37

Just override the default max-width to whatever fits your needs.

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

When max-width doesn't work (option 1)

If max-width does not work, you could use a set width instead. This is fine, but your tooltips will no longer resize to fit the text. If you don't like that, skip to option 2.

.tooltip-inner {
  width: 350px;
}

Correctly dealing with small containers (option 2)

Since Bootstrap appends the tooltip as a sibling of the target, it is constrained by the containing element. If the containing element is smaller than your max-width, then max-width won't work.

So, when max-width doesn't work, you just need to change the container:

<div class="some-small-element">
  <a data-container="body" href="#" title="Your boxed-in tooltip text">
</div>

Pro Tip: the container can be any selector, which is nice when you only want to override styles on a few tooltips.

score 5 · Answer 12 · edited May 23 '17 at 12:18

Please refer the below post. cmcculloh's answer worked for me. https://stackoverflow.com/posts/31683500/edit

As hinted at in the documentation, the easiest way to ensure that your tooltip does not wrap at all is to use

.tooltip-inner {
    max-width: none;
    white-space: nowrap;
}

With this, you don't have to worry about dimension values or anything like that. Main problem being if you have a super long line of text it will just go off of the screen (as you can see in the JSBin Example).

score 4 · Answer 13 · answered Jun 19 '15 at 17:01

4

Set the class to the main tooltip div and for the inner tooltip

div.tooltip {
    width: 270px;
}

div.tooltip-inner {
    max-width: 280px;
}

answered Jun 19 '15 at 17:01

Gildonei

476
5
13

Should it not be min-width? – Rippo Nov 13 '15 at 16:21

Julesezaar · Answer 14 · 2023-04-25T12:25:24.513

Update 2023:

If only certain tooltips/popovers need to have a different width you can do this:

Html

<img 
    src="/theimage.jpg"
    class="large-tooltip"
    data-toggle="tooltip"
    data-html="true"
    title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
/>

CSS

.large-tooltip .tooltip-inner {
    max-width: 300px;
}
@media screen and (max-width: 300px) {
  .large-tooltip .tooltip-inner {
    max-width: 100%;
  }
}

JQuery:

$(document).on('shown.bs.tooltip', (e) => {
    let myPopup = getBootstrapPopup(e.target, 'tooltip')

    // Pass the class to the connected BS popup
    if (
        myPopup &&
        $(this).hasClass('large-tooltip')
    ) {
        $(myPopup).addClass('large-tooltip');
    }
})

// You will need this function to get the Bootstrap popup:
const getBootstrapPopup = (el, tooltipOrPopover) => {
  let bsPopupData = tooltipOrPopover === 'popover' ?
    $(el).data('bs.popover') :
    $(el).data('bs.tooltip')
  
  if (
    !bsPopupData ||
    !(bsPopupData.tip instanceof HTMLElement)
  ) {
    return null
  }

  return bsPopupData.tip
}

score 3 · Answer 15 · answered Jun 21 '20 at 19:27

3

With Bootstrap 4 I use

.tooltip-inner {
    margin-left: 50%;
    max-width: 50%;
    width: 50%;
    min-width: 300px;
}

answered Jun 21 '20 at 19:27

Wishmaster

1,102
14
20

score 2 · Answer 16 · edited Mar 14 '14 at 16:59

2

BS3:

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

edited Mar 14 '14 at 16:59

Code Maverick

20,171
12
62
114

answered Mar 14 '14 at 16:42

Till Hess

41
2

score 1 · Answer 17 · answered Apr 24 '15 at 15:10

Setting the max-width of class tooltip-inner didn´t work for me, I´m using bootstrap 3.2

Some how setting max-width only work if you set the width of parent class (.tooltip).

But then all tooltips become the size you specify. So here´s my solution:

add a Width to the parent class:

.tooltip {
  width:400px;
}

Then you add the max-width and change the display to inline-block, so it will not occupy the entire space

.tooltip-inner {
  max-width: @tooltip-max-width;
  display:inline-block;
}

This creates chaos with the alignment of the tooltip. – Ben May 21 '15 at 12:18 — Ben, May 21 '15 at 12:18

score 1 · Answer 18 · edited Apr 26 '16 at 06:20

1

Try this code,

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

edited Apr 26 '16 at 06:20

Vinoth Krishnan

2,925
6
29
34

answered Apr 26 '16 at 05:26

Ragas Lamir

11
1

score 1 · Answer 19 · answered Sep 29 '16 at 07:03

I had the same problem, however all popular answers - to change .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   in each text line.

score 0 · Answer 20 · answered Jan 16 '16 at 00:59

0

Mine where all variable lengths and a set max width would not work for me so setting my css to 100% worked like a charm.

.tooltip-inner {
    max-width: 100%;
}

answered Jan 16 '16 at 00:59

shaun

1,223
1
19
44

score -1 · Answer 21 · answered Feb 12 '14 at 14:46

-1

in bootstrap 3.0.3 you can do it by modifying the popover class

.popover {
    min-width: 200px;
    max-width: 400px;
}

answered Feb 12 '14 at 14:46

Ekim

1,105
11
28

3

.popover class doesn't apply to tooltips. – Adriaan Tijsseling Apr 29 '14 at 12:27

Spoo · Answer 22 · 2022-08-11T18:19:37.673

All these answers are great, but I would just bypass the css and hook into the bootstrap js function and do inline style functions.

Using css your mainly limited to one size for the entire page but by using js you can customize each individual tooltip separately using customizeable properties.
The following method also lets you add custom properties to your tooltip in the same manner that bootstrap does such that you can do practically anything you want to. It is very plausible to only have to use the following js once over an entire site rather on a page by page basis.

Explanation: The following hooks into the bootstrap call right after the tooltip draws the dom object but before it is seen to the user.

  $('[data-toggle="tooltip"]').tooltip().on('inserted.bs.tooltip', function() {
    var width = $(this).attr('data-width');

    if(width == undefined || width=="") {
      $('.tooltip-inner').prop('style','');
    } else {
      $('.tooltip-inner').prop('style','width:' + width );
    }

  });;

It checks for a new property I customly created called data-width. If it finds it the tooltip, it gets rendered gets that width due to the inline style. If it doesn't, its reset to the default style. Notice I could include any property this way or a number of properties if I wanted. On my work sites I actually have to add more because we utilizing a different default style to the tooltips but even then this method works.

<span class="fa fa-icon-circle data-toggle="tooltip" data-width="300px" title="Some Text..."</span>

This would be a nightmare project to inherit. – Charlie Feb 09 '23 at 05:28 — Charlie, Feb 09 '23 at 05:28

How do you change the width and height of Twitter Bootstrap's tooltips?

22 Answers22

Linked