即使设置了生命周期或设置了隐藏延迟，当触摸释放时，PrimeNg 工具提示也会在手机和平板电脑上消失

Question

我正在为自定义按钮配置工具提示，并将方法分配给（touchstart）事件，因为 primeng 工具提示的悬停事件在平板电脑或手机中不起作用。

这是该方法的代码：

onTouch() {
   this.tooltip.hideDelay = 5000;
   this.tooltip.show();
}

问题是延迟不起作用，当我释放触摸时，工具提示消失。我需要在触摸释放 5 秒后保留工具提示。

我该怎么做？尝试超时并保留属性但不起作用。

Answer 1

修改模板以处理 touchstart 和 touchend 事件：

<button pTooltip="Your tooltip text" 
        #tt="pTooltip"
        (touchstart)="onTouchStart($event)"
        (touchend)="onTouchEnd()">
    Button Text
</button>

然后在您的组件中，实现管理工具提示可见性的逻辑：

export class YourComponent {
  @ViewChild('tt') tooltip: any;
  private tooltipTimer: any;

  onTouchStart(event: TouchEvent) {
    event.preventDefault(); // Prevent default touch behavior
    this.tooltip.show();
  }

  onTouchEnd() {
    // Clear any existing timer
    if (this.tooltipTimer) {
      clearTimeout(this.tooltipTimer);
    }
    
    // Set new timer to hide tooltip after 5 seconds
    this.tooltipTimer = setTimeout(() => {
      this.tooltip.hide();
    }, 5000);
  }

  ngOnDestroy() {
    // Clean up timer when component is destroyed
    if (this.tooltipTimer) {
      clearTimeout(this.tooltipTimer);
    }
  }
}

• 同时使用 touchstart 和 touchend 事件来更好地控制工具提示行为
• 防止可能干扰工具提示的默认触摸行为