Search code examples
javascripthtmlcssangularprimeng

PrimeNG ToolTip not displaying

I can't get any tooltips, no matter where I place them, to show up. Whenever I hover over where you trigger the tooltip, the screen appears to get larger (a vertical scrollbar appears, which shouldn't happen anyway) and nothing shows for the tooltip. It looks like it might be trying to display somewhere at the bottom of the page, but there's nothing there either. Regardless, this isn't working and I can't find any solutions to this specific problem.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TooltipModule } from 'primeng/tooltip';

@NgModule({
  declarations: [
    SystemComponent,
  ],
  imports: [CommonModule, TooltipModule],
  exports: [SystemComponent],
})
export class SystemModule {}

import { Component } from '@angular/core';

@Component({
  selector: 'app-system',
  templateUrl: './system.component.html',
  styleUrls: ['./system.component.scss'],
})
export class SystemComponent {
  ngOnInit(): void {}
}

<div class="body">
   <header pTooltip="Name of the system"> System 1 </header>
</div>

.body {
  display: flex;
}

Part of me thinks this might be a versioning issue. However, I can't use the latest version of PrimeNG unless I update Angular. The above is only a tiny portion of my entire code that I've simplifed for this question; the entire codebase is not in a state that is ready to handle an Angular update, so I'm trying to avoid that if possible. That or I'm missing something. Is there maybe a set of styles from PrimeNG that I need to also import and use?

"@angular/animations": "^16.2.0",
"@angular/common": "^16.2.0",
"@angular/compiler": "^16.2.0",
"@angular/core": "^16.2.0",
"@angular/forms": "^16.2.0",
"@angular/platform-browser": "^16.2.0",
"@angular/platform-browser-dynamic": "^16.2.0",
"@angular/router": "^16.2.0",
"primeng": "16.9",
Solution

  • Mostly the culprit will be display: flex set on the body tag. This causes the children to have the minimal width possible so hovering over it, seemed like no tooltip was displayed.

    To set the component to display: block, since by default it's display: inline with no height.

     styles: [`:host {display: block;}`],

    Then in the HTML, we set the header to full width using width: 100%.

    import { Component } from '@angular/core';
import { TooltipModule } from 'primeng/tooltip';
@Component({
  selector: 'tooltip-position-demo',
  template: `
    <div class="body">
        <header pTooltip="Name of the system" style="width: 100%">System 1</header>
    </div>
  `,
  standalone: true,
  imports: [TooltipModule],
  styles: [`:host {display: block;}`],
})
export class TooltipPositionDemo {}

    Stackblitz Demo