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

Я использую новый jQuery UIподсказка и возникли проблемы с выяснением, как установить максимальную ширину всплывающей подсказки. Я думаю, это должно быть сделано спозиция, но как?

Ответы на вопрос(7)

Решение Вопроса

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

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

 billynoah24 дек. 2014 г., 04:22
body div.ui-tooltip Кажется, достаточно независимо от порядка загрузки.
 Josh22 июл. 2013 г., 16:50
В качестве альтернативы я предпочитаю добавить более конкретное правило CSS, чтобы оно получало приоритет над правилом jquery-ui.css, независимо от порядка, в котором вы связываете свои таблицы стилей. Если у вас есть идентификатор на вашем теле, это так же просто, как сделать#idOfBodyTag .ui-tooltip
 LauraNMS25 февр. 2014 г., 16:38
Важно важно.

вы можете обновить стиль в коде:

$(".selector").tooltip({
    open: function (event, ui) {
        ui.tooltip.css("max-width", "400px");
    }
});
 pknoe3lh14 дек. 2015 г., 19:07
Не используйте это! JQuery вычисляет ширину и высоту до открытия называется. Поэтому изменение размера не будет зарегистрировано.
 sdjuan04 июн. 2013 г., 01:52
это хорошо работает Благодарю. И это лучше, так как вы можете создавать различные подсказки разных размеров в зависимости от ваших потребностей.
 nfriend2102 авг. 2013 г., 21:30
@sdjuan спасибо за это. Я пытался использовать «ширину», и она не работала, хотя «высота» была. "максимальная ширина" сделала свое дело.

ery 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 тег, но это может быть использовано в этом случае, чтобы обеспечитьCSS оказано.

 Roger Kaplan13 мар. 2018 г., 19:41
Хорошо, html () используется для заполнения всплывающей подсказки, а не для ее стилизации, поэтому метод все еще действителен, даже если леса не
 PseudoNinja23 февр. 2018 г., 16:45
Это больше не является допустимым решением. Html () не может быть реализован как часть параметра содержимого, так как HTML больше не поддерживается.

в сценарии:

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

в css:

.my-tooltip-styling {
      max-width: 600px;
}
 mikato01 нояб. 2013 г., 16:08
Это действительно кажется мне лучшим ответом. Вы не связываетесь с CSS jQuery UI, и вы можете установить стиль для каждой подсказки отдельно. Благодарю. Это помогло мне понять, что я не знаю, какой класс / идентификатор стилизовать, так как подсказка на самом деле не живет в моем коде, а только в jQuery UI.
  .ui-tooltip{
      max-width: 800px !important;
      width: auto !important;
      overflow:auto !important;
      }
  .ui-tooltip-content{
      background-color: #fdf8ef;
      }

Может быть, вы можете установить ширину, как это в JS

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

или же

$("#IDOfToolTip").css("max-width", "30px");
 sl3dg319 окт. 2012 г., 09:33
Да, смотрите мой ответ.
 Senni19 окт. 2012 г., 08:07
Это работает сейчас?
 sl3dg318 окт. 2012 г., 17:00
Это как-то не работает, но на основе этого я добавил немного CSS (см. Мой ответ).

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

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

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

Ваш ответ на вопрос