Prime Ng Tooltip not working on hovering tab

Question

tool tip in not working on p-tabpanel header text instead it is showing on content of the tab , please help me out with possible solutions to fix it

It should be done using only prime ng tab panel

Answer 1

<p-tabPanel *ngFor="let tab of tabs; let i = index" [closable]="true [selected]="tab.selected">
  <ng-template pTemplate="header">
    <span [pTooltip]="tab.header" tooltipPosition="bottom">{{ tab.header }}</span>
  </ng-template>

  <!-- Content of the tab panel -->

</p-tabPanel>

we use the element with the pTemplate="header" attribute to define the header template. Inside the template, we wrap the header content with a element and apply the pTooltip directive to it. The tab.header value is used for both the tooltip text and the header text.