I am experiencing issues with getting tooltips to display properly on my webpage. When I hover over the tooltip trigger, the screen seems to expand with a vertical scrollbar appearing, but no tooltip is shown. It appears as though the tooltip might be trying to display at the bottom of the page, where nothing is visible. Despite trying various solutions, I have not been able to resolve this specific problem.
import { NgModule } from '@angular/core';
import { CommonModule } from '@common/common-module';
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;
}
I suspect that this issue may be related to version compatibility. However, updating Angular at this time is not feasible due to the current state of the codebase. I wonder if there are specific PrimeNG styles that also need to be imported and used in order for the tooltips to work correctly?
"@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",