如何在 PrimeNG 中增加 pTooltip 的宽度答案

【问题标题】：How to increase width of pTooltip in PrimeNG如何在 PrimeNG 中增加 pTooltip 的宽度
【发布时间】：2019-12-03 03:05:28
【问题描述】：

我正在使用 PrimeNG 的工具提示，并在其中包含大量文本时尝试使其更宽，但它对我尝试的任何内容都没有响应。

我尝试使用 PrimeNG 的 HTML 属性 tooltipStyleClass 并在 CSS 文件中为该类指定宽度。我也尝试过覆盖 PrimeNG 在其文档https://www.primefaces.org/primeng/#/tooltip 中描述的 ui-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;
}

到目前为止，无论我做什么，工具提示的宽度都从未真正改变过。

【问题讨论】：

标签： angular tooltip width primeng

【解决方案1】：

tooltipStyleClass 将类附加到容器元素。换句话说，您在那里声明的类将是该元素将包含的最后一个类。作为最后一个类也意味着具有最低优先级 - 如果它包含相同的属性，则在它之前的所有其他类都会覆盖它。

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

<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，它是您尝试更改的容器类的子类。

最终的解决方案是

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

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

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

Stackblitz Solution

【讨论】：

当我检查工具提示时，它显示：html <div class="ui-tooltip ui-widget ui-tooltip-bottom tooltip" style="display: inline-block; left: 218px; top: 493.922px; opacity: 1.04; z-index: 1004;"> <div class="ui-tooltip-arrow"></div> <div class="ui-tooltip-text ui-shadow ui-corner-all">Tooltip text.</div> </div> 我将您提供的内容添加到我的 css 中，尽管这不起作用。我曾尝试触摸显示在 html 中的其他 css 类，但这也不起作用。我有什么遗漏的吗？
尝试添加到styles.css
请检查我添加的 Stackblitz。
@Dino。我面临同样的问题。我实现了你的答案，但它对我不起作用。你能帮忙吗？我尝试将其添加到 style.css 并且我还在我的组件 css 中尝试了 ::ng-deep。
@Dino。这是我的堆栈闪电战：stackblitz.com/edit/angular-bj4bvd

【解决方案2】：

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

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

希望这会有所帮助。

【讨论】：

【解决方案3】：

经过多次尝试，我想通了。这对我有用：

HTML：

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

CSS 或 LESS：

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

你不需要使用 tooltipStyleClass 属性，你只需要覆盖 .p-tooltip 类的 max-width 属性。

【讨论】：

【解决方案4】：

Angular/PrimeNg 12+

这对我有用：即需要将其放在全局范围内

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

【讨论】：