Proposal for Standalone Tooltip Directive in PrimeNG Using Angular Directive Composition API

[B1ker4nt3nd]

I propose adding a standalone tooltip directive to PrimeNG that leverages Angular's Directive Composition API. This would allow developers to easily integrate tooltips in both directives and components without needing to tie them directly to PrimeNG components.

I have successfully implemented a modification where the tooltip directive can be composed and reused like this:

@Directive({
  selector: '[myCustomTooltip]',
  standalone: true,
  hostDirectives: [
    { directive: Tooltip, inputs: ['pTooltip: myCustomTooltip'] },
  ],
})
export class MyCustomTooltipDirective {}

@Component({
  selector: 'app-component-with-standalone-tooltip',
  standalone: true,
  templateUrl: './component-with-standalone-tooltip.component.html',
  styleUrls: ['./component-with-standalone-tooltip.component.scss'],
  hostDirectives: [
    {
      directive: Tooltip,
      inputs: ['pTooltip: tooltip'],
    },
  ],
})
export class ComponentWithStandaloneTooltipComponent {}

Usage:

<div>
  <span myCustomTooltip="Custom tooltip message">Standalone tooltip works!</span>
</div>

<div>
  <app-component-with-standalone-tooltip tooltip="Custom tooltip on the component">
  </app-component-with-standalone-tooltip>
</div>

This enhancement would provide more flexibility and ease of use for developers when integrating tooltips.

[B1ker4nt3nd]

I have submitted a pull request for the standalone tooltip directive solution. You can track the progress and review it here: PrimeNG Pull Request #16386.

Looking forward to your feedback!