Angular Directive to add tooltip

Question

I have a directive, which receives node id and it should display a complex tooltip containing html with additional info.

For tooltip I want to use ngx-bootstrap tooltip directive. I try to customize ngx-bootstrap directive using my custom appNodeInfo attribute directive and reuse that in 15 places.

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

import { Component, OnInit } from '@angular/core';

@Component({
  inputs: ['instanceId'],
  selector: 'instance-id',
  template: `
    <span appNodeInfo="instanceId">
      {{instanceId}}
    </span>
  `,
  styles: []
})
export class InstanceIdComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

THIS ACTUALLY DOES NOT WORK:

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

}

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: https://github.com/nayfin/tft-library/blob/master/projects/tft-library/src/lib/dynamic-form/dynamic-field.directive.ts May be somebody could explain how I can solve the problem with this or why it is not a solution.

Answer 1

Just use 'title' instead of 'tooltip'.

ngOnInit() {
    this.renderer.setAttribute(this.el.nativeElement, 'title', 'HERE I AM !!');
}