Question 393835 in Html Question posted in
Some basic documentation can be found here.

Html – 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",
Tags:

2

Answers


  1. 0

    I think Tooltips only work on specific elements like inputs and buttons.
    At least from my experience and the docs.
    The docs are kinda unspecific but they say

    Tooltip is integrated within various PrimeNG components.

    so I guess it only works on primeNg components.
    Since <header> isnt one, it doesnt work.

    Login or Signup to reply.
  2. 0

    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. The fix for this will be

    To set the component to display: block, since by default its 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search