17

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.

Peyton Hanel
  • 374
  • 1
  • 3
  • 13

6 Answers6

14

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

Dino
  • 7,779
  • 12
  • 46
  • 85
  • 1
    When I inspect the tooltip it shows this: ```html
    Tooltip text.
    ``` I added what you gave to my css, though that didn't work. I have tried touching the other css classes that display in the html but that didn't work either. Is there anything that I am missing?     – Peyton Hanel Jul 25 '19 at 15:27
  • Try to adding it to styles.css – Dino Jul 25 '19 at 15:35
  • Please check the Stackblitz I added. – Dino Jul 25 '19 at 19:10
  • 2
    @Dino. I'm facing same problem. I implemented your answer but its not working for me. Can you please help. I tried adding it to `style.css`and I also tried `::ng-deep` in my component css. – Tanzeel Dec 24 '19 at 17:24
  • @Dino. Here's my stackblitz: https://stackblitz.com/edit/angular-bj4bvd – Tanzeel Dec 24 '19 at 17:47
  • In 2022, with PrimeNG 13.x, the last class should be `p-tooltip-text`, not `ui-tooltip-text`. – AsGoodAsItGets May 02 '22 at 16:38
5

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.

Radu
  • 51
  • 1
  • 1
4

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

<style>
    .ui-tooltip .ui-tooltip-text {
        width: 300px; 
     }
</style>
Murat Yıldız
  • 11,299
  • 6
  • 63
  • 63
3

Angular/PrimeNg 12+

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

   .p-tooltip>.p-tooltip-text {
        width: 350px !important;
    }
Sampath
  • 63,341
  • 64
  • 307
  • 441
0
:host ::ng-deep {
    .p-tooltip .p-tooltip-text {
        width: fit-content; 
    }
}

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

belivine
  • 31
  • 3
  • 1
    As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers here (https://stackoverflow.com/help/how-to-answer) – Buddy Bob Apr 21 '22 at 20:55
0

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.

Fix
  • 1