Директива всплывающей подсказки при наведении указателя мыши на область всплывающей подсказки

Question

Мое требование: когда пользователь наводит курсор мыши на иконку, должна появиться подсказка, и пользователь может щелкнуть URL-адрес во всплывающей подсказке. Также элемент подсказки внутри значка div должен добавляться к телу при наведении курсора мыши и удаляться при наведении мыши. Поскольку размер всплывающей подсказки большой, а родительский элемент имеет переполнение auto. Следовательно, необходимо показать элемент подсказки добавления тела.

В приведенном ниже коде я могу добавить данные всплывающей подсказки к телу, но он удаляет элемент внутри значка. Поэтому во второй раз он не получает данные всплывающей подсказки и выдает ошибку.

<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