How to increase width of pTooltip in PrimeNG

After many tries I have figured it out. Here what worked for me:

HTML:

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

CSS or LESS:

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

You don`t need to use tooltipStyleClass attribute, you just need to override the max-width property of the .p-tooltip class.

If the answer above does not fix the problem, try this:

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

Hope this helps.

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