How to show primeng tooltip only on click?

Question

I am trying to show the tooltip only on the click, so by default I disabled the tooltip, and when I click on the span I re enable the tooltip.

But the tooltip doesn't show, I have to move out my mouse and then move my mouse hover the span.

Here is my html template

<span (click)="onClick()" [tooltipDisabled]="tooltipDisabled" pTooltip="My tooltip"
      tooltipPosition="top">My text</span>

And here is my typescript

export class MyComponent {

  tooltipDisabled = true;

  constructor() {

  }

  onClick() {
    this.tooltipDisabled = false;
  }
}

I also tried to dispatch and event based on the answer of this question but it doesn't work either.

Is there a solution to show the tooltip on my click ?

Answer 1

To only show the tooltip on click, I changed the component to access the directive from it. The directive is pTooltip but the class of the directive is Tooltip, based on the github sources.

I was able to access the directive by a ViewChild @ViewChild(Tooltip) tooltip!: Tooltip;. And then inside the onclick method it's possible to call the activate method of the directive.

So the component is like this:

export class MyComponent {

  @ViewChild(Tooltip) tooltip!: Tooltip;

  constructor() {

  }

  onClick() {
    this.tooltip.activate();
  }
}

And to prevent the tooltip from showing on hover I changed the tooltipEventand added a life of 1 second so that the tooltip hide after some times.

<span (click)="onClick()" [life]="1000" tooltipEvent="focus" pTooltip="My tooltip"
      tooltipPosition="top">My text</span>