Maximum Width of jQuery UI Tooltip widget

Question

I use jQuery UI's new Tooltip and having trouble with figuring out how to set a maximum width of the tooltip. I guess it should be done with position, but how?

score 50 · Accepted Answer · edited May 21 '20 at 15:35

50

Based on Senni's reply, I added following to a separate CSS-file:

div.ui-tooltip {
    max-width: 400px;
}

A sidenote: Make sure your separate CSS follows after the ui-css, otherwise there will be no effect. Otherwise you also could use the !important - marker.

edited May 21 '20 at 15:35

HoldOffHunger

18,769
10
104
133

answered Oct 18 '12 at 14:57

sl3dg3

5,026
12
50
74

As an alternative, I prefer to add a more specific CSS rule so that it will take precedence over the jquery-ui.css rule, regardless of the order you link your stylesheets. If you have an ID tag on your body, it's as simple as doing `#idOfBodyTag .ui-tooltip` – Josh Jul 22 '13 at 14:50
The !important is important. – LauraNMS Feb 25 '14 at 15:38
`body div.ui-tooltip` seems to be enough regardless of load order. – But those new buttons though.. Dec 24 '14 at 03:22

score 35 · Answer 2 · answered Mar 25 '13 at 18:11

35

If you subscribe to Tooltip's open event, you can update the style in code:

$(".selector").tooltip({
    open: function (event, ui) {
        ui.tooltip.css("max-width", "400px");
    }
});

answered Mar 25 '13 at 18:11

KJR

359
3
2

this works well. thanks. And this is better since you can make different tooltips different sizes depending on your needs. – sdjuan Jun 03 '13 at 23:52
@sdjuan thanks for this. I was trying to use "width", and it wasn't working even though "height" was. "max-width" did the trick. – nfriend21 Aug 02 '13 at 19:30
Do not use that! Jquery is calculating the width and hieght befor open is called. Therefore the size change will not be registered. – pknoe3lh Dec 14 '15 at 18:07

score 11 · Answer 3 · answered Jul 26 '13 at 08:50

11

in script:

$(elm).tooltip({tooltipClass: "my-tooltip-styling" });

in css:

.my-tooltip-styling {
      max-width: 600px;
}

answered Jul 26 '13 at 08:50

AnViKo

111
1
8

This really seems like the best answer to me. You don't mess with jQuery UI's CSS, and you can set style for each tooltip individually. Thanks. This helped me realize I don't know what class/id to style since the tooltip doesn't actually live in my code, just jQuery UI. – Michael K Nov 01 '13 at 15:08

anataliocs · Answer 4 · 2018-03-13T20:43:03.983

Instead of modifying or overriding the jQuery UI CSS classes directly, you can specify an additional CSS class using the tooltipClass parameter:

Tooltip initialization

  $(function() {
    $( document ).tooltip({
      items: "tr.dataRow",
      tooltipClass: "toolTipDetails",  //This param here is used to define the extra style class 
      content: function() {
        var element = $( this );

            var details = j$("#test").clone();
            return details.html();

      }
    });
  });

Then you would create that style class. You will want to import this CSS file after the jQuery UI CSS file.

Example CSS style

This class here would make the modal 1200px in width by default and add a horizontal scroll if there is any more content beyond that.

<style> 
  .toolTipDetails {
    width:  1200px;
    max-width: 1200px;
    overflow:auto;
  } 

</style>

Sidenote: It is generally not recommended to use the !important tag but it could be used in this case to ensure that the intended CSS is rendered.

This is no longer a valid solution .html() cannot be implemented as part of content parameter as HTML is no longer supported. — PseudoNinja, Feb 23 '18 at 15:45
Well, the html() is used to populate the tooltip, not to style it, so the technique is still valid even if the scaffolding isn't — Roger Kaplan, Mar 13 '18 at 18:41

score 4 · Answer 5 · answered Jul 24 '13 at 16:05

As pointed out by the jQuery UI api, the best you can do is override the classes ui-tooltip and ui-tooltip-content this way:

.ui-tooltip
{
    /* tooltip container box */
    max-width: your value !important;
}
.ui-tooltip-content
{
    /* tooltip content */
    max-width: your value !important;
}

Hope this helps!

Senni · Answer 6 · 2012-10-18T14:26:24.663

2

Maybe you can set the width like this in the js

$("#IDOfToolTip").attr("style", "max-width:30px");

or

$("#IDOfToolTip").css("max-width", "30px");

edited Oct 18 '12 at 14:26

answered Oct 18 '12 at 14:21

Senni

73
1
6

This somehow does not work, but based on this I added some CSS (see my answer). – sl3dg3 Oct 18 '12 at 15:00

score 0 · Answer 7 · answered Jul 21 '16 at 15:12

0

  .ui-tooltip{
      max-width: 800px !important;
      width: auto !important;
      overflow:auto !important;
      }
  .ui-tooltip-content{
      background-color: #fdf8ef;
      }

answered Jul 21 '16 at 15:12

tonton polak

1
1

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – mickmackusa May 21 '19 at 06:25

Pablo Ramirez · Answer 8 · 2019-05-10T12:57:28.750

0

div.ui-tooltip{
width: 210px; //if fit-content not worked in specifics browsers
width: fit-content;
}

edited May 10 '19 at 12:57

answered May 10 '19 at 12:51

Pablo Ramirez

19
2

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – Andy Hoffner May 10 '19 at 18:28

Maximum Width of jQuery UI Tooltip widget

8 Answers8

Linked