Skip to content

Commit

Permalink
fix(tooltip): panel element blocks hover effects
Browse files Browse the repository at this point in the history
By default the overlay container always has pointer events disabled. Currently the tooltip component also has pointer events disabled. The only thing that has pointer events enabled is the overlay panel element.

This can be problematic because as soon as someone hovers of the overlay panel element, the pointer events & hover effects are going to the overlay panel element instead of the element that the tooltip just overlays.

Fixes angular#4691
  • Loading branch information
devversion committed Jul 5, 2017
1 parent b00f838 commit 1ab727b
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 4 deletions.
7 changes: 5 additions & 2 deletions src/lib/tooltip/tooltip.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,11 @@ $mat-tooltip-horizontal-padding: 8px;
$mat-tooltip-max-width: 250px;
$mat-tooltip-margin: 14px;

:host {
pointer-events: none;
.mat-tooltip-panel {
// The overlay reference updates the pointer-events style property directly on the HTMLElement
// depending on the state of the overlay. For tooltips the overlay panel should never enable
// pointer events. To overwrite the inline CSS from the overlay reference `!important` is needed.
pointer-events: none !important;
}

.mat-tooltip {
Expand Down
17 changes: 15 additions & 2 deletions src/lib/tooltip/tooltip.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,13 @@ import {
import {AnimationEvent} from '@angular/animations';
import {By} from '@angular/platform-browser';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {TooltipPosition, MdTooltip, MdTooltipModule, SCROLL_THROTTLE_MS} from './index';
import {Directionality, Direction} from '../core/bidi/index';
import {OverlayModule, Scrollable, OverlayContainer} from '../core/overlay/index';
import {Platform} from '../core/platform/platform';
import {dispatchFakeEvent} from '../core/testing/dispatch-events';

import {
TooltipPosition, MdTooltip, MdTooltipModule, SCROLL_THROTTLE_MS, TOOLTIP_PANEL_CLASS
} from './index';

const initialTooltipMessage = 'initial tooltip message';

Expand Down Expand Up @@ -115,6 +116,18 @@ describe('MdTooltip', () => {
expect(overlayContainerElement.textContent).toContain(initialTooltipMessage);
}));

it('should set a css class on the overlay panel element', fakeAsync(() => {
tooltipDirective.show();
fixture.detectChanges();
tick(0);

const overlayRef = tooltipDirective._overlayRef;

expect(overlayRef).not.toBeNull();
expect(overlayRef!.overlayElement.classList).toContain(TOOLTIP_PANEL_CLASS,
'Expected the overlay panel element to have the tooltip panel class set.');
}));

it('should not show if disabled', fakeAsync(() => {
// Test that disabling the tooltip will not set the tooltip visible
tooltipDirective.disabled = true;
Expand Down
4 changes: 4 additions & 0 deletions src/lib/tooltip/tooltip.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,9 @@ export const TOUCHEND_HIDE_DELAY = 1500;
/** Time in ms to throttle repositioning after scroll events. */
export const SCROLL_THROTTLE_MS = 20;

/** CSS class that will be attached to the overlay panel. */
export const TOOLTIP_PANEL_CLASS = 'mat-tooltip-panel';

/** Creates an error to be thrown if the user supplied an invalid tooltip position. */
export function getMdTooltipInvalidPositionError(position: string) {
return Error(`Tooltip position "${position}" is invalid.`);
Expand Down Expand Up @@ -264,6 +267,7 @@ export class MdTooltip implements OnDestroy {

config.direction = this._dir ? this._dir.value : 'ltr';
config.positionStrategy = strategy;
config.panelClass = TOOLTIP_PANEL_CLASS;
config.scrollStrategy = this._overlay.scrollStrategies.reposition({
scrollThrottle: SCROLL_THROTTLE_MS
});
Expand Down

0 comments on commit 1ab727b

Please sign in to comment.