How to increase width of pTooltip in PrimeNG

Question

I'm using PrimeNG's tooltip and am trying to make it wider when it has lots of text in it, but it is not responding to anything I try.

I have tried using PrimeNG's HTML attribute tooltipStyleClass and in a CSS file giving that class a width. I have also tried overwriting the ui-tooltip class PrimeNG describes in its documentation here https://www.primefaces.org/primeng/#/tooltip but to no avail. I've tried debugging in Chrome but I still can't figure it out.

<!--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;
}

So far the tooltip width never actually changes, regardless of what I do.

Answer 1

Angular/PrimeNg 12+

This works for me: i.e. need to put this globally

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

Answer 2

tooltipStyleClass is appending the class to the container element. In other words, the class you declare there will be the last class that element will contain. Being the last class also means having the least priority - all other classes before it will overwrite it if it contains the same property.

If you inspect the tooltip element, you can expect to see something like this

<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>

You can see that the tooltip is last in the list, and that's why your css is ignored.

To change the width of your tooltip, you will have to touch the ui-tooltip-text which is a child of a container class you were trying to change.

The final solution would be

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

Make sure to apply that in styles.css at root of your project. If you want to apply it from your component, you will have to set ViewEncapsulation.None or use ::ng-deep.

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

Stackblitz Solution