'How to increase width of pTooltip in PrimeNG

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.

angulartooltipwidthprimeng


Solution 1:[1]

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

Solution 2:[2]

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

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

Hope this helps.

Solution 3:[3]

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.

Solution 4:[4]

Angular/PrimeNg 12+

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

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

Solution 5:[5]

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

that's solve my case, to replace default class of ng prime

Solution 6:[6]

Most of the answers on this thread works globally on all tooltips of your project:

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

However, I couldn't make it work on a single component using :host or ::ng-deep. However however, primeNG tooltip has a tooltipStyleClass attribute.

If you Inspect the tooltip, you'll have these 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>

You can add any css class to the component that uses your tooltip:

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

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

And it will appear on the main div of the p-tooltip:

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

Note that you don't want to change the width property of p-tooltip. You want to change p-tooltip-text that is inside p-tooltip. So your class would be:

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

With that, you can change tooltip properties on any component.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Murat Yıldız
Solution 3 Radu
Solution 4 Sampath
Solution 5
Solution 6 Fix

Related Questions