feat(scroll): hide tooltip when clipped by scrollable container

Author: andrewseguin

src/demo-app/tooltip/tooltip-demo.html

@@ -1,4 +1,4 @@
-<div class="demo-tooltip">
+<div class="demo-tooltip" cdk-scrollable>
   <h1>Tooltip Demo</h1>
 
   <p class="centered">
@@ -40,7 +40,7 @@ <h1>Tooltip Demo</h1>
   </p>
 
   <strong>Mouse over to</strong>
-  <button md-raised-button color="primary" (mouseenter)="tooltip.show()">
+  <button md-raised-button color="primary" (mouseenter)="tooltip1.show(); tooltip2.show()">
     Show tooltip
   </button>
   <button md-raised-button color="primary" (mouseenter)="tooltip.hide()">
@@ -50,3 +50,28 @@ <h1>Tooltip Demo</h1>
     Toggle tooltip
   </button>
 </div>
+
+<div class="scrolling-container" cdk-scrollable>
+  Scroll to see tooltip button.
+  <button #tooltip1="mdTooltip"
+          md-raised-button
+          color="primary"
+          [md-tooltip]="message"
+          [tooltip-position]="position"
+          [tooltipShowDelay]="showDelay"
+          [tooltipHideDelay]="hideDelay">
+    Mouse over to see the tooltip
+  </button>
+</div>
+<div class="scrolling-container" cdk-scrollable>
+  Scroll to see tooltip button.
+  <button #tooltip2="mdTooltip"
+          md-raised-button
+          color="primary"
+          [md-tooltip]="message"
+          [tooltip-position]="position"
+          [tooltipShowDelay]="showDelay"
+          [tooltipHideDelay]="hideDelay">
+    Mouse over to see the tooltip
+  </button>
+</div>

src/demo-app/tooltip/tooltip-demo.scss

@@ -6,3 +6,14 @@
     display: block;
   }
 }
+
+.scrolling-container {
+  margin: 300px;
+  height: 300px;
+  width: 300px;
+  overflow: auto;
+
+  button {
+    margin: 500px;
+  }
+}

src/lib/core/overlay/position/connected-position-strategy.ts

@@ -9,6 +9,14 @@ import {
 } from './connected-position';
 import {Subject} from 'rxjs/Subject';
 import {Observable} from 'rxjs/Observable';
