1

I am appending an element dynamically to a div with ngbTooltip attributes. But tooltip is not working on hover, am I missing anything? Here is the code, https://stackblitz.com/edit/angular-hvfn56

TIA.

Nirmala
  • 65
  • 2
  • 10
  • Angular directives, like `ngbTooltip`, are not standard HTML. They must be processed by the Angular compiler and, therefore, they cannot be set dynamically with `innerHTML`. In general, setting content with `innerHTML` should be a last resort option. If you can, define the `div` content explicitely in the template, and use structural directives to make it dynamic. – ConnorsFan Jul 17 '19 at 15:32
  • Thanks, @ConnorsFan. In my real application, I am using Shadow DOM slot in which I am appending contents dynamically with appendChild. So I can't use structural directives. Is there any other way? – Nirmala Jul 17 '19 at 15:49
  • I am not familiar with Shadow DOM slots but I see a few articles that talk about them in relation to Angular elements, like [this article](https://www.sahosofttutorials.com/Course/Angular7/112/). – ConnorsFan Jul 17 '19 at 15:58
  • okay. I think I have to compile the dynamic HTML string to make it work. Do you know the angular equivalent of $compile? – Nirmala Jul 17 '19 at 16:15
  • 1
    I don't know if you will like the answers, but the question has been asked and answered in [this post](https://stackoverflow.com/q/34784778/1009922). – ConnorsFan Jul 17 '19 at 16:17
  • I tried dynamic compiling @ConnorsFan. But it's not triggering the ngbTooltip onInit method. [Here is the code](https://stackblitz.com/edit/angular-hvfn56-d6kaft) – Nirmala Jul 18 '19 at 12:45

0 Answers0