In Angular, is it possible to apply MatTooltip on an element that was created on runtime?

Question

I'm using FullCalendar (angular version) and I wanted to add a glyphicon on the resources list that when hovered, shows angular's MatTooltip. The issue now is that using element.setAttribute('matTooltip') is not cutting it. It's getting converted to mattooltip which won't work.

So I was thinking if there is a possible way of instantiating matTooltip on new HTMLDomElement

let departmentInfoSpan = document.createElement('span');
    departmentInfoSpan.setAttribute('matTooltip', 'sample tooltip');

The code above results to an html element like this:

<span mattooltip="sample tooltip"><span>?</span></span>

I was expecting the span element to be showing the tooltip when hovered.

Yes, I know it's easy to make a custom one. But I was hoping to do it using Angular's MatTooltip. Is it possible? — Dreadnaut, Jul 03 '19 at 03:53
Tried it at my end also ....along with matTooltip attribute, angular engine adds more attributes to make it working — Anil Arya, Jul 03 '19 at 03:55
Yeah. The docs only have examples that set-up the tooltip directly via html. But I wanted to do it on runtime — Dreadnaut, Jul 03 '19 at 04:48
You will need to create your own tooltip for that, because you can't use the material tooltip after the compilation — Anil Arya, Jul 03 '19 at 04:54

score 3 · Answer 1 · answered Jul 03 '19 at 05:05

Its not working because angular at compile time reads matTooltip which added there along with CSS and other attributes to make it working and this compilation action is missing at run time.

So, If you want to add tooltip dynamically, there are other alternative solution to it

1.Use *ngIf directive to determine the element to display .

For Example:

<span matTooltip="Yes tooltip" *ngIf="show"></span>
<span matTooltip="No tooltip" *ngIf="!show"></span>

2.Create your custom directive for tooltip

I've been trying to avoid creating my custom directive but I was left no choice. Though I didn't make my own, I used a component. Thanks for this — Dreadnaut, Jul 04 '19 at 03:31

score 0 · Accepted Answer · answered Jul 04 '19 at 03:41

Anil Kumar Arya pointed me in the right direction which led me to this post.

I was able to append a component (that contained the tooltip that I needed) to the DOM using Angular's ComponentPortal just like so:

import { ComponentFactoryResolver, ApplicationRef } from '@angular/core';
import { ComponentPortal, DomPortalHost } from '@angular/cdk/portal';

constructor(
    protected componentFactoryResolver: ComponentFactoryResolver,
    protected appRef: ApplicationRef,
    protected injector: Injector
) {}
...

myfunction (): void {
    let bodyPortalHost = new DomPortalHost(
      eventRenderInfo.el.querySelector('.fc-content'), // Target the element where you wish to append your component
      this.componentFactoryResolver,
      this.appRef,
      this.injector);

    let componentToAppend = new ComponentPortal(MyComponentThatHasTheElementWIthTooltip);
    let referenceToAppendedComponent = bodyPortalHost.attach(componentToAppend);
}

In Angular, is it possible to apply MatTooltip on an element that was created on runtime?

2 Answers2

Linked