如何仅在单击时显示 primeng 工具提示？

Question

我试图仅在单击时显示工具提示，因此默认情况下我禁用了工具提示，当我单击 span 时我重新启用了工具提示。

但是工具提示没有显示，我必须移出鼠标，然后将鼠标悬停在跨度上。

这是我的 html 模板

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

这是我的打字稿

export class MyComponent {

  tooltipDisabled = true;

  constructor() {

  }

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

我也尝试过基于 the answer of this question 的调度和事件，但它也不起作用。

是否有在我点击时显示工具提示的解决方案？

Answer 1

为了只在点击时显示工具提示，我更改了组件以从中访问指令。指令是 pTooltip 但指令的 class 是 Tooltip，based on the github sources.

我能够通过 ViewChild @ViewChild(Tooltip) tooltip!: Tooltip; 访问该指令。然后在 onclick 方法中可以调用指令的 activate 方法。

所以组件是这样的：

export class MyComponent {

  @ViewChild(Tooltip) tooltip!: Tooltip;

  constructor() {

  }

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

为了防止工具提示在悬停时显示，我更改了 tooltipEvent 并添加了 1 秒的生命周期，以便工具提示在一段时间后隐藏。

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

How to show primeng tooltip only on click?