title: Positioning cdk Overlay at mouse position
body: <p>I try to position the overlay with the top right corner at the mouse position. To visualize it, I will show you a graphic how it should be and what I got.</p>
  
  <p><a href="https://i.stack.imgur.com/MR6i7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MR6i7.png" alt="enter image description here"></a></p>
  
  <p>So to position the overlay with the top right corner at the mouse position, the width of overlay has to be subtracted from the event.clientX value (see below). BUT the total width has to be dynamically, depending on how wide the content in the overlay will be. That could differ over time. So How to get the exact value of the width of the overlay and position it afterwards? </p>
  
  <p>Button to open the Overlay:</p>
  
  <pre><code>&lt;button (click)="showTasks($event)"&gt;&lt;/button&gt;
  </code></pre>
  
  <p>Method which is called:</p>
  
  <pre><code>export class Component {
    constructor(private _tasksOverlay: OverlayService) {}
  
    showTasks(event) {
      this._tasksOverlay.open(OverlayComponent,event);
    }
  }
  </code></pre>
  
  <p>OverlayService:</p>
  
  <pre><code>@Injectable()
  export class ServerTaskOverlayService {
  
    private _config = new OverlayConfig({});
  
    constructor(private overlay: Overlay) {}
  
    open(comp:ComponentType&lt;any&gt;,event:MouseEvent) {
      // Here the width of the overlay should already be known
      this._config.positionStrategy = this.overlay.position().global().left(event.clientX+"px").top(event.clientY+"px");
  
      const overlayRef = this.overlay.create(this._config);
  
      const filePreviewPortal = new ComponentPortal(comp);
  
      overlayRef.attach(filePreviewPortal);
    }
  }
  </code></pre>