如何在 PrimeNG 中增加 pTooltip 的宽度

Question

我正在使用 PrimeNG 的工具提示，当它有很多文本时我试图让它变宽，但它没有响应我尝试的任何事情。

我试过使用 PrimeNG 的 HTML 属性 tooltipStyleClass 并在 CSS 文件中给 class 一个宽度。我也尝试覆盖 ui-工具提示 class PrimeNG 在其文档中描述 https://www.primefaces.org/primeng/#/tooltip 但无济于事。我已经尝试在 Chrome 中进行调试，但我仍然无法弄清楚。

<!--TODO: make tooltip wider-->
<span *ngIf="uiComponent.component.description.length > 80"
      pTooltip="{{uiComponent.component.description}}"
      tooltipPosition="bottom"
      showDelay="250"
      tooltipStyleClass="tooltip">
  {{uiComponent.component.description.substr(0,80)}}...
</span>

.tooltip {
  width: 100em;
}

到目前为止，无论我做什么，工具提示宽度实际上从未改变。

Answer 1

tooltipStyleClass 将 class 附加到容器元素。换句话说，您声明的 class 将是该元素将包含的最后一个 class。作为最后一个 class 也意味着具有最低的优先级 - 如果它包含相同的属性.

，那么它之前的所有其他 class 都会覆盖它

如果您检查工具提示元素，您可能会看到类似这样的内容

<div class="ui-tooltip ui-widget ui-tooltip-right tooltip">
  <div class="ui-tooltip-arrow"></div>
  <div class="ui-tooltip-text ui-shadow ui-corner-all">Tooltip text</div>
</div>

您可以看到工具提示在列表的最后，这就是您的 css 被忽略的原因。

要更改工具提示的宽度，您必须触摸 ui-tooltip-text，它是您尝试更改的容器 class 的子项。

最终的解决方案是

.tooltip .ui-tooltip-text {
  width: 100em; 
}

确保在项目根目录的 styles.css 中应用它。如果你想从你的组件中应用它，你必须设置 ViewEncapsulation.None 或使用 ::ng-deep.

::ng-deep .tooltip .ui-tooltip-text {
  width: 100em; 
}

Stackblitz Solution

Answer 2

如果上面的答案不能解决问题，试试这个：

<style>
    .ui-tooltip .ui-tooltip-text {
        width: 300px; 
     }
</style>

希望对您有所帮助。

Answer 3

经过多次尝试，我已经弄明白了。这对我有用：

HTML:

<span [pTooltip]="Some text"></span>

CSS 或更少：

::ng-deep {
    .p-tooltip {
        max-width: fit-content;
     }
}

您不需要使用 tooltipStyleClass 属性，您只需要覆盖 .p-tooltip class.

的最大宽度属性

Answer 4

Angular/PrimeNg 12+

这对我有用：即需要将其全局放置

   .p-tooltip>.p-tooltip-text {
        width: 350px !important;
    }

Answer 5

:host ::ng-deep {
    .p-tooltip .p-tooltip-text {
        width: fit-content; 
    }
}

这就解决了我的问题，替换 ng prime

的默认 class

Answer 6

此线程中的大部分答案都适用于您项目的所有工具提示：

.p-tooltip>.p-tooltip-text {
        width: 350px !important;
}

但是，我无法使用 :host 或 ::ng-deep 使其在单个组件上运行。但是，primeNG 工具提示具有 tooltipStyleClass 属性。

如果您检查工具提示，您将拥有这些 html divs:

<div class="p-tooltip p-component p-tooltip-right tooltip-big-width" style="display: inline-block; left: 539.969px; top: 145.406px; opacity: 1.036; z-index: 1005;">

    <div class="p-tooltip-arrow"></div>
    <div class="p-tooltip-text">This is my text</div>
   
</div>

您可以将任何 css class 添加到使用您的工具提示的组件：

.tooltip-big-width{
    width: 350px !important;
}

<i [pTooltip]="tooltipMessage" tooltipStyleClass="tooltip-big-width"></i>

它会出现在 p-tooltip 的主要 div:

<div class="p-tooltip p-component p-tooltip-right tooltip-big-width" style="display: inline-block; left: 539.969px; top: 145.406px; opacity: 1.024; z-index: 1007;"></div>

请注意，您不想更改 p-tooltip 的宽度属性。您想要更改 p-tooltip-p-tooltip 内的文本。所以你的 class 将是：

.tooltip-big-width>.p-tooltip-text{
    width: 350px !important;
}

有了它，您可以更改任何组件的工具提示属性。

如何在 PrimeNG 中增加 pTooltip 的宽度

How to increase width of pTooltip in PrimeNG

tooltip

width

primeng

angular