Угловая подсказка, выходящая из области просмотра

Question

У меня есть динамически генерируемая всплывающая подсказка, где ширина и содержимое предоставляются компоненту с помощью @Input. Однако я не могу найти способ установить положение всплывающей подсказки, чтобы она оставалась внутри порта просмотра, но не над содержимым. Всякий раз, когда доступный контент находится на краю области просмотра, например, сверху / снизу / слева / справа, подсказка не отображается внутри области просмотра.

Я знаю, что мне нужно вычислить положение элемента наведения с помощью getBoundingClientRect (), но как мне установить положение таким образом, чтобы всплывающая подсказка не перекрывала скрытое содержимое.

Вот мой код:

app.component.html

<div style="background:red;">
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsu
  and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsu
  PageMaker including versions of Lorem Ipsu
  and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsu
</p>

<button awesomeTooltip="Hello World!"  image="https://placeimg.com/640/480/any">Hi there, check for a tooltip</button>
</div>

tooltip.component.html

   <img [src]="image" width= "300px" @tooltip>

tooltip.directive.ts

import { ComponentRef, Directive, ElementRef, HostListener, Input, OnInit } from '@angular/core';
import { Overlay, OverlayPositionBuilder, OverlayRef } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';

import { AwesomeTooltipComponent } from './tooltip.component';

@Directive({ selector: '[awesomeTooltip]' })
export class AwesomeTooltipDirective implements OnInit {

  @Input('awesomeTooltip') text = '';
  @Input('image') image = '';
  private overlayRef: OverlayRef;

  constructor(private overlay: Overlay,
              private overlayPositionBuilder: OverlayPositionBuilder,
              private elementRef: ElementRef) {
  }

  ngOnInit(): void {
    const positionStrategy = this.overlayPositionBuilder
      .flexibleConnectedTo(this.elementRef)
      .withPositions([{
        originX: 'center',
        originY: 'top',
        overlayX: 'center',
        overlayY: 'bottom',
        offsetY: -8,
      }]);

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

  @HostListener('mouseenter')
  show() {
    const tooltipRef: ComponentRef<AwesomeTooltipComponent>
      = this.overlayRef.attach(new ComponentPortal(AwesomeTooltipComponent));
    tooltipRef.instance.text = this.text;
    tooltipRef.instance.image = this.image;
  }

  @HostListener('mouseout')
  hide() {
    this.overlayRef.detach();
  }
}

Stackblitz ссылка здесь

В результате я вижу, что всплывающая подсказка должна находиться внутри области просмотра всякий раз, когда она выходит.