Angular CDK Overlay, change default overlay container

Question

Is there a way to change the OverlayContainer?

I have created a tooltip component, but sometimes I want to attach the overlay to a specific element (by default the overlay is attached to the document body).

Here is how I am creating the overlay:

  private initOverlay(): void {
    const positionStrategy = this.overlayPositionBuilder
      .flexibleConnectedTo(this.elementRef)
      .withPositions([this.resolvedConfig]);

    this.overlayRef = this.overlay.create({positionStrategy});
  }

And this is how I am attaching a template to it:

  show(): void {
    this.overlayRef.attach(new TemplatePortal(this.tpl, this.viewContainerRef));
  }

Togoland

What's your use case for attaching it to a specific element? – Slayton

I have a dialog, the tooltip appears behind it (the tooltip trigger is placed on the dialog). – Togoland

Answer 1

Please reference this stackblitz example.

looks like you can accomplish this by extending the OverlayContainer class via the following in app.module.ts

{ provide: OverlayContainer, useFactory: () => new AppOverlayContainer() }

Stackblitz

https://stackblitz.com/edit/angular-material2-issue-ansnt5?file=app%2Fapp.module.ts

---

This GitHub comment also provides an example of how to package this in a directive

GitHub comment

https://github.com/angular/material2/issues/7349#issuecomment-337513040

---

Revision 3/22/19 working directive example

Extend the OverlayContainer class via cdk-overlay-container.ts

Stub the class in app.module.ts

  providers: [
    { provide: OverlayContainer, useClass: CdkOverlayContainer },
  ]

In your cdk-overlay-container.ts you are preventing the default _createContainer() from working, and providing your own custom public method myCreateContainer to replace it.

You are essentially creating an empty div here, adding a custom class to it my-custom-overlay-container-class and appending it to the div the directive is attached to, then passing that container to the private variable _containerElement in the true OverlayContainer class.

/**
* Create overlay container and append to ElementRef from directive
*/ 
public myCreateContainer(element: HTMLElement): void {
   let container = document.createElement('div');
   container.classList.add('my-custom-overlay-container-class');

   element.appendChild(container);
   this._containerElement = container;
 }
 /**
  * Prevent creation of the HTML element, use custom method above
  */
 protected _createContainer(): void {
     return;
 }

Then in your cdk-overlay-container.directive.ts your are calling myCreateContainer() and passing the ElementRef as an argument.

 this.cdkOverlayContainer['myCreateContainer'](this.elementReference.nativeElement);

Then in your HTML assign the directive where you want it to show up.

<div myCdkOverlayContainer 

Stackblitz

https://stackblitz.com/edit/angular-material2-issue-6nzwws?embed=1&file=app/app.component.html

Stalinsk

Yes, I saw this suggestion, the problem with this is that I might need to provide the custom OverlayContainer per each instance of the tooltip directive. Seems though there is no other way to achieve this. Would be nice if it would be configurable though. – Togoland

Although I believe the directive approach may be a solution here, I am having trouble implementing it in stackblitz. Will update answer if I can get it going. – Stalinsk

Please see revision with directive example. – Stalinsk

In the implementation with myCdkOverlayContainer directive, all tooltips are attached to the last overlay container (4th). I am missing something here? I thought that is possible to attach different tooltips to different containers. Thanks. – Polychasium

The implementation is creating a container on each element to calculate the position of the tooltip. But ultimately, because the OverlayContainer class is a singleton, the tooltips will be rendered in the last container created. This example was to control the placement of the tooltip/calculate position. – Stalinsk

I get this error TypeError: this.cdkOverlayContainer.myCreateContainer is not a function. I followed your stackblitz example. Any ideas? – Imf

@gyozokudor I had this problem, it's caused by the directive getting an OverlayContainer instance rather than your custom class. It was solved by making my custom OverlayContainer class @Injectable(). – Honeymoon