Width of jQuery UI Tooltip widget

问题:

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?

回答1:

Based on Senn'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.

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

回答3:

in script:

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

in css:

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

回答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.

回答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!

回答6:

Maybe you can set the width like this in the js

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

or

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

回答7:

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