将鼠标悬停在工具提示区域上的工具提示指令

Posted 2023-05-08

【中文标题】将鼠标悬停在工具提示区域上的工具提示指令

【英文标题】：Tooltip Directive with mouse over on tooltip area

【发布时间】：2018-12-08 05:58:14

【问题描述】：

我的要求是当用户将鼠标悬停在图标上时，应该出现工具提示，并且用户可以点击工具提示中的 URL。图标 div 内的工具提示元素也应在鼠标悬停时附加到正文并在鼠标移出时删除。因为工具提示大小很大并且父元素具有溢出自动。因此需要显示正文的附加工具提示元素。

在下面的代码中，我可以将工具提示数据附加到正文，但它正在删除图标内的元素。所以第二次它没有获取工具提示数据并给出错误。

<div class="overflowAuto">
    <div class="icon" appClickableTooltip>
        <div>Tooltip html Elements and data here...</div>
    </div>
</div>

---

@Directive(
  selector: '[appClickableTooltip]'
)
export class ClickableTooltipDirective 
  constructor(private el: ElementRef, private renderer: Renderer2, @Inject(DOCUMENT) private document: Document)  
  mouseover: boolean;

  div = this.renderer.createElement('div');

  @HostListener('mouseover')
  onMouseOver() 
    console.log('true');
    let thisEl = this.el.nativeElement.children[0];
    this.renderer.appendChild(document.body, thisEl);
  

【参考方案1】：

你不需要@hostlistener

试试这个：

<div (mouseenter) ="mouseEnter('div a') "  (mouseleave) ="mouseLeave('div A')">
  <h2>Div A</h2>
</div> 
<div (mouseenter) ="mouseEnter('div b')"  (mouseleave) ="mouseLeave('div B')">
  <h2>Div B</h2>
</div>

也看到这个 Angular 2 Hover event