ngbPopover鼠标悬停不显示问题排查与解决求助

我来帮你一步步排查这个问题，先从最明显的配置问题说起：

1. 先修复触发事件配置 #

你现在把triggers设为空字符串了，这相当于没有给popover设置任何触发显示的事件，鼠标悬停当然没反应！要实现悬停显示，得把triggers改成"hover"，或者更明确的"mouseenter:mouseleave"：

<span [routerLink]="" class="icon-info" [ngbPopover]="popTemplate" triggers="hover" #pop="ngbPopover" tabindex="0" container="body" closePopoverOnClickOutside (click)="showEmail()" placement="right"></span>

另外注意，你同时绑定了(click)事件，用hover触发后点击可能会和你的showEmail()函数冲突，要是不需要点击开关的话可以考虑去掉这个事件，或者调整逻辑避免重复触发。

2. 排查遮挡问题（z-index无效的可能原因） #

虽然你设置了container="body"让popover挂载到body下，但还是有几种情况会导致它被滑块div遮挡：

• 滑块div设了overflow: hidden/auto：这种情况下就算popover在body里，滑块的裁剪规则还是会把超出部分挡住，你可以检查下滑块的overflow属性，要是不影响滑块功能的话改成overflow: visible试试。
• 滑块用了transform/perspective/filter属性：这些属性会创建新的堆叠上下文，这时候不管你给popover设多高的z-index都没用，因为它被限制在滑块的堆叠上下文里了。这种情况要么移除这些属性，要么确认popover确实挂载在body下（你的container="body"是对的，但可以检查DOM结构确认）。

要是以上都没问题，你可以强制给popover加更高的z-index：

.popover {
  z-index: 9999 !important; /* 确保这个值比滑块的z-index大就行 */
}

3. 检查showEmail()函数的实例获取问题 #

你模板里的popover实例变量是#pop="ngbPopover"，但组件里用的是this.popover，得确保组件里正确获取了这个实例才行，不然函数根本没法控制popover：

import { Component, ViewChild } from '@angular/core';
import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';

@Component({
  // 你的组件元数据
})
export class YourComponent {
  @ViewChild('pop') popover: NgbPopover;

  showEmail() {
    if (!this.popover) return; // 先判断实例是否存在

    this.popover.isOpen() ? this.popover.close() : this.popover.open();
  }
}

按这个步骤排查下来，应该能解决你的问题啦～

内容的提问来源于stack exchange，提问作者Haq.H