diff --git a/src/lib/tooltip/tooltip.spec.ts b/src/lib/tooltip/tooltip.spec.ts index 5873f340f0e6..bfb852af3982 100644 --- a/src/lib/tooltip/tooltip.spec.ts +++ b/src/lib/tooltip/tooltip.spec.ts @@ -18,8 +18,10 @@ import {TooltipPosition, MdTooltip, MdTooltipModule, SCROLL_THROTTLE_MS} from '. import {OverlayContainer} from '../core'; import {Dir, LayoutDirection} from '../core/rtl/dir'; import {OverlayModule} from '../core/overlay/overlay-directives'; +import {Platform} from '../core/platform/platform'; import {Scrollable} from '../core/overlay/scroll/scrollable'; + const initialTooltipMessage = 'initial tooltip message'; describe('MdTooltip', () => { @@ -31,6 +33,7 @@ describe('MdTooltip', () => { imports: [MdTooltipModule.forRoot(), OverlayModule], declarations: [BasicTooltipDemo, ScrollableTooltipDemo, OnPushTooltipDemo], providers: [ + Platform, {provide: OverlayContainer, useFactory: () => { overlayContainerElement = document.createElement('div'); document.body.appendChild(overlayContainerElement); @@ -421,10 +424,10 @@ class BasicTooltipDemo {
+ [md-tooltip]="message" + [tooltip-position]="position"> + Button +
` }) class ScrollableTooltipDemo { diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts index 7b27abaa3968..fc621826beaf 100644 --- a/src/lib/tooltip/tooltip.ts +++ b/src/lib/tooltip/tooltip.ts @@ -15,6 +15,7 @@ import { NgZone, Optional, OnDestroy, + Renderer, OnInit, ChangeDetectorRef } from '@angular/core'; @@ -32,6 +33,7 @@ import {MdTooltipInvalidPositionError} from './tooltip-errors'; import {Observable} from 'rxjs/Observable'; import {Subject} from 'rxjs/Subject'; import {Dir} from '../core/rtl/dir'; +import {PlatformModule, Platform} from '../core/platform/index'; import 'rxjs/add/operator/first'; import {ScrollDispatcher} from '../core/overlay/scroll/scroll-dispatcher'; import {Subscription} from 'rxjs/Subscription'; @@ -55,8 +57,6 @@ export const SCROLL_THROTTLE_MS = 20; host: { '(longpress)': 'show()', '(touchend)': 'hide(' + TOUCHEND_HIDE_DELAY + ')', - '(mouseenter)': 'show()', - '(mouseleave)': 'hide()', }, exportAs: 'mdTooltip', }) @@ -129,12 +129,23 @@ export class MdTooltip implements OnInit, OnDestroy { get _matShowDelay() { return this.showDelay; } set _matShowDelay(v) { this.showDelay = v; } - constructor(private _overlay: Overlay, - private _scrollDispatcher: ScrollDispatcher, - private _elementRef: ElementRef, - private _viewContainerRef: ViewContainerRef, - private _ngZone: NgZone, - @Optional() private _dir: Dir) { } + constructor( + private _overlay: Overlay, + private _elementRef: ElementRef, + private _scrollDispatcher: ScrollDispatcher, + private _viewContainerRef: ViewContainerRef, + private _ngZone: NgZone, + private _renderer: Renderer, + private _platform: Platform, + @Optional() private _dir: Dir) { + + // The mouse events shouldn't be bound on iOS devices, because + // they can prevent the first tap from firing it's click event. + if (!_platform.IOS) { + _renderer.listen(_elementRef.nativeElement, 'mouseenter', () => this.show()); + _renderer.listen(_elementRef.nativeElement, 'mouseleave', () => this.hide()); + } + } ngOnInit() { // When a scroll on the page occurs, update the position in case this tooltip needs @@ -437,7 +448,7 @@ export class TooltipComponent { @NgModule({ - imports: [OverlayModule, CompatibilityModule], + imports: [OverlayModule, CompatibilityModule, PlatformModule], exports: [MdTooltip, TooltipComponent, CompatibilityModule], declarations: [MdTooltip, TooltipComponent], entryComponents: [TooltipComponent],