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

Question

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

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

这是我的 html 模板

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

这是我的打字稿

export class MyComponent {

  tooltipDisabled = true;

  constructor() {

  }

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

我也尝试根据这个问题的答案来调度和事件，但它也不起作用。

有没有解决方案可以在我点击时显示工具提示？

Answer 1

为了仅在单击时显示工具提示，我更改了组件以从中访问指令。该指令是 pTooltip，但该指令的类是 Tooltip，基于 github 源代码。

我能够通过 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>