Максимальная ширина виджета jQuery UI Tooltip

Основываясь на ответе Сенни, я добавил в отдельный CSS-файл следующее:

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

Примечание: убедитесь, что ваш отдельный CSS следует после ui-css, иначе эффекта не будет. В противном случае вы также можете использовать маркер !important.

Если вы подписались на событие открытия всплывающей подсказки, вы можете обновить стиль в коде:

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

в сценарии:

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

в css:

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

Вместо того, чтобы напрямую изменять или переопределять классы CSS пользовательского интерфейса jQuery, вы можете указать дополнительный класс CSS с помощью параметра tooltipClass:

Инициализация всплывающей подсказки

  $(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();

      }
    });
  });

Затем вы должны создать этот класс стиля. Вы захотите импортировать этот файл CSS после файла CSS jQuery UI.

Пример стиля CSS

Этот класс здесь сделает модальное окно шириной 1200 пикселей по умолчанию и добавит горизонтальную прокрутку, если есть еще какой-либо контент.

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

</style>

Примечание. Обычно не рекомендуется использовать тег !important, но в этом случае его можно использовать, чтобы обеспечить отображение нужного CSS.

Как указано в jQuery UI API, лучшее, что вы можете сделать, это переопределить классы ui-tooltip и ui-tooltip-content следующим образом:

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

Надеюсь это поможет!

Может быть, вы можете установить такую ​​​​ширину в js

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

or

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