Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion src/demo-app/tooltip/tooltip-demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ <h1>Tooltip Demo</h1>
color="primary"
[mdTooltip]="message"
[mdTooltipPosition]="position"
[mdTooltipDisabled]="disabled"
[mdTooltipShowDelay]="showDelay"
[mdTooltipHideDelay]="hideDelay">
Mouse over to see the tooltip
Expand All @@ -25,12 +26,16 @@ <h1>Tooltip Demo</h1>
<md-radio-button value="after">After</md-radio-button>
</md-radio-group>
</p>

<p>
<strong>Message: </strong>
<md-input-container><input mdInput type="text" [(ngModel)]="message"></md-input-container>
</p>

<p>
<strong>Disabled: </strong>
<md-checkbox [(ngModel)]="disabled"></md-checkbox>
</p>

<p>
<strong>Show Delay (ms): </strong>
<md-input-container>
Expand Down
1 change: 1 addition & 0 deletions src/demo-app/tooltip/tooltip-demo.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {TooltipPosition} from '@angular/material';
export class TooltipDemo {
position: TooltipPosition = 'below';
message: string = 'Here is the tooltip';
disabled = false;
showDelay = 0;
hideDelay = 1000;
}
2 changes: 2 additions & 0 deletions src/lib/tooltip/tooltip.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,5 @@ delay of 1500ms. The longpress behavior requires HammerJS to be loaded on the pa
The tooltip can also be shown and hidden through the `show` and `hide` directive methods,
which both accept a number in milliseconds to delay before applying the display change.

To turn off the tooltip and prevent it from showing to the user, use the `mdTooltipDisabled` input flag.

17 changes: 17 additions & 0 deletions src/lib/tooltip/tooltip.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,23 @@ describe('MdTooltip', () => {
expect(overlayContainerElement.textContent).toContain(initialTooltipMessage);
}));

fit('should not show if disabled', fakeAsync(() => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it()

// Test that disabling the tooltip will not set the tooltip visible
tooltipDirective.disabled = true;
tooltipDirective.show();
fixture.detectChanges();
tick(0);
expect(tooltipDirective._isTooltipVisible()).toBe(false);

// Test to make sure setting disabled to false will show the tooltip
// Sanity check to make sure everything was correct before (detectChanges, tick)
tooltipDirective.disabled = false;
tooltipDirective.show();
fixture.detectChanges();
tick(0);
expect(tooltipDirective._isTooltipVisible()).toBe(true);
}));

it('should not show if hide is called before delay finishes', fakeAsync(() => {
expect(tooltipDirective._tooltipInstance).toBeUndefined();

Expand Down
16 changes: 14 additions & 2 deletions src/lib/tooltip/tooltip.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import {Platform} from '../core/platform/index';
import 'rxjs/add/operator/first';
import {ScrollDispatcher} from '../core/overlay/scroll/scroll-dispatcher';
import {Subscription} from 'rxjs/Subscription';
import {coerceBooleanProperty} from '../core/coercion/boolean-property';

export type TooltipPosition = 'left' | 'right' | 'above' | 'below' | 'before' | 'after';

Expand Down Expand Up @@ -62,6 +63,7 @@ export class MdTooltip implements OnInit, OnDestroy {
scrollSubscription: Subscription;

private _position: TooltipPosition = 'below';
private _disabled: boolean = false;

/** Allows the user to define the position of the tooltip relative to the parent element */
@Input('mdTooltipPosition')
Expand All @@ -78,6 +80,11 @@ export class MdTooltip implements OnInit, OnDestroy {
}
}

/** Disables the display of the tooltip. */
@Input('mdTooltipDisabled')
get disabled(): boolean { return this._disabled; }
set disabled(value) { this._disabled = coerceBooleanProperty(value); }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should setting disabled hide a tooltip that's already showing?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think thats a fair thing to assume, adding that in


/** @deprecated */
@Input('tooltip-position')
get _positionDeprecated(): TooltipPosition { return this._position; }
Expand Down Expand Up @@ -115,6 +122,11 @@ export class MdTooltip implements OnInit, OnDestroy {
get _matPosition() { return this.position; }
set _matPosition(v) { this.position = v; }

// Properties with `mat-` prefix for noconflict mode.
@Input('matTooltipDisabled')
get _matDisabled() { return this.disabled; }
set _matDisabled(v) { this.disabled = v; }

// Properties with `mat-` prefix for noconflict mode.
@Input('matTooltipHideDelay')
get _matHideDelay() { return this.hideDelay; }
Expand Down Expand Up @@ -168,7 +180,7 @@ export class MdTooltip implements OnInit, OnDestroy {

/** Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input */
show(delay: number = this.showDelay): void {
if (!this._message || !this._message.trim()) { return; }
if (this.disabled || !this._message || !this._message.trim()) { return; }

if (!this._tooltipInstance) {
this._createTooltip();
Expand All @@ -192,7 +204,7 @@ export class MdTooltip implements OnInit, OnDestroy {

/** Returns true if the tooltip is currently visible to the user */
_isTooltipVisible(): boolean {
return this._tooltipInstance && this._tooltipInstance.isVisible();
return !!this._tooltipInstance && this._tooltipInstance.isVisible();
}

/** Create the tooltip to display */
Expand Down