Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
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
2 changes: 1 addition & 1 deletion goldens/material/tooltip/index.api.md
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ export class MatTooltip implements OnDestroy, AfterViewInit {

// @public
export interface MatTooltipDefaultOptions {
detectHoverCapability?: boolean;
detectHoverCapability?: boolean | (() => boolean);
disableTooltipInteractivity?: boolean;
hideDelay: number;
position?: TooltipPosition;
Expand Down
32 changes: 23 additions & 9 deletions src/material/tooltip/tooltip.ts
Original file line number Diff line number Diff line change
Expand Up @@ -140,12 +140,23 @@ export interface MatTooltipDefaultOptions {
tooltipClass?: string | string[];

/**
* Whether the tooltip should use a media query to detect if the device is able to hover.
* Note that this may affect tests that run in a headless browser which reports that it's
* unable to hover. In such cases you may need to include an additional timeout, because
* the tooltip will fall back to treating the device as a touch screen.
* By default the tooltip attempts to detect whether the user's device is able to hover by
* consulting the `Platform` provider that was created a long time ago and is based on
* some data points that may not be entirely accurate anymore (e.g. user agent string and
* Android/iOS-specific APIs), however changing them will break existing users. You can use this
* config property to opt into a more modern detection mechanism.
*
* The supported values include:
*
* - `false` - Default value. Detection is based on the `Platform` provider.
* - `true` - The tooltip will use the `any-hover` media query for more accurate detection.
* Note that this may break existing unit tests running in a headless browser.
* - `() => boolean` - If the automatic detection doesn't work properly in your case (e.g. the
* `any-hover` media query isn't supported) and you're able to detect more accurately, you can
* pass in a function that will be used for detection instead. It should return `true` if the
* device **has the ability to hover**, or `false` if it cannot.
*/
detectHoverCapability?: boolean;
detectHoverCapability?: boolean | (() => boolean);
}

/**
Expand Down Expand Up @@ -855,6 +866,12 @@ export class MatTooltip implements OnDestroy, AfterViewInit {
}

private _isTouchPlatform(): boolean {
const detectHoverCapability = this._defaultOptions?.detectHoverCapability;

if (typeof detectHoverCapability === 'function') {
return !detectHoverCapability();
}

if (this._platform.IOS || this._platform.ANDROID) {
// If we detected iOS or Android, it's definitely supported.
return true;
Expand All @@ -863,10 +880,7 @@ export class MatTooltip implements OnDestroy, AfterViewInit {
return false;
}

return (
!!this._defaultOptions?.detectHoverCapability &&
this._mediaMatcher.matchMedia('(any-hover: none)').matches
);
return !!detectHoverCapability && this._mediaMatcher.matchMedia('(any-hover: none)').matches;
}

/** Disables the native browser gestures, based on how the tooltip has been configured. */
Expand Down
Loading