+import {Scrollable} from '../scroll/scrollable';
+
+export type ElementBoundingPositions = {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
 
 /**
  * A strategy for positioning overlays. Using this strategy, an overlay is given an
@@ -26,6 +34,9 @@ export class ConnectedPositionStrategy implements PositionStrategy {
   /** The offset in pixels for the overlay connection point on the y-axis */
   private _offsetY: number = 0;
 
+  /** The Scrollable containers that may cause the overlay's connectedTo element to be clipped */
+  private scrollables: Scrollable[];
+
   /** Whether the we're dealing with an RTL context */
   get _isRtl() {
     return this._dir === 'rtl';
@@ -91,7 +102,8 @@ export class ConnectedPositionStrategy implements PositionStrategy {
       // If the overlay in the calculated position fits on-screen, put it there and we're done.
       if (overlayPoint.fitsInViewport) {
         this._setElementPosition(element, overlayPoint);
-        this._onPositionChange.next(new ConnectedOverlayPositionChange(pos));
+        const isClipped = this.isConnectedToElementClipped();
+        this._onPositionChange.next(new ConnectedOverlayPositionChange(pos, isClipped));
         return Promise.resolve(null);
       } else if (!fallbackPoint || fallbackPoint.visibleArea < overlayPoint.visibleArea) {
         fallbackPoint = overlayPoint;
@@ -105,6 +117,14 @@ export class ConnectedPositionStrategy implements PositionStrategy {
     return Promise.resolve(null);
   }
 
+  /**
+   * Sets the list of scrolling or resizing containers that host the connectedTo element so that
+   * on reposition we can evaluate if it has been clipped when repositioned.
+   */
+  withScrollableContainers(scrollables: Scrollable[]) {
+    this.scrollables = scrollables;
+  }
+
   withFallbackPosition(
       originPos: OriginConnectionPosition,
       overlayPos: OverlayConnectionPosition): this {
@@ -233,6 +253,16 @@ export class ConnectedPositionStrategy implements PositionStrategy {
     element.style.top = overlayPoint.y + 'px';
   }
 
+  private _getElementBounds(element: ElementRef): ElementBoundingPositions {
+    const boundingClientRect = element.nativeElement.getBoundingClientRect();
+    return {
+      top: boundingClientRect.top,
+      right: boundingClientRect.left + boundingClientRect.width,
+      bottom: boundingClientRect.top + boundingClientRect.height,
+      left: boundingClientRect.left
+    };
+  }
+
   /**
    * Subtracts the amount that an element is overflowing on an axis from it's length.
    */

src/lib/core/overlay/position/connected-position.ts

@@ -34,5 +34,6 @@ export class ConnectionPositionPair {
 
 /** The change event emitted by the strategy when a fallback position is used. */
 export class ConnectedOverlayPositionChange {
-  constructor(public connectionPair: ConnectionPositionPair) {}
+  constructor(public connectionPair: ConnectionPositionPair,
+              public isConnectedToElementClipped: boolean) {}
 }

src/lib/core/overlay/scroll/scroll-dispatcher.ts

@@ -1,9 +1,10 @@
-import {Injectable} from '@angular/core';
+import {Injectable, ElementRef} from '@angular/core';
 import {Scrollable} from './scrollable';
 import {Subject} from 'rxjs/Subject';
 import {Observable} from 'rxjs/Observable';
 import {Subscription} from 'rxjs/Subscription';
 import 'rxjs/add/observable/fromEvent';
+import 'rxjs/add/observable/combineLatest';
 
 
 /**
@@ -19,7 +20,7 @@ export class ScrollDispatcher {
    * Map of all the scrollable references that are registered with the service and their
    * scroll event subscriptions.
    */
-  scrollableReferences: WeakMap<Scrollable, Subscription> = new WeakMap();
+  scrollableReferences: Map<Scrollable, Subscription> = new Map();
 
   constructor() {
     // By default, notify a scroll event when the document is scrolled or the window is resized.
@@ -53,8 +54,34 @@ export class ScrollDispatcher {
     return this._scrolled.asObservable();
   }
 
+  /** Returns all registered Scrollables that contain the provided element. */
+  getScrollableContainers(elementRef: ElementRef): Scrollable[] {
+    const scrollingContainers: Scrollable[] = [];
+
+    this.scrollableReferences.forEach((subscription: Subscription, scrollable: Scrollable) => {
+      if (this.scrollableContainsElement(scrollable, elementRef)) {
+        scrollingContainers.push(scrollable);
+      }
+    });
+
+    return scrollingContainers;
+  }
+
+  /** Returns true if the element is contained within the provided Scrollable. */
+  scrollableContainsElement(scrollable: Scrollable, elementRef: ElementRef): boolean {
+    let element = elementRef.nativeElement;
+    let scrollableElement = scrollable.getElementRef().nativeElement;
+
+    // Traverse through the element parents until we reach null, checking if any of the elements
+    // are the scrollable's element.
+    do {
+      if (element == scrollableElement) { return true; }
+    } while (element = element.parentElement);
+  }
+
   /** Sends a notification that a scroll event has been fired. */
   _notify() {
     this._scrolled.next();
   }
 }
+

src/lib/core/overlay/scroll/scrollable.ts

@@ -1,5 +1,5 @@
 import {
-  Directive, ElementRef, OnInit, OnDestroy
+  Directive, ElementRef, OnInit, OnDestroy, Optional, SkipSelf
 } from '@angular/core';
 import {Observable} from 'rxjs/Observable';
 import {ScrollDispatcher} from './scroll-dispatcher';
@@ -15,7 +15,9 @@ import 'rxjs/add/observable/fromEvent';
   selector: '[cdk-scrollable]'
 })
 export class Scrollable implements OnInit, OnDestroy {
-  constructor(private _elementRef: ElementRef, private _scroll: ScrollDispatcher) {}
+  constructor(private _elementRef: ElementRef,
+              @SkipSelf() @Optional() private parentScrollable: Scrollable,
+              private _scroll: ScrollDispatcher) {}
 
   ngOnInit() {
     this._scroll.register(this);
@@ -29,4 +31,13 @@ export class Scrollable implements OnInit, OnDestroy {
   elementScrolled(): Observable<any> {
     return Observable.fromEvent(this._elementRef.nativeElement, 'scroll');
   }
+
+  getElementRef(): ElementRef {
+    return this._elementRef;
+  }
+
+  /** Returns this scrollable along with all the scrollables that this is contained within. */
+  getAllScrollables(): Scrollable[] {
+    return this.parentScrollable ? this.parentScrollable.getAllScrollables().concat(this) : [this];
+  }
 }

src/lib/tooltip/tooltip.ts

@@ -34,6 +34,7 @@ import {Dir} from '../core/rtl/dir';
 import {ScrollDispatcher} from '../core/overlay/scroll/scroll-dispatcher';
 import {OverlayPositionBuilder} from '../core/overlay/position/overlay-position-builder';
 import {ViewportRuler} from '../core/overlay/position/viewport-ruler';
+import {Scrollable} from '../core/overlay/scroll/scrollable';
 import 'rxjs/add/operator/first';
 
 export type TooltipPosition = 'left' | 'right' | 'above' | 'below' | 'before' | 'after';
@@ -112,7 +113,7 @@ export class MdTooltip implements OnInit, OnDestroy {
               private _elementRef: ElementRef,
               private _viewContainerRef: ViewContainerRef,
               private _ngZone: NgZone,
-              @Optional() private _dir: Dir) {}
+              @Optional() private _dir: Dir) { }
 
   ngOnInit() {
     // When a scroll on the page occurs, update the position in case this tooltip needs
@@ -179,7 +180,16 @@ export class MdTooltip implements OnInit, OnDestroy {
   private _createOverlay(): void {
     let origin = this._getOrigin();
     let position = this._getOverlayPosition();
+
+    // Create connected strategy that listens for scroll events to reposition. After position
+    // changes occur, check if the scrolling trigger has been clipped and close the tooltip.
     let strategy = this._overlay.position().connectedTo(this._elementRef, origin, position);
+    strategy.withScrollableContainers(
+        this._scrollDispatcher.getScrollableContainers(this._elementRef));
+    strategy.onPositionChange.subscribe(change => {
+      if (change.isConnectedToElementClipped) { this.hide(0); }
+    });
+
     let config = new OverlayState();
     config.positionStrategy = strategy;