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?

Answer 1

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

Answer 2

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!

Answer 3

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.

Answer 4

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.

Answer 5

Maybe you can set the width like this in the js

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

or

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

Answer 6

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