'kendoTooltip' selector in multiple 'kendo-grid' elements

[Fouad]

Hello, 

I have this example: 

https://stackblitz.com/edit/angular-te7dtt-8jnpsk?file=app%2Fapp.component.ts

It seems like kendoTooltip selector of TooltipDirective can only be declared once per view.

Let's say you have two <div> element. If you declare a kendoTooltip in each of those <div> elements, it will only work for the first grid. 

1- Is TooltipDirective static/singleton? cannot be instantiated multiple times?

2- How can you use kendoTooltip in multiple html elements so that TooltipDirective.show() can work on all those html elements, and not only the first one where kendoTooltip is declared? 

Thank you!

[Fouad]

Just an FYI, I'm using angular 9, and kendo-angular-tooltip 3.

[Stefani]

Hi Fouad,

Thank you for the provided details!

To start with your first question, the TooltipDirective can be instantiated multiple times on different HTML elements. However, the @ViewChild directive looks only for the first element or directive matching the selector and is not cumulative for all elements meeting the requirements. Instead, the @ViewChildren directive can be used when there are multiple elements with one selector. The directive will return a QueryList of the target elements or directives from the view DOM. 

Here is a StackBlitz example that implements this approach:

https://stackblitz.com/edit/angular-te7dtt-nqd1xa

The query list could be processed in different ways. The available API for the QueryList can be found here. 

Another option would be to use Template reference variables to get different instances of all the tooltip directives. The following StackBlitz demonstrates how it could be done:

https://stackblitz.com/edit/angular-te7dtt-54y1vt. 

I hope this helps. Let me know if you need any further assistance!

Regards,
Stefani
Progress Telerik