Tooltip not displaying on focus in angular

Question

We are using a custom kendo tooltip (created as a component) and on hover it is displaying the message but when we tab and it has the focus it is not, I have written a function when the focus is on the icon and it even calls that function on focus but how to proceed from then. could someone please help me with this.

<app-cus-tooltip
id=customtip
[iconType]=“‘info’”
[msgkey]=“‘custominfo’” 
class=“appicons”
tabindex=0
(focusin)=doahover($event)
>
</app-cus-tooltip>



doahover($event){
// what to do here
}

Answer 1

On the focusin event, you're missing the quotes ("").

(focusin)="doahover($event)"

In your function, you could now dynamically create the Tooltip component:

constructor(private _viewContainerRef: ViewContainerRef) {}

openTooltip(): void {
  this.viewContainerRef.createComponent(MyComponent)
}