title: Structural directives, position tooltip
body: <p>I have created a structural directive that displays a tooltip based on what is inside an ng-template, when I hover over the text "see tooltip"
  the tooltip is displayed correctly, but it is displayed in the top: 0px left: 0px position of the screen, I want it to be displayed just above the text "see tooltip", I have achieved the dimensions of the elementRef with the method "getBoundingClientRect()" but I do not know how to apply them in the tooltip. Any idea?</p>
  
  <p>tooltip.directive.ts</p>
  
  <pre><code>import { Component, Input, HostListener,  Directive, ElementRef, 
  TemplateRef, ViewContainerRef,  ContentChild, ComponentRef } from 
  '@angular/core';
  
  @Directive({ selector: '[tooltipDirective]' })
  export class TooltipDirective {
  private tooltipId: string;
  private dimensiones:{};
  constructor(private elementRef: ElementRef,
            private viewContainerRef: ViewContainerRef) { }
  
  @Input() parametroPlantilla: TemplateRef&lt;any&gt;;
  @ContentChild( "tooltipTemplate" ) private tooltipTemplateRef: TemplateRef 
   &lt;Object&gt;;
  @HostListener('mouseenter')  onMouseEnter(): void {    
  this.viewContainerRef.createEmbeddedView(this.tooltipTemplateRef);
  this.dimensiones = this.elementRef.nativeElement.getBoundingClientRect();   
  }
  @HostListener('mouseleave')  onMouseLeave(): void {        
   if (this.viewContainerRef) {
      this.viewContainerRef.clear();
    }  
   }  
  }
  </code></pre>
  
  <p>display.component.ts</p>
  
  <pre><code>...Some stuff
  
  &lt;div tooltipDirective&gt;See tooltip!
    &lt;ng-template #tooltipTemplate &gt;      
        &lt;div&gt;   
            This is my tooltip!
        &lt;/div&gt;      
    &lt;/ng-template&gt;  
  &lt;/div&gt;
  </code></pre>