title: To open angular material tooltip above when the page is scrolled and avoid the tooltip getting hidden
body: <p>I have added 2 tables in stackblitz link, if I hover in first table(1st column) alst rows the tooltip opens above(<em><strong>expected</strong></em>) but when we scroll down the page and then hover on the last rows of 2nd table, the tooltip gets hidden in the bottom of the screen, as was not the case if I have a single table.
  I was expecting the tooltip to be opened above instead of getting hidden in the bottom. Please suggest.</p>
  <p><em><strong>Stacblitz link</strong></em></p>
  <p><a href="https://stackblitz.com/edit/angular-mat-tooltip-ctvigc?file=app%2Ftooltip-overview-example.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-mat-tooltip-ctvigc?file=app%2Ftooltip-overview-example.html</a></p>
  <p><strong>tooltip-overview-example.html</strong></p>
  <pre><code>&lt;ng-container matColumnDef=&quot;Column1&quot;&gt;
       &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Alert &lt;/th&gt;
  
       &lt;td mat-cell *matCellDef=&quot;let row; let i = index&quot; customToolTip [contentTemplate]=&quot;template&quot;&gt;
            &lt;span &gt;{{row.Column1}}&lt;/span&gt;
       &lt;!--TOOLTIP--&gt;
        &lt;ng-template #template&gt;
            &lt;div style=&quot;display: flex; flex-direction: column&quot;&gt;
               &lt;span&gt;{{row.conditionals | json}}&lt;/span&gt;
               &lt;button (click)=&quot;onClick(i)&quot;&gt;Click&lt;/button&gt;
            &lt;/div&gt;
        &lt;/ng-template&gt;
        &lt;/td&gt;
  
  &lt;/ng-container&gt;
  </code></pre>
  <p>Extended the Angular material TooltipComponent in CustomToolTipComponent</p>
  <p><strong>custom-tool-tip.component.ts</strong></p>
  <pre><code>import {
   Component,
   OnInit,
   OnDestroy,
   Input,
   TemplateRef
   } from &quot;@angular/core&quot;;
   import {TooltipComponent} from &quot;@angular/material/tooltip&quot;
   import { Observable, Subject } from &quot;rxjs&quot;;
  
  @Component({
   selector: &quot;app-custom-tool-tip&quot;,
   templateUrl: &quot;./custom-tool-tip.component.html&quot;,
   styleUrls: [&quot;./custom-tool-tip.component.css&quot;]
  })
  export class CustomToolTipComponent extends TooltipComponent {
  
   @Input() text: string;
   @Input() contentTemplate: TemplateRef&lt;any&gt;;
  
  }
  </code></pre>
  <p><strong>custom-tool-tip.component.html</strong></p>
  <pre><code>&lt;div&gt;
   &lt;div class=&quot;tooltip-conatiner&quot;&gt;
    &lt;ng-template #simpleText&gt;
    {{text}}
    &lt;/ng-template&gt;
    &lt;ng-container *ngTemplateOutlet=&quot;contentTemplate || simpleText&quot;&gt;
    &lt;/ng-container&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>tool-tip-renderer.directive.ts</strong></p>
  <pre><code>@Directive({
    selector: &quot;[customToolTip]&quot;
  })
  export class ToolTipRendererDirective {
  
  @Input() showToolTip: boolean = true;
  
  //If this is specified then specified text will be showin in the tooltip
   @Input(`customToolTip`) text: string;
  
  //If this is specified then specified template will be rendered in the tooltip
   @Input() contentTemplate: TemplateRef&lt;any&gt;;
  
  private _overlayRef: OverlayRef;
  private _tooltipInstance;
  private _mouseInTooltip: boolean = false;
  private _hasListeners: boolean = false;
  
  constructor(
   private _overlay: Overlay,
   private _overlayPositionBuilder: OverlayPositionBuilder,
   private _elementRef: ElementRef,
   private _r2: Renderer2
   ) {}
  
  
  ngOnInit() {
   if (!this.showToolTip) {
    return;
  }
  
  const positionStrategy = this._overlayPositionBuilder
    .flexibleConnectedTo(this._elementRef)
    .withPositions([
      {
        originX: &quot;center&quot;,
        originY: &quot;bottom&quot;,
        overlayX: &quot;center&quot;,
        overlayY: &quot;top&quot;,
        offsetY: -10
      }
    ]);
  
  this._overlayRef = this._overlay.create({ positionStrategy });
  }
  
  
  @HostListener(&quot;mouseenter&quot;)
  show(e) {
  if (this._overlayRef &amp;&amp; !this._overlayRef.hasAttached()) {
    //set tooltip instance
    this._tooltipInstance = this._overlayRef.attach(
      new ComponentPortal(CustomToolTipComponent)
    ).instance;
  
    //set CustomToolTipComponenet content/inputs
    this._tooltipInstance.text = this.text;
    this._tooltipInstance.contentTemplate = this.contentTemplate;
  
    //render tooltip
    this._tooltipInstance!.show(0);
  
    //sub to detach after hide anitmation is complete
    this._tooltipInstance
      .afterHidden()
      .pipe(take(1))
      .subscribe(() =&gt; {
        this._overlayRef.detach();
      });
    if (!this._hasListeners) {
      this._hasListeners = true;
      //attach mouseleave listener to detach when mouseleave on tooltip
      this._r2.listen(this._overlayRef.overlayElement, &quot;mouseleave&quot;, () =&gt; {
        //call hide function in this directive
        this._mouseInTooltip = false;
        this.hide();
      });
  
      this._r2.listen(this._overlayRef.overlayElement, &quot;mouseenter&quot;, () =&gt; {
        //call hide function in this directive
        this._mouseInTooltip = true;
      });
    }
  }
  }
  
  @HostListener(&quot;mouseleave&quot;)
  hide(buttonClicked = null) {
  if(buttonClicked)
    this._mouseInTooltip = false;
  setTimeout(() =&gt; {
    if (!this._mouseInTooltip) this._tooltipInstance!._onHide.next();
  }, 20);
  }
  }
  </code></pre>