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

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.

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.