10

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));
  }
2
  • What's your use case for attaching it to a specific element?
    – adamdport
    Commented Mar 21, 2019 at 20:38
  • 1
    I have a dialog, the tooltip appears behind it (the tooltip trigger is placed on the dialog).
    – vlio20
    Commented Mar 21, 2019 at 20:40

1 Answer 1

16

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

7
  • 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.
    – vlio20
    Commented Mar 21, 2019 at 21:20
  • 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.
    – Marshal
    Commented Mar 21, 2019 at 22:28
  • 2
    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. Commented Apr 11, 2020 at 8:38
  • 2
    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.
    – Marshal
    Commented Apr 13, 2020 at 17:51
  • 1
    I get this error TypeError: this.cdkOverlayContainer.myCreateContainer is not a function. I followed your stackblitz example. Any ideas? Commented Aug 25, 2020 at 6:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.