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?

Mcnalley

Answer 1

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.

Mcnalley

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 – Bedwell

The !important is important. – Odericus

body div.ui-tooltip seems to be enough regardless of load order. – Gaelan

Answer 2

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

Quintessence

this works well. thanks. And this is better since you can make different tooltips different sizes depending on your needs. – Zebra

@Zebra thanks for this. I was trying to use "width", and it wasn't working even though "height" was. "max-width" did the trick. – Motor

Do not use that! Jquery is calculating the width and hieght befor open is called. Therefore the size change will not be registered. – Indictable

Answer 3

in script:

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

in css:

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

Neurasthenia

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. – Frequency

Answer 4

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.

Emmettemmey

This is no longer a valid solution .html() cannot be implemented as part of content parameter as HTML is no longer supported. – Sideboard

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 – Dhruv

Answer 5

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!

Chafin

Answer 6

Maybe you can set the width like this in the js

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

or

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

Platitudinous

This somehow does not work, but based on this I added some CSS (see my answer). – Mcnalley

Answer 7

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

Garek

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. – Continuo

Answer 8

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

Affettuoso

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. – Yes