Ширина виджета всплывающей подсказки jQuery UI

Ответ 1

На основании ответа Senn я добавил следующее в отдельный CSS файл:

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

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

Ответ 2

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

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

Ответ 3

в script:

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

в css:

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

Ответ 4

Вместо непосредственного изменения или переопределения CSS-классов jQuery UI вы можете указать дополнительный 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>

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

Ответ 5

Как указано 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;
}

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

Ответ 6

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

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

или

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

Ответ 7

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

Ответ 8

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