带滚动条的Angular Tooltip滚动时消失问题求助

问题原因 #

点击元素后tooltip保持打开状态，但滚动tooltip内部内容时，指令误将tooltip的滚动事件识别为页面滚动，触发了关闭逻辑，导致tooltip消失。

优先尝试CSS修复 #

给tooltip的滚动容器添加pointer-events: auto，阻止滚动事件向上冒泡到页面，避免触发指令的滚动关闭逻辑：

/* 替换成你的tooltip容器类名 */
.tooltip-content {
  max-height: 200px;
  overflow-y: auto;
  pointer-events: auto;
}

如果tooltip的父容器设置了pointer-events: none，需要确保滚动区域的pointer-events被覆盖为auto，让tooltip内部能正常响应鼠标事件。

CSS无效时修改指令 #

如果CSS方案没效果，就得调整指令的逻辑：

1. 修改滚动监听逻辑：区分页面滚动和tooltip内部滚动，只有页面滚动时才关闭tooltip：

@HostListener('window:scroll', ['$event'])
onScroll(event: Event) {
  // 判断滚动目标是否不是tooltip容器
  if (!event.target?.closest('.tooltip-content')) {
    this.closeTooltip();
  }
}

2. 优化外部点击判断：确保点击tooltip内部时，不会触发外部点击的关闭逻辑：

@HostListener('document:click', ['$event'])
onDocumentClick(event: MouseEvent) {
  const isClickInsideTooltip = this.tooltipElement.contains(event.target as Node);
  const isClickOnTrigger = this.triggerElement.contains(event.target as Node);
  if (!isClickInsideTooltip && !isClickOnTrigger) {
    this.closeTooltip();
  }
}

内容的提问来源于stack exchange，提问作者spiderweps