title: Angular Directive to add tooltip
body: <p>I have a directive, which receives node id and it should display a complex tooltip containing html with additional info.</p>
  
  <p>For tooltip I want to use <a href="https://valor-software.com/ngx-bootstrap/#/tooltip" rel="nofollow noreferrer">ngx-bootstrap tooltip directive</a>. I try to customize ngx-bootstrap directive using my custom appNodeInfo attribute directive and reuse that in 15 places.</p>
  
  <p>But I don't know how to do that: the major problem is make angular recognize that tooltip is a directive and not just an unknown attribute...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    inputs: ['instanceId'],
    selector: 'instance-id',
    template: `
      &lt;span appNodeInfo="instanceId"&gt;
        {{instanceId}}
      &lt;/span&gt;
    `,
    styles: []
  })
  export class InstanceIdComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>THIS ACTUALLY DOES NOT WORK:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Directive, ElementRef, Renderer2 } from '@angular/core';
  
  @Directive({
    selector: '[appNodeInfo]',
    inputs: ['instanceId']
  })
  export class NodeInfoDirective {
    
    constructor(private el: ElementRef, private renderer: Renderer2) {
      el.nativeElement.style.backgroundColor = 'yellow';
    }
  
    ngOnInit() {
      this.renderer.setAttribute(this.el.nativeElement, 'tooltip', 'HERE I AM !!');
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I read that angular 6 supports dynamic component creation through ComponentFactoryResolver. The last comment on the open angular issue linked here suggests, that he solved the problem without explaining how. Here is the reference: <a href="https://github.com/nayfin/tft-library/blob/master/projects/tft-library/src/lib/dynamic-form/dynamic-field.directive.ts" rel="nofollow noreferrer">https://github.com/nayfin/tft-library/blob/master/projects/tft-library/src/lib/dynamic-form/dynamic-field.directive.ts</a>
  May be somebody could explain how I can solve the problem with this or why it is not a solution.</p>