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