Tooltip Directive with mouse over on tooltip area

Question

My requirement is when user mouseover on icon then tooltip should be appear and user able to click on URL in the tooltip. Also tooltip element inside the icon div should be append to body on mouseover and remove on mouseout. Because tooltip size is large and parent element having overflow auto. Hence need to show append tooltip element of body.

In below code I am able to append the tooltip data to body but it's removing the element inside the icon. So second time it's not getting tooltip data and given the error.

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

score 0 · Answer 1 · answered Jun 29 '18 at 18:31

you dont need the @hostlistener

try this:

<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>

also see this Angular 2 Hover event

Tooltip Directive with mouse over on tooltip area

1 Answers1