Question

我的要求是，当用户将鼠标悬停在图标上时，将出现工具提示，并且用户可以单击工具提示中的URL。同样，图标div中的工具提示元素应在鼠标悬停时附加到主体，并在鼠标悬停时删除。因为工具提示大小很大，并且父元素会自动溢出。因此，需要显示body的附加工具提示元素。

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

<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);
  }
}

Answer 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

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

1 个答案: