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.

According to [this answer](https://stackoverflow.com/a/39565420/1009922) and [this issue](https://github.com/angular/angular/issues/8785), it doesn't seem to be possible. — ConnorsFan, Sep 23 '18 at 17:24
Possible duplicate of [How to instantiate and apply directives programmatically?](https://stackoverflow.com/questions/39563547/how-to-instantiate-and-apply-directives-programmatically) — ConnorsFan, Sep 23 '18 at 17:26
@ConnorsFan thank you for pointing me to the open issue! I read through all the comments. It surprises me how angular can exist without such a basic need. — antidote, Sep 23 '18 at 19:06

score 1 · Answer 1 · answered Jul 28 '21 at 17:24

1

Just use 'title' instead of 'tooltip'.

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

answered Jul 28 '21 at 17:24

Ε Г И І И О

11,199
1
48
63

Sorry, this cannot work. If I set attribute 'title', ngx-bootstrap 'tooltip' directive won't be in use - right? That's what I'm trying to achieve. It does more than defining an html tooltip. – antidote Jul 29 '21 at 18:21

Angular Directive to add tooltip

1 Answers1