@Directive({
selector: '.tooltip-container'
})
export class TooltipContainerDirective {
}
@Component({
template: `
<div class="tooltip-container" [ngStyle]="{top: top}">
<ng-content></ng-content>
</div>
`,
styles: [...]
})
export class TooltipComponent implements OnInit {
top : string;
@ViewChild(TooltipContainerDirective, { read: ElementRef }) private tooltipContainer;
constructor( @Inject('tooltipConfig') private config ) {
}
ngOnInit() {
// For simplicity, we calculate only the top.
const { top } = this.config.host.getBoundingClientRect();
const { height } = this.tooltipContainer.nativeElement.getBoundingClientRect();
this.top = `${top - height}px`;
}
}