diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 5378feda41cb..a9a090b8309a 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -36,6 +36,7 @@
/src/material/tabs/** @andrewseguin
/src/material/testing/** @andrewseguin
/src/material/toolbar/** @devversion
+/src/material/legacy-tooltip/** @andrewseguin
/src/material/tooltip/** @andrewseguin
/src/material/tree/** @jelbourn @andrewseguin
@@ -345,7 +346,7 @@
/tools/public_api_guard/material/table** @andrewseguin
/tools/public_api_guard/material/tabs** @andrewseguin
/tools/public_api_guard/material/toolbar** @devversion
-/tools/public_api_guard/material/tooltip** @andrewseguin
+/tools/public_api_guard/material/legacy-tooltip** @andrewseguin
/tools/public_api_guard/material/tree** @jelbourn @andrewseguin
/tools/public_api_guard/material/material** @andrewseguin
/tools/public_api_guard/google-maps/** @crisbeto
diff --git a/.ng-dev/commit-message.mts b/.ng-dev/commit-message.mts
index 4692d760128d..7c1479a6359f 100644
--- a/.ng-dev/commit-message.mts
+++ b/.ng-dev/commit-message.mts
@@ -107,6 +107,7 @@ export const commitMessage: CommitMessageConfig = {
'material/testing',
'material/theming',
'material/toolbar',
+ 'material/legacy-tooltip',
'material/tooltip',
'material/tree',
'youtube-player',
diff --git a/src/components-examples/material/tooltip/BUILD.bazel b/src/components-examples/material/tooltip/BUILD.bazel
index e84968f98639..2131036ef99a 100644
--- a/src/components-examples/material/tooltip/BUILD.bazel
+++ b/src/components-examples/material/tooltip/BUILD.bazel
@@ -19,9 +19,9 @@ ng_module(
"//src/material/button",
"//src/material/checkbox",
"//src/material/input",
+ "//src/material/legacy-tooltip",
+ "//src/material/legacy-tooltip/testing",
"//src/material/select",
- "//src/material/tooltip",
- "//src/material/tooltip/testing",
"@npm//@angular/forms",
"@npm//@angular/platform-browser",
"@npm//@angular/platform-browser-dynamic",
@@ -45,8 +45,8 @@ ng_test_library(
":tooltip",
"//src/cdk/testing",
"//src/cdk/testing/testbed",
- "//src/material/tooltip",
- "//src/material/tooltip/testing",
+ "//src/material/legacy-tooltip",
+ "//src/material/legacy-tooltip/testing",
"@npm//@angular/platform-browser",
"@npm//@angular/platform-browser-dynamic",
],
diff --git a/src/components-examples/material/tooltip/index.ts b/src/components-examples/material/tooltip/index.ts
index 5cd2faaf2334..fc85892ba2ed 100644
--- a/src/components-examples/material/tooltip/index.ts
+++ b/src/components-examples/material/tooltip/index.ts
@@ -6,7 +6,7 @@ import {MatButtonModule} from '@angular/material/button';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatInputModule} from '@angular/material/input';
import {MatSelectModule} from '@angular/material/select';
-import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
import {TooltipAutoHideExample} from './tooltip-auto-hide/tooltip-auto-hide-example';
import {TooltipCustomClassExample} from './tooltip-custom-class/tooltip-custom-class-example';
import {TooltipDelayExample} from './tooltip-delay/tooltip-delay-example';
@@ -51,7 +51,7 @@ const EXAMPLES = [
MatCheckboxModule,
MatInputModule,
MatSelectModule,
- MatTooltipModule,
+ MatLegacyTooltipModule,
ReactiveFormsModule,
ScrollingModule, // Required for the auto-scrolling example
],
diff --git a/src/components-examples/material/tooltip/tooltip-auto-hide/tooltip-auto-hide-example.ts b/src/components-examples/material/tooltip/tooltip-auto-hide/tooltip-auto-hide-example.ts
index d5c7c9f3703a..dff337a47fe7 100644
--- a/src/components-examples/material/tooltip/tooltip-auto-hide/tooltip-auto-hide-example.ts
+++ b/src/components-examples/material/tooltip/tooltip-auto-hide/tooltip-auto-hide-example.ts
@@ -1,6 +1,6 @@
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
-import {TooltipPosition} from '@angular/material/tooltip';
+import {TooltipPosition} from '@angular/material/legacy-tooltip';
/**
* @title Tooltip that demonstrates auto-hiding when it clips out of its scrolling container.
diff --git a/src/components-examples/material/tooltip/tooltip-harness/tooltip-harness-example.spec.ts b/src/components-examples/material/tooltip/tooltip-harness/tooltip-harness-example.spec.ts
index b8fed047ee6c..085bef405726 100644
--- a/src/components-examples/material/tooltip/tooltip-harness/tooltip-harness-example.spec.ts
+++ b/src/components-examples/material/tooltip/tooltip-harness/tooltip-harness-example.spec.ts
@@ -1,8 +1,8 @@
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
-import {MatTooltipHarness} from '@angular/material/tooltip/testing';
+import {MatLegacyTooltipHarness} from '@angular/material/legacy-tooltip/testing';
import {HarnessLoader} from '@angular/cdk/testing';
-import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
import {TooltipHarnessExample} from './tooltip-harness-example';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
@@ -12,7 +12,7 @@ describe('TooltipHarnessExample', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- imports: [MatTooltipModule, NoopAnimationsModule],
+ imports: [MatLegacyTooltipModule, NoopAnimationsModule],
declarations: [TooltipHarnessExample],
}).compileComponents();
fixture = TestBed.createComponent(TooltipHarnessExample);
@@ -21,19 +21,19 @@ describe('TooltipHarnessExample', () => {
});
it('should load all tooltip harnesses', async () => {
- const tooltips = await loader.getAllHarnesses(MatTooltipHarness);
+ const tooltips = await loader.getAllHarnesses(MatLegacyTooltipHarness);
expect(tooltips.length).toBe(2);
});
it('should be able to show a tooltip', async () => {
- const tooltip = await loader.getHarness(MatTooltipHarness.with({selector: '#one'}));
+ const tooltip = await loader.getHarness(MatLegacyTooltipHarness.with({selector: '#one'}));
expect(await tooltip.isOpen()).toBe(false);
await tooltip.show();
expect(await tooltip.isOpen()).toBe(true);
});
it('should be able to hide a tooltip', async () => {
- const tooltip = await loader.getHarness(MatTooltipHarness.with({selector: '#one'}));
+ const tooltip = await loader.getHarness(MatLegacyTooltipHarness.with({selector: '#one'}));
expect(await tooltip.isOpen()).toBe(false);
await tooltip.show();
expect(await tooltip.isOpen()).toBe(true);
@@ -42,13 +42,13 @@ describe('TooltipHarnessExample', () => {
});
it('should be able to get the text of a tooltip', async () => {
- const tooltip = await loader.getHarness(MatTooltipHarness.with({selector: '#one'}));
+ const tooltip = await loader.getHarness(MatLegacyTooltipHarness.with({selector: '#one'}));
await tooltip.show();
expect(await tooltip.getTooltipText()).toBe('Tooltip message');
});
it('should return empty when getting the tooltip text while closed', async () => {
- const tooltip = await loader.getHarness(MatTooltipHarness.with({selector: '#one'}));
+ const tooltip = await loader.getHarness(MatLegacyTooltipHarness.with({selector: '#one'}));
expect(await tooltip.getTooltipText()).toBe('');
});
});
diff --git a/src/components-examples/material/tooltip/tooltip-modified-defaults/tooltip-modified-defaults-example.ts b/src/components-examples/material/tooltip/tooltip-modified-defaults/tooltip-modified-defaults-example.ts
index 5e068aa35380..c23a56fdc1cd 100644
--- a/src/components-examples/material/tooltip/tooltip-modified-defaults/tooltip-modified-defaults-example.ts
+++ b/src/components-examples/material/tooltip/tooltip-modified-defaults/tooltip-modified-defaults-example.ts
@@ -1,5 +1,8 @@
import {Component} from '@angular/core';
-import {MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions} from '@angular/material/tooltip';
+import {
+ MAT_TOOLTIP_DEFAULT_OPTIONS,
+ MatTooltipDefaultOptions,
+} from '@angular/material/legacy-tooltip';
/** Custom options the configure the tooltip's default show/hide delays. */
export const myCustomTooltipDefaults: MatTooltipDefaultOptions = {
diff --git a/src/components-examples/material/tooltip/tooltip-position/tooltip-position-example.ts b/src/components-examples/material/tooltip/tooltip-position/tooltip-position-example.ts
index 6f0a05cd7082..8587a919baaf 100644
--- a/src/components-examples/material/tooltip/tooltip-position/tooltip-position-example.ts
+++ b/src/components-examples/material/tooltip/tooltip-position/tooltip-position-example.ts
@@ -1,6 +1,6 @@
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
-import {TooltipPosition} from '@angular/material/tooltip';
+import {TooltipPosition} from '@angular/material/legacy-tooltip';
/**
* @title Tooltip with a custom position
diff --git a/src/dev-app/mdc-tooltip/BUILD.bazel b/src/dev-app/mdc-tooltip/BUILD.bazel
index c570eb4c2e48..065a327c13d0 100644
--- a/src/dev-app/mdc-tooltip/BUILD.bazel
+++ b/src/dev-app/mdc-tooltip/BUILD.bazel
@@ -14,7 +14,7 @@ ng_module(
"//src/material-experimental/mdc-form-field",
"//src/material-experimental/mdc-input",
"//src/material-experimental/mdc-select",
- "//src/material-experimental/mdc-tooltip",
+ "//src/material/tooltip",
"@npm//@angular/common",
"@npm//@angular/forms",
],
diff --git a/src/dev-app/mdc-tooltip/mdc-tooltip-demo.ts b/src/dev-app/mdc-tooltip/mdc-tooltip-demo.ts
index 3f2699f2588a..d0a627526791 100644
--- a/src/dev-app/mdc-tooltip/mdc-tooltip-demo.ts
+++ b/src/dev-app/mdc-tooltip/mdc-tooltip-demo.ts
@@ -8,7 +8,7 @@
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
-import {TooltipPosition, MatTooltipModule} from '@angular/material-experimental/mdc-tooltip';
+import {TooltipPosition, MatTooltipModule} from '@angular/material/tooltip';
import {CommonModule} from '@angular/common';
import {MatButtonModule} from '@angular/material-experimental/mdc-button';
import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
diff --git a/src/material-experimental/_index.scss b/src/material-experimental/_index.scss
index 7553d674a00c..9a06f46f5433 100644
--- a/src/material-experimental/_index.scss
+++ b/src/material-experimental/_index.scss
@@ -64,8 +64,6 @@
mdc-table-density, mdc-table-theme;
@forward './mdc-tabs/tabs-theme' as mdc-tabs-* show mdc-tabs-color, mdc-tabs-typography,
mdc-tabs-density, mdc-tabs-theme;
-@forward './mdc-tooltip/tooltip-theme' as mdc-tooltip-* show mdc-tooltip-color,
- mdc-tooltip-typography, mdc-tooltip-density, mdc-tooltip-theme;
// Additional public APIs for individual components
@forward './mdc-dialog/dialog-legacy-padding' as mdc-dialog-* show mdc-dialog-legacy-padding;
diff --git a/src/material-experimental/config.bzl b/src/material-experimental/config.bzl
index ae16ffeffd1c..d008dc158ca8 100644
--- a/src/material-experimental/config.bzl
+++ b/src/material-experimental/config.bzl
@@ -40,8 +40,6 @@ entryPoints = [
"mdc-table/testing",
"mdc-tabs",
"mdc-tabs/testing",
- "mdc-tooltip",
- "mdc-tooltip/testing",
"menubar",
"popover-edit",
"selection",
diff --git a/src/material-experimental/mdc-core/color/_all-color.import.scss b/src/material-experimental/mdc-core/color/_all-color.import.scss
index 3d26f37ee1dd..e3a21e5d70ab 100644
--- a/src/material-experimental/mdc-core/color/_all-color.import.scss
+++ b/src/material-experimental/mdc-core/color/_all-color.import.scss
@@ -74,7 +74,6 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde
@forward '../../mdc-list/list-option-theme' as mat-mdc-*;
@forward '../../mdc-list/list-theme' as mat-mdc-list-*;
@forward '../../mdc-menu/menu-theme' as mat-mdc-menu-*;
-@forward '../../mdc-tooltip/tooltip-theme' as mat-mdc-tooltip-*;
@forward '../../mdc-paginator/paginator-theme' as mat-mdc-paginator-*;
@forward '../../mdc-progress-bar/progress-bar-theme' as mat-mdc-progress-bar-*;
@forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*;
diff --git a/src/material-experimental/mdc-core/density/_all-density.import.scss b/src/material-experimental/mdc-core/density/_all-density.import.scss
index d8a211639531..14ed02a5f7ae 100644
--- a/src/material-experimental/mdc-core/density/_all-density.import.scss
+++ b/src/material-experimental/mdc-core/density/_all-density.import.scss
@@ -74,7 +74,6 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde
@forward '../../mdc-list/list-option-theme' as mat-mdc-*;
@forward '../../mdc-list/list-theme' as mat-mdc-list-*;
@forward '../../mdc-menu/menu-theme' as mat-mdc-menu-*;
-@forward '../../mdc-tooltip/tooltip-theme' as mat-mdc-tooltip-*;
@forward '../../mdc-paginator/paginator-theme' as mat-mdc-paginator-*;
@forward '../../mdc-progress-bar/progress-bar-theme' as mat-mdc-progress-bar-*;
@forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*;
diff --git a/src/material-experimental/mdc-core/theming/BUILD.bazel b/src/material-experimental/mdc-core/theming/BUILD.bazel
index 635c56edefe1..c97ef27be891 100644
--- a/src/material-experimental/mdc-core/theming/BUILD.bazel
+++ b/src/material-experimental/mdc-core/theming/BUILD.bazel
@@ -40,8 +40,8 @@ sass_library(
"//src/material-experimental/mdc-snack-bar:mdc_snack_bar_scss_lib",
"//src/material-experimental/mdc-table:mdc_table_scss_lib",
"//src/material-experimental/mdc-tabs:mdc_tabs_scss_lib",
- "//src/material-experimental/mdc-tooltip:mdc_tooltip_scss_lib",
"//src/material/card:card_scss_lib",
+ "//src/material/tooltip:tooltip_scss_lib",
],
)
diff --git a/src/material-experimental/mdc-core/theming/_all-theme.import.scss b/src/material-experimental/mdc-core/theming/_all-theme.import.scss
index b8b560336119..c2f162535f04 100644
--- a/src/material-experimental/mdc-core/theming/_all-theme.import.scss
+++ b/src/material-experimental/mdc-core/theming/_all-theme.import.scss
@@ -74,7 +74,6 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde
@forward '../../mdc-list/list-option-theme' as mat-mdc-*;
@forward '../../mdc-list/list-theme' as mat-mdc-list-*;
@forward '../../mdc-menu/menu-theme' as mat-mdc-menu-*;
-@forward '../../mdc-tooltip/tooltip-theme' as mat-mdc-tooltip-*;
@forward '../../mdc-paginator/paginator-theme' as mat-mdc-paginator-*;
@forward '../../mdc-progress-bar/progress-bar-theme' as mat-mdc-progress-bar-*;
@forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*;
@@ -99,7 +98,6 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde
@import '../../mdc-snack-bar/snack-bar-theme';
@import '../../mdc-tabs/tabs-theme';
@import '../../mdc-table/table-theme';
-@import '../../mdc-tooltip/tooltip-theme';
@import '../../mdc-paginator/paginator-theme';
@import '../../mdc-progress-bar/progress-bar-theme';
@import '../../mdc-progress-spinner/progress-spinner-theme';
diff --git a/src/material-experimental/mdc-core/theming/_all-theme.scss b/src/material-experimental/mdc-core/theming/_all-theme.scss
index f67d81f20f4b..b098e0e9a62b 100644
--- a/src/material-experimental/mdc-core/theming/_all-theme.scss
+++ b/src/material-experimental/mdc-core/theming/_all-theme.scss
@@ -17,7 +17,6 @@
@use '../../mdc-snack-bar/snack-bar-theme';
@use '../../mdc-tabs/tabs-theme';
@use '../../mdc-table/table-theme';
-@use '../../mdc-tooltip/tooltip-theme';
@use '../../mdc-paginator/paginator-theme';
@use '../../mdc-progress-bar/progress-bar-theme';
@use '../../mdc-progress-spinner/progress-spinner-theme';
@@ -50,7 +49,7 @@
@include form-field-theme.theme($theme-or-color-config);
@include input-theme.theme($theme-or-color-config);
@include tabs-theme.theme($theme-or-color-config);
- @include tooltip-theme.theme($theme-or-color-config);
+ @include mat.tooltip-theme($theme-or-color-config);
}
}
diff --git a/src/material-experimental/mdc-core/typography/_all-typography.import.scss b/src/material-experimental/mdc-core/typography/_all-typography.import.scss
index 0d8b7856572f..79bc57154beb 100644
--- a/src/material-experimental/mdc-core/typography/_all-typography.import.scss
+++ b/src/material-experimental/mdc-core/typography/_all-typography.import.scss
@@ -74,7 +74,6 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde
@forward '../../mdc-list/list-option-theme' as mat-mdc-*;
@forward '../../mdc-list/list-theme' as mat-mdc-list-*;
@forward '../../mdc-menu/menu-theme' as mat-mdc-menu-*;
-@forward '../../mdc-tooltip/tooltip-theme' as mat-mdc-tooltip-*;
@forward '../../mdc-paginator/paginator-theme' as mat-mdc-paginator-*;
@forward '../../mdc-progress-bar/progress-bar-theme' as mat-mdc-progress-bar-*;
@forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*;
diff --git a/src/material-experimental/mdc-paginator/BUILD.bazel b/src/material-experimental/mdc-paginator/BUILD.bazel
index 286221e5fcc4..105b3854a3cf 100644
--- a/src/material-experimental/mdc-paginator/BUILD.bazel
+++ b/src/material-experimental/mdc-paginator/BUILD.bazel
@@ -19,8 +19,8 @@ ng_module(
deps = [
"//src/material-experimental/mdc-button",
"//src/material-experimental/mdc-select",
- "//src/material-experimental/mdc-tooltip",
"//src/material/paginator",
+ "//src/material/tooltip",
"@npm//@angular/common",
"@npm//@angular/core",
"@npm//@angular/forms", # TODO(jelbourn): transitive dep via generated code
diff --git a/src/material-experimental/mdc-paginator/module.ts b/src/material-experimental/mdc-paginator/module.ts
index 7840912aa54c..43770112b595 100644
--- a/src/material-experimental/mdc-paginator/module.ts
+++ b/src/material-experimental/mdc-paginator/module.ts
@@ -11,7 +11,7 @@ import {NgModule} from '@angular/core';
import {MAT_PAGINATOR_INTL_PROVIDER} from '@angular/material/paginator';
import {MatButtonModule} from '@angular/material-experimental/mdc-button';
import {MatSelectModule} from '@angular/material-experimental/mdc-select';
-import {MatTooltipModule} from '@angular/material-experimental/mdc-tooltip';
+import {MatTooltipModule} from '@angular/material/tooltip';
import {MatPaginator} from './paginator';
@NgModule({
diff --git a/src/material-experimental/mdc-tooltip/BUILD.bazel b/src/material-experimental/mdc-tooltip/BUILD.bazel
deleted file mode 100644
index c99248aaccac..000000000000
--- a/src/material-experimental/mdc-tooltip/BUILD.bazel
+++ /dev/null
@@ -1,76 +0,0 @@
-load(
- "//tools:defaults.bzl",
- "ng_module",
- "ng_test_library",
- "ng_web_test_suite",
- "sass_binary",
- "sass_library",
-)
-
-package(default_visibility = ["//visibility:public"])
-
-ng_module(
- name = "mdc-tooltip",
- srcs = glob(
- ["**/*.ts"],
- exclude = [
- "**/*.spec.ts",
- ],
- ),
- assets = [
- ":tooltip_scss",
- ] + glob(["**/*.html"]),
- deps = [
- "//src/material-experimental/mdc-core",
- "//src/material/tooltip",
- "@npm//@material/tooltip",
- ],
-)
-
-sass_library(
- name = "mdc_tooltip_scss_lib",
- srcs = glob(["**/_*.scss"]),
- deps = [
- "//:mdc_sass_lib",
- "//src/material:sass_lib",
- "//src/material/core:core_scss_lib",
- ],
-)
-
-sass_binary(
- name = "tooltip_scss",
- src = "tooltip.scss",
- deps = [
- "//:mdc_sass_lib",
- "//src/material/core:core_scss_lib",
- ],
-)
-
-ng_test_library(
- name = "tooltip_tests_lib",
- srcs = glob(
- ["**/*.spec.ts"],
- exclude = [
- "**/*.e2e.spec.ts",
- ],
- ),
- deps = [
- ":mdc-tooltip",
- "//src/cdk/a11y",
- "//src/cdk/bidi",
- "//src/cdk/keycodes",
- "//src/cdk/overlay",
- "//src/cdk/platform",
- "//src/cdk/testing/private",
- "@npm//@angular/animations",
- "@npm//@angular/platform-browser",
- "@npm//rxjs",
- ],
-)
-
-ng_web_test_suite(
- name = "unit_tests",
- deps = [
- ":tooltip_tests_lib",
- ],
-)
diff --git a/src/material-experimental/mdc-tooltip/README.md b/src/material-experimental/mdc-tooltip/README.md
deleted file mode 100644
index d943f438fcea..000000000000
--- a/src/material-experimental/mdc-tooltip/README.md
+++ /dev/null
@@ -1,87 +0,0 @@
-This is prototype of an alternate version of `MatTooltip` built on top of
-[MDC Web](https://github.com/material-components/material-components-web). It demonstrates how
-Angular Material could use MDC Web under the hood while still exposing the same API Angular users as
-the existing `MatTooltip`. This component is experimental and should not be used in production.
-
-## How to use
-Assuming your application is already up and running using Angular Material, you can add this
-component by following these steps:
-
-1. Install Angular Material Experimental & MDC WEB:
-
- ```bash
- npm i material-components-web @angular/material-experimental
- ```
-
-2. In your `angular.json`, make sure `node_modules/` is listed as a Sass include path. This is
- needed for the Sass compiler to be able to find the MDC Web Sass files.
-
- ```json
- ...
- "styles": [
- "src/styles.scss"
- ],
- "stylePreprocessorOptions": {
- "includePaths": [
- "node_modules/"
- ]
- },
- ...
- ```
-
-3. Import the experimental `MatTooltipModule` and add it to the module that declares your
- component:
-
- ```ts
- import {MatTooltipModule} from '@angular/material-experimental/mdc-tooltip';
-
- @NgModule({
- declarations: [MyComponent],
- imports: [MatTooltipModule],
- })
- export class MyModule {}
- ```
-
-4. Use `matTooltip` in your component's template, just like you would the normal
- `matTooltip`:
-
- ```html
-
- ```
-
-5. Add the theme and typography mixins to your Sass. (There is currently no pre-built CSS option for
- the experimental `matTooltip`):
-
- ```scss
- @use '@angular/material' as mat;
- @use '@angular/material-experimental' as mat-experimental;
-
- $my-primary: mat.define-palette(mat.$indigo-palette);
- $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
- $my-theme: mat.define-light-theme((
- color: (
- primary: $my-primary,
- accent: $my-accent
- )
- ));
-
- @include mat-experimental.mdc-tooltip-theme($my-theme);
- @include mat-experimental.mdc-tooltip-typography($my-theme);
- ```
-
-## API differences
-There are no API differences between the experimental and standard `matTooltip`.
-
-## Replacing the standard tooltip in an existing app
-Because the experimental API mirrors the API for the standard tooltip, it can easily be swapped in
-by just changing the import paths. There is currently no schematic for this, but you can run the
-following string replace across your TypeScript files:
-
-```bash
-grep -lr --include="*.ts" --exclude-dir="node_modules" \
- --exclude="*.d.ts" "['\"]@angular/material/tooltip['\"]" | xargs sed -i \
- "s/['\"]@angular\/material\/tooltip['\"]/'@angular\/material-experimental\/mdc-tooltip'/g"
-```
-
-CSS styles and tests that depend on implementation details of `matTooltip` (such as getting
-elements from the template by class name) will need to be manually updated.
diff --git a/src/material-experimental/mdc-tooltip/_tooltip-theme.import.scss b/src/material-experimental/mdc-tooltip/_tooltip-theme.import.scss
deleted file mode 100644
index 2bb4d09f26a3..000000000000
--- a/src/material-experimental/mdc-tooltip/_tooltip-theme.import.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@forward 'tooltip-theme' as mat-mdc-tooltip-*;
-
diff --git a/src/material-experimental/mdc-tooltip/_tooltip-theme.scss b/src/material-experimental/mdc-tooltip/_tooltip-theme.scss
deleted file mode 100644
index 4e4e5f8ee49c..000000000000
--- a/src/material-experimental/mdc-tooltip/_tooltip-theme.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '@material/tooltip/tooltip';
-@use '@material/tooltip' as tooltip-theme;
-
-
-@mixin color($config-or-theme) {
- $config: mat.get-color-config($config-or-theme);
- @include mat.private-using-mdc-theme($config) {
- @include tooltip.core-styles($query: mat.$private-mdc-theme-styles-query);
- // We are defining our own tooltip background color because of concerns
- // surrounding the 0.6 background color opacity of the MDC tooltip styles.
- @include tooltip-theme.fill-color(
- map.get(mat.$light-theme-background-palette, tooltip)
- );
- }
-}
-
-@mixin typography($config-or-theme) {
- $config: mat.private-typography-to-2018-config(
- mat.get-typography-config($config-or-theme));
- @include mat.private-using-mdc-typography($config) {
- @include tooltip.core-styles($query: mat.$private-mdc-typography-styles-query);
- }
-}
-
-@mixin density($config-or-theme) {
- $density-scale: mat.get-density-config($config-or-theme);
-}
-
-@mixin theme($theme-or-color-config) {
- $theme: mat.private-legacy-get-theme($theme-or-color-config);
- @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-tooltip') {
- $color: mat.get-color-config($theme);
- $density: mat.get-density-config($theme);
- $typography: mat.get-typography-config($theme);
-
- @if $color != null {
- @include color($color);
- }
- @if $density != null {
- @include density($density);
- }
- @if $typography != null {
- @include typography($typography);
- }
- }
-}
diff --git a/src/material-experimental/mdc-tooltip/testing/tooltip-harness.spec.ts b/src/material-experimental/mdc-tooltip/testing/tooltip-harness.spec.ts
deleted file mode 100644
index 335c0a0a4c7d..000000000000
--- a/src/material-experimental/mdc-tooltip/testing/tooltip-harness.spec.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import {MatTooltipModule} from '@angular/material-experimental/mdc-tooltip';
-import {runHarnessTests} from '@angular/material/tooltip/testing/shared.spec';
-import {MatTooltipHarness} from './index';
-
-describe('MDC-based MatTooltipHarness', () => {
- runHarnessTests(MatTooltipModule, MatTooltipHarness as any);
-});
diff --git a/src/material-experimental/mdc-tooltip/testing/tooltip-harness.ts b/src/material-experimental/mdc-tooltip/testing/tooltip-harness.ts
deleted file mode 100644
index 5efb09f5c1d4..000000000000
--- a/src/material-experimental/mdc-tooltip/testing/tooltip-harness.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import {ComponentHarnessConstructor, HarnessPredicate} from '@angular/cdk/testing';
-import {_MatTooltipHarnessBase, TooltipHarnessFilters} from '@angular/material/tooltip/testing';
-
-/** Harness for interacting with a standard mat-tooltip in tests. */
-export class MatTooltipHarness extends _MatTooltipHarnessBase {
- protected _optionalPanel =
- this.documentRootLocatorFactory().locatorForOptional('.mat-mdc-tooltip');
- static hostSelector = '.mat-mdc-tooltip-trigger';
- protected _hiddenClass = 'mat-mdc-tooltip-hide';
- protected _showAnimationName = 'mat-mdc-tooltip-show';
- protected _hideAnimationName = 'mat-mdc-tooltip-hide';
-
- /**
- * Gets a `HarnessPredicate` that can be used to search for a tooltip trigger with specific
- * attributes.
- * @param options Options for narrowing the search.
- * @return a `HarnessPredicate` configured with the given options.
- */
- static with(
- this: ComponentHarnessConstructor,
- options: TooltipHarnessFilters = {},
- ): HarnessPredicate {
- return new HarnessPredicate(this, options);
- }
-}
diff --git a/src/material-experimental/mdc-tooltip/tooltip.html b/src/material-experimental/mdc-tooltip/tooltip.html
deleted file mode 100644
index 28b374a88f8a..000000000000
--- a/src/material-experimental/mdc-tooltip/tooltip.html
+++ /dev/null
@@ -1,8 +0,0 @@
-
diff --git a/src/material-experimental/mdc-tooltip/tooltip.scss b/src/material-experimental/mdc-tooltip/tooltip.scss
deleted file mode 100644
index 5901072294cb..000000000000
--- a/src/material-experimental/mdc-tooltip/tooltip.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@use '@material/tooltip/tooltip';
-
-// Only include the structural styles, because we handle the animation ourselves.
-@include tooltip.core-styles($query: structure);
-
-.mat-mdc-tooltip {
- // We don't use MDC's positioning so this has to be relative.
- position: relative;
- transform: scale(0);
-
- // Increases the area of the tooltip so the user's pointer can go from the trigger directly to it.
- &::before {
- $offset: -8px;
- content: '';
- top: $offset;
- right: $offset;
- bottom: $offset;
- left: $offset;
- z-index: -1;
- position: absolute;
- }
-
- &._mat-animation-noopable {
- animation: none;
- transform: scale(1);
- }
-}
-
-.mat-mdc-tooltip-panel-non-interactive {
- pointer-events: none;
-}
-
-// TODO(crisbeto): we may be able to use MDC directly for these animations.
-
-@keyframes mat-mdc-tooltip-show {
- 0% {
- opacity: 0;
- transform: scale(0.8);
- }
-
- 100% {
- opacity: 1;
- transform: scale(1);
- }
-}
-
-@keyframes mat-mdc-tooltip-hide {
- 0% {
- opacity: 1;
- transform: scale(1);
- }
-
- 100% {
- opacity: 0;
- transform: scale(0.8);
- }
-}
-
-.mat-mdc-tooltip-show {
- animation: mat-mdc-tooltip-show 150ms cubic-bezier(0, 0, 0.2, 1) forwards;
-}
-
-.mat-mdc-tooltip-hide {
- animation: mat-mdc-tooltip-hide 75ms cubic-bezier(0.4, 0, 1, 1) forwards;
-}
diff --git a/src/material/_index.scss b/src/material/_index.scss
index 603daefd375a..26eb7d42a927 100644
--- a/src/material/_index.scss
+++ b/src/material/_index.scss
@@ -112,6 +112,8 @@
@forward './tabs/tabs-theme' as tabs-* show tabs-theme, tabs-color, tabs-typography;
@forward './toolbar/toolbar-theme' as toolbar-* show toolbar-theme, toolbar-color,
toolbar-typography;
+@forward './legacy-tooltip/tooltip-theme' as legacy-tooltip-* show legacy-tooltip-theme,
+ legacy-tooltip-color, legacy-tooltip-typography;
@forward './tooltip/tooltip-theme' as tooltip-* show tooltip-theme, tooltip-color,
tooltip-typography;
@forward './tree/tree-theme' as tree-* show tree-theme, tree-color, tree-typography;
diff --git a/src/material/_theming.scss b/src/material/_theming.scss
index 9cd3a31765a0..72a1bd6fd1f3 100644
--- a/src/material/_theming.scss
+++ b/src/material/_theming.scss
@@ -39,5 +39,5 @@
@forward './table/table-legacy-index';
@forward './tabs/tabs-legacy-index';
@forward './toolbar/toolbar-legacy-index';
-@forward './tooltip/tooltip-legacy-index';
+@forward './legacy-tooltip/tooltip-legacy-index';
@forward './tree/tree-legacy-index';
diff --git a/src/material/config.bzl b/src/material/config.bzl
index 7d8266c81d63..57162646e9af 100644
--- a/src/material/config.bzl
+++ b/src/material/config.bzl
@@ -65,6 +65,8 @@ entryPoints = [
"tabs/testing",
"toolbar",
"toolbar/testing",
+ "legacy-tooltip",
+ "legacy-tooltip/testing",
"tooltip",
"tooltip/testing",
"tree",
diff --git a/src/material/core/density/private/_all-density.scss b/src/material/core/density/private/_all-density.scss
index 0da495cf4774..455c693ed583 100644
--- a/src/material/core/density/private/_all-density.scss
+++ b/src/material/core/density/private/_all-density.scss
@@ -7,6 +7,7 @@
@use '../../../form-field/form-field-theme';
@use '../../../button-toggle/button-toggle-theme';
@use '../../../card/card-theme';
+@use '../../../tooltip/tooltip-theme';
// Includes all of the density styles.
@mixin all-component-densities($config-or-theme) {
@@ -33,6 +34,7 @@
@include form-field-theme.density($config);
@include button-toggle-theme.density($config);
@include card-theme.density($config);
+ @include tooltip-theme.density($config);
}
diff --git a/src/material/core/theming/tests/test-css-variables-theme.scss b/src/material/core/theming/tests/test-css-variables-theme.scss
index 3351c4822dde..b811a0f10e29 100644
--- a/src/material/core/theming/tests/test-css-variables-theme.scss
+++ b/src/material/core/theming/tests/test-css-variables-theme.scss
@@ -33,7 +33,6 @@
@use '../../../sort/sort-theme';
@use '../../../tabs/tabs-theme';
@use '../../../toolbar/toolbar-theme';
-@use '../../../tooltip/tooltip-theme';
@use '../../../tree/tree-theme';
@use '../../../snack-bar/snack-bar-theme';
@use '../../../form-field/form-field-theme';
@@ -97,7 +96,6 @@
@include sort-theme.theme($css-var-theme);
@include tabs-theme.theme($css-var-theme);
@include toolbar-theme.theme($css-var-theme);
- @include tooltip-theme.theme($css-var-theme);
@include tree-theme.theme($css-var-theme);
@include snack-bar-theme.theme($css-var-theme);
@include legacy-all-theme.all-legacy-component-themes($css-var-theme);
diff --git a/src/material/legacy-core/theming/_all-theme.scss b/src/material/legacy-core/theming/_all-theme.scss
index 2065fd580f56..49c205414307 100644
--- a/src/material/legacy-core/theming/_all-theme.scss
+++ b/src/material/legacy-core/theming/_all-theme.scss
@@ -1,11 +1,13 @@
@use '../../core/theming/theming';
@use '../../legacy-card/card-theme';
+@use '../../legacy-tooltip/tooltip-theme';
// Create a theme.
@mixin all-legacy-component-themes($theme-or-color-config) {
$dedupe-key: 'angular-material-legacy-theme';
@include theming.private-check-duplicate-theme-styles($theme-or-color-config, $dedupe-key) {
@include card-theme.theme($theme-or-color-config);
+ @include tooltip-theme.theme($theme-or-color-config);
}
}
diff --git a/src/material/legacy-core/typography/_all-typography.scss b/src/material/legacy-core/typography/_all-typography.scss
index bca8ffc7d94b..df1a69045f78 100644
--- a/src/material/legacy-core/typography/_all-typography.scss
+++ b/src/material/legacy-core/typography/_all-typography.scss
@@ -1,6 +1,7 @@
@use '../../core/typography/typography';
@use '../../core/theming/theming';
@use '../../legacy-card/card-theme';
+@use '../../legacy-tooltip/tooltip-theme';
// Includes all of the typographic styles.
@mixin all-legacy-component-typographies($config-or-theme: null) {
@@ -19,6 +20,7 @@
// would then load `all-theme` again. This ultimately results a circular dependency.
@include card-theme.typography($config);
+ @include tooltip-theme.typography($config);
}
// @deprecated Use `all-legacy-component-typographies`.
diff --git a/src/material/legacy-tooltip/BUILD.bazel b/src/material/legacy-tooltip/BUILD.bazel
new file mode 100644
index 000000000000..0d03076cb45e
--- /dev/null
+++ b/src/material/legacy-tooltip/BUILD.bazel
@@ -0,0 +1,85 @@
+load(
+ "//tools:defaults.bzl",
+ "markdown_to_html",
+ "ng_module",
+ "ng_test_library",
+ "ng_web_test_suite",
+ "sass_binary",
+ "sass_library",
+)
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+ name = "legacy-tooltip",
+ srcs = glob(
+ ["**/*.ts"],
+ exclude = ["**/*.spec.ts"],
+ ),
+ assets = [":tooltip.css"] + glob(["**/*.html"]),
+ deps = [
+ "//src:dev_mode_types",
+ "//src/cdk/a11y",
+ "//src/cdk/bidi",
+ "//src/cdk/coercion",
+ "//src/cdk/keycodes",
+ "//src/cdk/layout",
+ "//src/cdk/overlay",
+ "//src/cdk/platform",
+ "//src/cdk/portal",
+ "//src/cdk/scrolling",
+ "//src/material/core",
+ "//src/material/tooltip",
+ "@npm//@angular/common",
+ "@npm//@angular/core",
+ "@npm//rxjs",
+ ],
+)
+
+sass_library(
+ name = "legacy_tooltip_scss_lib",
+ srcs = glob(["**/_*.scss"]),
+ deps = ["//src/material/core:core_scss_lib"],
+)
+
+sass_binary(
+ name = "tooltip_scss",
+ src = "tooltip.scss",
+ deps = [
+ "//src/cdk:sass_lib",
+ ],
+)
+
+ng_test_library(
+ name = "unit_test_sources",
+ srcs = glob(
+ ["**/*.spec.ts"],
+ exclude = ["**/*.e2e.spec.ts"],
+ ),
+ deps = [
+ ":legacy-tooltip",
+ "//src/cdk/a11y",
+ "//src/cdk/bidi",
+ "//src/cdk/keycodes",
+ "//src/cdk/overlay",
+ "//src/cdk/platform",
+ "//src/cdk/testing/private",
+ "@npm//@angular/platform-browser",
+ "@npm//rxjs",
+ ],
+)
+
+ng_web_test_suite(
+ name = "unit_tests",
+ deps = [":unit_test_sources"],
+)
+
+markdown_to_html(
+ name = "overview",
+ srcs = [":tooltip.md"],
+)
+
+filegroup(
+ name = "source-files",
+ srcs = glob(["**/*.ts"]),
+)
diff --git a/src/material/legacy-tooltip/README.md b/src/material/legacy-tooltip/README.md
new file mode 100644
index 000000000000..b2f403793554
--- /dev/null
+++ b/src/material/legacy-tooltip/README.md
@@ -0,0 +1 @@
+Please see the official documentation at https://material.angular.io/components/component/tooltip
\ No newline at end of file
diff --git a/src/material/tooltip/_tooltip-legacy-index.scss b/src/material/legacy-tooltip/_tooltip-legacy-index.scss
similarity index 67%
rename from src/material/tooltip/_tooltip-legacy-index.scss
rename to src/material/legacy-tooltip/_tooltip-legacy-index.scss
index d33660bb43f3..e21bf5d7aee9 100644
--- a/src/material/tooltip/_tooltip-legacy-index.scss
+++ b/src/material/legacy-tooltip/_tooltip-legacy-index.scss
@@ -1,3 +1,3 @@
@forward 'tooltip-theme' hide $font-size, $handset-font-size, $handset-target-height,
$handset-vertical-padding, $target-height, $vertical-padding, color, theme, typography;
-@forward 'tooltip-theme' as mat-tooltip-* hide mat-tooltip-density;
+@forward 'tooltip-theme' as mat-legacy-tooltip-* hide mat-legacy-tooltip-density;
diff --git a/src/material/legacy-tooltip/_tooltip-theme.import.scss b/src/material/legacy-tooltip/_tooltip-theme.import.scss
new file mode 100644
index 000000000000..e22080a140bc
--- /dev/null
+++ b/src/material/legacy-tooltip/_tooltip-theme.import.scss
@@ -0,0 +1,9 @@
+@forward '../core/theming/theming.import';
+@forward '../core/typography/typography-utils.import';
+@forward 'tooltip-theme' hide $font-size, $handset-font-size, $handset-target-height,
+$handset-vertical-padding, $target-height, $vertical-padding, color, theme, typography;
+@forward 'tooltip-theme' as mat-legacy-tooltip-* hide mat-legacy-tooltip-density;
+
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/typography/typography-utils';
diff --git a/src/material/legacy-tooltip/_tooltip-theme.scss b/src/material/legacy-tooltip/_tooltip-theme.scss
new file mode 100644
index 000000000000..6666a78f14e1
--- /dev/null
+++ b/src/material/legacy-tooltip/_tooltip-theme.scss
@@ -0,0 +1,61 @@
+@use 'sass:map';
+@use 'sass:math';
+@use '../core/theming/theming';
+@use '../core/typography/typography';
+@use '../core/typography/typography-utils';
+
+$target-height: 22px;
+$font-size: 10px;
+$vertical-padding: math.div($target-height - $font-size, 2);
+
+$handset-target-height: 30px;
+$handset-font-size: 14px;
+$handset-vertical-padding: math.div($handset-target-height - $handset-font-size, 2);
+
+@mixin color($config-or-theme) {
+ $config: theming.get-color-config($config-or-theme);
+ $background: map.get($config, background);
+
+ .mat-tooltip {
+ background: theming.get-color-from-palette($background, tooltip, 0.9);
+ }
+}
+
+@mixin typography($config-or-theme) {
+ $config: typography.private-typography-to-2014-config(
+ theming.get-typography-config($config-or-theme));
+ .mat-tooltip {
+ font-family: typography-utils.font-family($config);
+ font-size: $font-size;
+ padding-top: $vertical-padding;
+ padding-bottom: $vertical-padding;
+ }
+
+ .mat-tooltip-handset {
+ font-size: $handset-font-size;
+ padding-top: $handset-vertical-padding;
+ padding-bottom: $handset-vertical-padding;
+ }
+}
+
+@mixin _density($config-or-theme) {}
+
+@mixin theme($theme-or-color-config) {
+ $theme: theming.private-legacy-get-theme($theme-or-color-config);
+ @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-tooltip') {
+ $color: theming.get-color-config($theme);
+ $density: theming.get-density-config($theme);
+ $typography: theming.get-typography-config($theme);
+
+ @if $color != null {
+ @include color($color);
+ }
+ @if $density != null {
+ @include _density($density);
+ }
+ @if $typography != null {
+ @include typography($typography);
+ }
+ }
+}
+
diff --git a/src/material-experimental/mdc-tooltip/index.ts b/src/material/legacy-tooltip/index.ts
similarity index 100%
rename from src/material-experimental/mdc-tooltip/index.ts
rename to src/material/legacy-tooltip/index.ts
diff --git a/src/material-experimental/mdc-tooltip/public-api.ts b/src/material/legacy-tooltip/public-api.ts
similarity index 95%
rename from src/material-experimental/mdc-tooltip/public-api.ts
rename to src/material/legacy-tooltip/public-api.ts
index 35acc359be43..5266d7b7250f 100644
--- a/src/material-experimental/mdc-tooltip/public-api.ts
+++ b/src/material/legacy-tooltip/public-api.ts
@@ -6,9 +6,9 @@
* found in the LICENSE file at https://angular.io/license
*/
+export * from './tooltip-module';
export * from './tooltip';
export * from './tooltip-animations';
-export * from './module';
export {
getMatTooltipInvalidPositionError,
diff --git a/src/material-experimental/mdc-tooltip/testing/BUILD.bazel b/src/material/legacy-tooltip/testing/BUILD.bazel
similarity index 56%
rename from src/material-experimental/mdc-tooltip/testing/BUILD.bazel
rename to src/material/legacy-tooltip/testing/BUILD.bazel
index f97ed295ba0d..8b8fef6fffc2 100644
--- a/src/material-experimental/mdc-tooltip/testing/BUILD.bazel
+++ b/src/material/legacy-tooltip/testing/BUILD.bazel
@@ -19,19 +19,32 @@ filegroup(
srcs = glob(["**/*.ts"]),
)
+ng_test_library(
+ name = "harness_tests_lib",
+ srcs = ["shared.spec.ts"],
+ deps = [
+ ":testing",
+ "//src/cdk/testing",
+ "//src/cdk/testing/testbed",
+ "//src/material/legacy-tooltip",
+ "@npm//@angular/platform-browser",
+ ],
+)
+
ng_test_library(
name = "unit_tests_lib",
- srcs = glob(["**/*.spec.ts"]),
+ srcs = glob(
+ ["**/*.spec.ts"],
+ exclude = ["shared.spec.ts"],
+ ),
deps = [
+ ":harness_tests_lib",
":testing",
- "//src/material-experimental/mdc-tooltip",
- "//src/material/tooltip/testing:harness_tests_lib",
+ "//src/material/legacy-tooltip",
],
)
ng_web_test_suite(
name = "unit_tests",
- deps = [
- ":unit_tests_lib",
- ],
+ deps = [":unit_tests_lib"],
)
diff --git a/src/material-experimental/mdc-tooltip/testing/index.ts b/src/material/legacy-tooltip/testing/index.ts
similarity index 100%
rename from src/material-experimental/mdc-tooltip/testing/index.ts
rename to src/material/legacy-tooltip/testing/index.ts
diff --git a/src/material-experimental/mdc-tooltip/testing/public-api.ts b/src/material/legacy-tooltip/testing/public-api.ts
similarity index 100%
rename from src/material-experimental/mdc-tooltip/testing/public-api.ts
rename to src/material/legacy-tooltip/testing/public-api.ts
diff --git a/src/material/tooltip/testing/shared.spec.ts b/src/material/legacy-tooltip/testing/shared.spec.ts
similarity index 89%
rename from src/material/tooltip/testing/shared.spec.ts
rename to src/material/legacy-tooltip/testing/shared.spec.ts
index e4709a4d9768..e55dafe0d62f 100644
--- a/src/material/tooltip/testing/shared.spec.ts
+++ b/src/material/legacy-tooltip/testing/shared.spec.ts
@@ -2,14 +2,14 @@ import {HarnessLoader} from '@angular/cdk/testing';
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
import {Component} from '@angular/core';
import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {MatTooltipModule} from '@angular/material/tooltip';
-import {MatTooltipHarness} from '@angular/material/tooltip/testing/tooltip-harness';
+import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
+import {MatLegacyTooltipHarness} from '@angular/material/legacy-tooltip/testing/tooltip-harness';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
/** Shared tests to run on both the original and MDC-based tooltips. */
export function runHarnessTests(
- tooltipModule: typeof MatTooltipModule,
- tooltipHarness: typeof MatTooltipHarness,
+ tooltipModule: typeof MatLegacyTooltipModule,
+ tooltipHarness: typeof MatLegacyTooltipHarness,
) {
let fixture: ComponentFixture;
let loader: HarnessLoader;
diff --git a/src/material/legacy-tooltip/testing/tooltip-harness.spec.ts b/src/material/legacy-tooltip/testing/tooltip-harness.spec.ts
new file mode 100644
index 000000000000..64f01fcd86c3
--- /dev/null
+++ b/src/material/legacy-tooltip/testing/tooltip-harness.spec.ts
@@ -0,0 +1,7 @@
+import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
+import {runHarnessTests} from '@angular/material/legacy-tooltip/testing/shared.spec';
+import {MatLegacyTooltipHarness} from './tooltip-harness';
+
+describe('Non-MDC-based MatTooltipHarness', () => {
+ runHarnessTests(MatLegacyTooltipModule, MatLegacyTooltipHarness);
+});
diff --git a/src/material/legacy-tooltip/testing/tooltip-harness.ts b/src/material/legacy-tooltip/testing/tooltip-harness.ts
new file mode 100644
index 000000000000..6766f77c7e86
--- /dev/null
+++ b/src/material/legacy-tooltip/testing/tooltip-harness.ts
@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {HarnessPredicate} from '@angular/cdk/testing';
+import {_MatTooltipHarnessBase, TooltipHarnessFilters} from '@angular/material/tooltip/testing';
+
+/** Harness for interacting with a standard mat-tooltip in tests. */
+export class MatLegacyTooltipHarness extends _MatTooltipHarnessBase {
+ protected _optionalPanel = this.documentRootLocatorFactory().locatorForOptional('.mat-tooltip');
+ protected _hiddenClass = 'mat-tooltip-hide';
+ protected _showAnimationName = 'mat-tooltip-show';
+ protected _hideAnimationName = 'mat-tooltip-hide';
+ static hostSelector = '.mat-tooltip-trigger';
+
+ /**
+ * Gets a `HarnessPredicate` that can be used to search
+ * for a tooltip trigger with specific attributes.
+ * @param options Options for narrowing the search.
+ * @return a `HarnessPredicate` configured with the given options.
+ */
+ static with(options: TooltipHarnessFilters = {}): HarnessPredicate {
+ return new HarnessPredicate(MatLegacyTooltipHarness, options);
+ }
+}
diff --git a/src/material-experimental/mdc-tooltip/tooltip-animations.ts b/src/material/legacy-tooltip/tooltip-animations.ts
similarity index 59%
rename from src/material-experimental/mdc-tooltip/tooltip-animations.ts
rename to src/material/legacy-tooltip/tooltip-animations.ts
index 1f4c33dd275e..a52daf42c450 100644
--- a/src/material-experimental/mdc-tooltip/tooltip-animations.ts
+++ b/src/material/legacy-tooltip/tooltip-animations.ts
@@ -8,6 +8,7 @@
import {
animate,
AnimationTriggerMetadata,
+ keyframes,
state,
style,
transition,
@@ -23,11 +24,19 @@ export const matTooltipAnimations: {
} = {
/** Animation that transitions a tooltip in and out. */
tooltipState: trigger('state', [
- // TODO(crisbeto): these values are based on MDC's CSS.
- // We should be able to use their styles directly once we land #19432.
- state('initial, void, hidden', style({opacity: 0, transform: 'scale(0.8)'})),
+ state('initial, void, hidden', style({opacity: 0, transform: 'scale(0)'})),
state('visible', style({transform: 'scale(1)'})),
- transition('* => visible', animate('150ms cubic-bezier(0, 0, 0.2, 1)')),
- transition('* => hidden', animate('75ms cubic-bezier(0.4, 0, 1, 1)')),
+ transition(
+ '* => visible',
+ animate(
+ '200ms cubic-bezier(0, 0, 0.2, 1)',
+ keyframes([
+ style({opacity: 0, transform: 'scale(0)', offset: 0}),
+ style({opacity: 0.5, transform: 'scale(0.99)', offset: 0.5}),
+ style({opacity: 1, transform: 'scale(1)', offset: 1}),
+ ]),
+ ),
+ ),
+ transition('* => hidden', animate('100ms cubic-bezier(0, 0, 0.2, 1)', style({opacity: 0}))),
]),
};
diff --git a/src/material/tooltip/tooltip-module.ts b/src/material/legacy-tooltip/tooltip-module.ts
similarity index 65%
rename from src/material/tooltip/tooltip-module.ts
rename to src/material/legacy-tooltip/tooltip-module.ts
index da0a2bb3cfa6..3be59135fb54 100644
--- a/src/material/tooltip/tooltip-module.ts
+++ b/src/material/legacy-tooltip/tooltip-module.ts
@@ -12,16 +12,13 @@ import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {MatCommonModule} from '@angular/material/core';
import {CdkScrollableModule} from '@angular/cdk/scrolling';
-import {
- MatTooltip,
- TooltipComponent,
- MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER,
-} from './tooltip';
+import {MatLegacyTooltip, LegacyTooltipComponent} from './tooltip';
+import {MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER} from '@angular/material/tooltip';
@NgModule({
imports: [A11yModule, CommonModule, OverlayModule, MatCommonModule],
- exports: [MatTooltip, TooltipComponent, MatCommonModule, CdkScrollableModule],
- declarations: [MatTooltip, TooltipComponent],
+ exports: [MatLegacyTooltip, LegacyTooltipComponent, MatCommonModule, CdkScrollableModule],
+ declarations: [MatLegacyTooltip, LegacyTooltipComponent],
providers: [MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER],
})
-export class MatTooltipModule {}
+export class MatLegacyTooltipModule {}
diff --git a/src/material/legacy-tooltip/tooltip.html b/src/material/legacy-tooltip/tooltip.html
new file mode 100644
index 000000000000..cf6bd74a0592
--- /dev/null
+++ b/src/material/legacy-tooltip/tooltip.html
@@ -0,0 +1,5 @@
+{{message}}
diff --git a/src/material/legacy-tooltip/tooltip.md b/src/material/legacy-tooltip/tooltip.md
new file mode 100644
index 000000000000..78b861363fa7
--- /dev/null
+++ b/src/material/legacy-tooltip/tooltip.md
@@ -0,0 +1,77 @@
+The Angular Material tooltip provides a text label that is displayed when the user hovers
+over or longpresses an element.
+
+
+
+### Positioning
+
+The tooltip will be displayed below the element but this can be configured using the
+`matTooltipPosition` input.
+The tooltip can be displayed above, below, left, or right of the element. By default the position
+will be below. If the tooltip should switch left/right positions in an RTL layout direction, then
+the positions `before` and `after` should be used instead of `left` and `right`, respectively.
+
+| Position | Description |
+|-----------|--------------------------------------------------------------------------------------|
+| `above` | Always display above the element |
+| `below` | Always display beneath the element |
+| `left` | Always display to the left of the element |
+| `right` | Always display to the right of the element |
+| `before` | Display to the left in left-to-right layout and to the right in right-to-left layout |
+| `after` | Display to the right in left-to-right layout and to the left in right-to-left layout |
+
+Based on the position in which the tooltip is shown, the `.mat-tooltip-panel` element will receive a
+CSS class that can be used for style (e.g. to add an arrow). The possible classes are
+`mat-tooltip-panel-above`, `mat-tooltip-panel-below`, `mat-tooltip-panel-left`,
+`mat-tooltip-panel-right`.
+
+
+
+### Showing and hiding
+
+By default, the tooltip will be immediately shown when the user's mouse hovers over the tooltip's
+trigger element and immediately hides when the user's mouse leaves.
+
+On mobile, the tooltip is displayed when the user longpresses the element and hides after a
+delay of 1500ms.
+
+#### Show and hide delays
+
+To add a delay before showing or hiding the tooltip, you can use the inputs `matTooltipShowDelay`
+and `matTooltipHideDelay` to provide a delay time in milliseconds.
+
+The following example has a tooltip that waits one second to display after the user
+hovers over the button, and waits two seconds to hide after the user moves the mouse away.
+
+
+
+#### Changing the default delay behavior
+
+You can configure your app's tooltip default show/hide delays by configuring and providing
+your options using the `MAT_TOOLTIP_DEFAULT_OPTIONS` injection token.
+
+
+
+#### Manually calling show() and hide()
+
+To manually cause the tooltip to show or hide, you can call the `show` and `hide` directive methods,
+which both accept a number in milliseconds to delay before applying the display change.
+
+
+
+#### Disabling the tooltip from showing
+
+To completely disable a tooltip, set `matTooltipDisabled`. While disabled, a tooltip will never be
+shown.
+
+### Accessibility
+
+`MatTooltip` adds an `aria-describedby` description that provides a reference
+to a visually hidden element containing the tooltip's message. This provides screenreaders the
+information needed to read out the tooltip's contents when the end-user focuses on tooltip's
+trigger. The element referenced by `aria-describedby` is not the tooltip itself,
+but instead an invisible copy of the tooltip content that is always present in the DOM.
+
+Avoid interactions that exclusively show a tooltip with pointer events like click and mouseenter.
+Always ensure that keyboard users can perform the same set of actions available to mouse and
+touch users.
diff --git a/src/material/legacy-tooltip/tooltip.scss b/src/material/legacy-tooltip/tooltip.scss
new file mode 100644
index 000000000000..61a547d431b9
--- /dev/null
+++ b/src/material/legacy-tooltip/tooltip.scss
@@ -0,0 +1,76 @@
+@use '@angular/cdk';
+
+$horizontal-padding: 8px;
+$max-width: 250px;
+$margin: 14px;
+
+$handset-horizontal-padding: 16px;
+$handset-margin: 24px;
+
+.mat-tooltip {
+ color: white;
+ border-radius: 4px;
+ margin: $margin;
+ max-width: $max-width;
+ padding-left: $horizontal-padding;
+ padding-right: $horizontal-padding;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ transform: scale(0);
+
+ &._mat-animation-noopable {
+ animation: none;
+ transform: scale(1);
+ }
+
+ @include cdk.high-contrast(active, off) {
+ outline: solid 1px;
+ }
+}
+
+.mat-tooltip-handset {
+ margin: $handset-margin;
+ padding-left: $handset-horizontal-padding;
+ padding-right: $handset-horizontal-padding;
+}
+
+.mat-tooltip-panel-non-interactive {
+ pointer-events: none;
+}
+
+@keyframes mat-tooltip-show {
+ 0% {
+ opacity: 0;
+ transform: scale(0);
+ }
+
+ 50% {
+ opacity: 0.5;
+ transform: scale(0.99);
+ }
+
+ 100% {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+@keyframes mat-tooltip-hide {
+ 0% {
+ opacity: 1;
+ transform: scale(1);
+ }
+
+ 100% {
+ opacity: 0;
+ transform: scale(1);
+ }
+}
+
+.mat-tooltip-show {
+ animation: mat-tooltip-show 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
+}
+
+.mat-tooltip-hide {
+ animation: mat-tooltip-hide 100ms cubic-bezier(0, 0, 0.2, 1) forwards;
+}
diff --git a/src/material-experimental/mdc-tooltip/tooltip.spec.ts b/src/material/legacy-tooltip/tooltip.spec.ts
similarity index 92%
rename from src/material-experimental/mdc-tooltip/tooltip.spec.ts
rename to src/material/legacy-tooltip/tooltip.spec.ts
index 369779bad0e3..72a816d402cc 100644
--- a/src/material-experimental/mdc-tooltip/tooltip.spec.ts
+++ b/src/material/legacy-tooltip/tooltip.spec.ts
@@ -34,8 +34,8 @@ import {By} from '@angular/platform-browser';
import {Subject} from 'rxjs';
import {
MAT_TOOLTIP_DEFAULT_OPTIONS,
- MatTooltip,
- MatTooltipModule,
+ MatLegacyTooltip,
+ MatLegacyTooltipModule,
SCROLL_THROTTLE_MS,
TooltipPosition,
TooltipTouchGestures,
@@ -44,7 +44,7 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations';
const initialTooltipMessage = 'initial tooltip message';
-describe('MDC-based MatTooltip', () => {
+describe('MatTooltip', () => {
let overlayContainerElement: HTMLElement;
let dir: {value: Direction; change: Subject};
let platform: Platform;
@@ -52,7 +52,7 @@ describe('MDC-based MatTooltip', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
- imports: [MatTooltipModule, OverlayModule],
+ imports: [MatLegacyTooltipModule, OverlayModule],
declarations: [
BasicTooltipDemo,
ScrollableTooltipDemo,
@@ -88,14 +88,14 @@ describe('MDC-based MatTooltip', () => {
let fixture: ComponentFixture;
let buttonDebugElement: DebugElement;
let buttonElement: HTMLButtonElement;
- let tooltipDirective: MatTooltip;
+ let tooltipDirective: MatLegacyTooltip;
beforeEach(() => {
fixture = TestBed.createComponent(BasicTooltipDemo);
fixture.detectChanges();
buttonDebugElement = fixture.debugElement.query(By.css('button'))!;
buttonElement = buttonDebugElement.nativeElement;
- tooltipDirective = buttonDebugElement.injector.get(MatTooltip);
+ tooltipDirective = buttonDebugElement.injector.get(MatLegacyTooltip);
});
it('should show and hide the tooltip', fakeAsync(() => {
@@ -111,11 +111,9 @@ describe('MDC-based MatTooltip', () => {
finishCurrentTooltipAnimation(overlayContainerElement, true);
// Make sure tooltip is shown to the user and animation has finished.
- const tooltipElement = overlayContainerElement.querySelector(
- '.mat-mdc-tooltip',
- ) as HTMLElement;
+ const tooltipElement = overlayContainerElement.querySelector('.mat-tooltip') as HTMLElement;
expect(tooltipElement instanceof HTMLElement).toBe(true);
- expect(tooltipElement.classList).toContain('mat-mdc-tooltip-show');
+ expect(tooltipElement.classList).toContain('mat-tooltip-show');
expect(overlayContainerElement.textContent).toContain(initialTooltipMessage);
@@ -171,7 +169,7 @@ describe('MDC-based MatTooltip', () => {
it('should be able to override the default show and hide delays', fakeAsync(() => {
TestBed.resetTestingModule()
.configureTestingModule({
- imports: [MatTooltipModule, OverlayModule],
+ imports: [MatLegacyTooltipModule, OverlayModule],
declarations: [BasicTooltipDemo],
providers: [
{
@@ -186,7 +184,7 @@ describe('MDC-based MatTooltip', () => {
fixture.detectChanges();
tooltipDirective = fixture.debugElement
.query(By.css('button'))!
- .injector.get(MatTooltip);
+ .injector.get(MatLegacyTooltip);
tooltipDirective.show();
fixture.detectChanges();
@@ -208,7 +206,7 @@ describe('MDC-based MatTooltip', () => {
it('should be able to override the default position', fakeAsync(() => {
TestBed.resetTestingModule()
.configureTestingModule({
- imports: [MatTooltipModule, OverlayModule],
+ imports: [MatLegacyTooltipModule, OverlayModule],
declarations: [TooltipDemoWithoutPositionBinding],
providers: [
{
@@ -223,7 +221,7 @@ describe('MDC-based MatTooltip', () => {
newFixture.detectChanges();
tooltipDirective = newFixture.debugElement
.query(By.css('button'))!
- .injector.get(MatTooltip);
+ .injector.get(MatLegacyTooltip);
tooltipDirective.show();
newFixture.detectChanges();
@@ -237,7 +235,7 @@ describe('MDC-based MatTooltip', () => {
it('should be able to disable tooltip interactivity', fakeAsync(() => {
TestBed.resetTestingModule()
.configureTestingModule({
- imports: [MatTooltipModule, OverlayModule, NoopAnimationsModule],
+ imports: [MatLegacyTooltipModule, OverlayModule, NoopAnimationsModule],
declarations: [TooltipDemoWithoutPositionBinding],
providers: [
{
@@ -252,14 +250,14 @@ describe('MDC-based MatTooltip', () => {
newFixture.detectChanges();
tooltipDirective = newFixture.debugElement
.query(By.css('button'))!
- .injector.get(MatTooltip);
+ .injector.get(MatLegacyTooltip);
tooltipDirective.show();
newFixture.detectChanges();
tick();
expect(tooltipDirective._overlayRef?.overlayElement.classList).toContain(
- 'mat-mdc-tooltip-panel-non-interactive',
+ 'mat-tooltip-panel-non-interactive',
);
}));
@@ -273,7 +271,7 @@ describe('MDC-based MatTooltip', () => {
expect(!!overlayRef).toBeTruthy();
expect(overlayRef!.overlayElement.classList)
.withContext('Expected the overlay panel element to have the tooltip panel class set.')
- .toContain('mat-mdc-tooltip-panel');
+ .toContain('mat-tooltip-panel');
}));
it('should not show if disabled', fakeAsync(() => {
@@ -448,22 +446,20 @@ describe('MDC-based MatTooltip', () => {
fixture.detectChanges();
// Make sure classes aren't prematurely added
- let tooltipElement = overlayContainerElement.querySelector('.mat-mdc-tooltip') as HTMLElement;
- expect(tooltipElement.classList).not.toContain(
- 'custom-one',
- 'Expected to not have the class before enabling matTooltipClass',
- );
- expect(tooltipElement.classList).not.toContain(
- 'custom-two',
- 'Expected to not have the class before enabling matTooltipClass',
- );
+ let tooltipElement = overlayContainerElement.querySelector('.mat-tooltip') as HTMLElement;
+ expect(tooltipElement.classList)
+ .not.withContext('Expected to not have the class before enabling matTooltipClass')
+ .toContain('custom-one');
+ expect(tooltipElement.classList)
+ .not.withContext('Expected to not have the class before enabling matTooltipClass')
+ .toContain('custom-two');
// Enable the classes via ngClass syntax
fixture.componentInstance.showTooltipClass = true;
fixture.detectChanges();
// Make sure classes are correctly added
- tooltipElement = overlayContainerElement.querySelector('.mat-mdc-tooltip') as HTMLElement;
+ tooltipElement = overlayContainerElement.querySelector('.mat-tooltip') as HTMLElement;
expect(tooltipElement.classList)
.withContext('Expected to have the class after enabling matTooltipClass')
.toContain('custom-one');
@@ -691,7 +687,6 @@ describe('MDC-based MatTooltip', () => {
tooltipDirective.show();
tick(0);
fixture.detectChanges();
-
document.body.click();
fixture.detectChanges();
tick(500);
@@ -764,7 +759,7 @@ describe('MDC-based MatTooltip', () => {
fixture.detectChanges();
tick(500);
- expect(overlayContainerElement.querySelector('.mat-mdc-tooltip')).toBeNull();
+ expect(overlayContainerElement.querySelector('.mat-tooltip')).toBeNull();
}));
it('should not show the tooltip on mouse focus', fakeAsync(() => {
@@ -776,7 +771,7 @@ describe('MDC-based MatTooltip', () => {
fixture.detectChanges();
tick(500);
- expect(overlayContainerElement.querySelector('.mat-mdc-tooltip')).toBeNull();
+ expect(overlayContainerElement.querySelector('.mat-tooltip')).toBeNull();
}));
it('should not show the tooltip on touch focus', fakeAsync(() => {
@@ -788,7 +783,7 @@ describe('MDC-based MatTooltip', () => {
fixture.detectChanges();
tick(500);
- expect(overlayContainerElement.querySelector('.mat-mdc-tooltip')).toBeNull();
+ expect(overlayContainerElement.querySelector('.mat-tooltip')).toBeNull();
}));
it('should not hide the tooltip when calling `show` twice in a row', fakeAsync(() => {
@@ -821,19 +816,19 @@ describe('MDC-based MatTooltip', () => {
setPositionAndShow('below');
const classList = tooltipDirective._overlayRef!.overlayElement.classList;
- expect(classList).toContain('mat-mdc-tooltip-panel-below');
+ expect(classList).toContain('mat-tooltip-panel-below');
setPositionAndShow('above');
- expect(classList).not.toContain('mat-mdc-tooltip-panel-below');
- expect(classList).toContain('mat-mdc-tooltip-panel-above');
+ expect(classList).not.toContain('mat-tooltip-panel-below');
+ expect(classList).toContain('mat-tooltip-panel-above');
setPositionAndShow('left');
- expect(classList).not.toContain('mat-mdc-tooltip-panel-above');
- expect(classList).toContain('mat-mdc-tooltip-panel-left');
+ expect(classList).not.toContain('mat-tooltip-panel-above');
+ expect(classList).toContain('mat-tooltip-panel-left');
setPositionAndShow('right');
- expect(classList).not.toContain('mat-mdc-tooltip-panel-left');
- expect(classList).toContain('mat-mdc-tooltip-panel-right');
+ expect(classList).not.toContain('mat-tooltip-panel-left');
+ expect(classList).toContain('mat-tooltip-panel-right');
function setPositionAndShow(position: TooltipPosition) {
tooltipDirective.hide(0);
@@ -864,10 +859,10 @@ describe('MDC-based MatTooltip', () => {
tick(500);
const classList = tooltipDirective._overlayRef!.overlayElement.classList;
- expect(classList).not.toContain('mat-mdc-tooltip-panel-after');
- expect(classList).not.toContain('mat-mdc-tooltip-panel-before');
- expect(classList).not.toContain('mat-mdc-tooltip-panel-left');
- expect(classList).toContain('mat-mdc-tooltip-panel-right');
+ expect(classList).not.toContain('mat-tooltip-panel-after');
+ expect(classList).not.toContain('mat-tooltip-panel-before');
+ expect(classList).not.toContain('mat-tooltip-panel-left');
+ expect(classList).toContain('mat-tooltip-panel-right');
tooltipDirective.hide(0);
fixture.detectChanges();
@@ -879,10 +874,10 @@ describe('MDC-based MatTooltip', () => {
fixture.detectChanges();
tick(500);
- expect(classList).not.toContain('mat-mdc-tooltip-panel-after');
- expect(classList).not.toContain('mat-mdc-tooltip-panel-before');
- expect(classList).not.toContain('mat-mdc-tooltip-panel-right');
- expect(classList).toContain('mat-mdc-tooltip-panel-left');
+ expect(classList).not.toContain('mat-tooltip-panel-after');
+ expect(classList).not.toContain('mat-tooltip-panel-before');
+ expect(classList).not.toContain('mat-tooltip-panel-right');
+ expect(classList).toContain('mat-tooltip-panel-left');
}));
it('should clear the show timeout on destroy', fakeAsync(() => {
@@ -912,25 +907,6 @@ describe('MDC-based MatTooltip', () => {
fixture.destroy();
}));
- it('should set the multiline class on tooltips with messages that overflow', fakeAsync(() => {
- fixture.componentInstance.message =
- 'This is a very long message that should cause the' +
- 'tooltip message body to overflow onto a new line.';
- tooltipDirective.show();
- fixture.detectChanges();
- tick();
-
- // Need to detect changes again to wait for the multiline class to be applied.
- fixture.detectChanges();
-
- const tooltipElement = overlayContainerElement.querySelector(
- '.mat-mdc-tooltip',
- ) as HTMLElement;
-
- expect(tooltipElement.classList).toContain('mdc-tooltip--multiline');
- expect(tooltipDirective._tooltipInstance?._isMultiline).toBeTrue();
- }));
-
it('should hide on mouseleave on the trigger', fakeAsync(() => {
// We don't bind mouse events on mobile devices.
if (platform.IOS || platform.ANDROID) {
@@ -959,9 +935,7 @@ describe('MDC-based MatTooltip', () => {
tick(0);
expect(tooltipDirective._isTooltipVisible()).toBe(true);
- const tooltipElement = overlayContainerElement.querySelector(
- '.mat-mdc-tooltip',
- ) as HTMLElement;
+ const tooltipElement = overlayContainerElement.querySelector('.mat-tooltip') as HTMLElement;
const event = createMouseEvent('mouseleave');
Object.defineProperty(event, 'relatedTarget', {value: tooltipElement});
@@ -982,9 +956,7 @@ describe('MDC-based MatTooltip', () => {
tick(0);
expect(tooltipDirective._isTooltipVisible()).toBe(true);
- const tooltipElement = overlayContainerElement.querySelector(
- '.mat-mdc-tooltip',
- ) as HTMLElement;
+ const tooltipElement = overlayContainerElement.querySelector('.mat-tooltip') as HTMLElement;
dispatchMouseEvent(tooltipElement, 'mouseleave');
fixture.detectChanges();
tick(0);
@@ -1002,9 +974,7 @@ describe('MDC-based MatTooltip', () => {
tick(0);
expect(tooltipDirective._isTooltipVisible()).toBe(true);
- const tooltipElement = overlayContainerElement.querySelector(
- '.mat-mdc-tooltip',
- ) as HTMLElement;
+ const tooltipElement = overlayContainerElement.querySelector('.mat-tooltip') as HTMLElement;
const event = createMouseEvent('mouseleave');
Object.defineProperty(event, 'relatedTarget', {
value: fixture.componentInstance.button.nativeElement,
@@ -1019,12 +989,14 @@ describe('MDC-based MatTooltip', () => {
describe('fallback positions', () => {
let fixture: ComponentFixture;
- let tooltip: MatTooltip;
+ let tooltip: MatLegacyTooltip;
beforeEach(() => {
fixture = TestBed.createComponent(BasicTooltipDemo);
fixture.detectChanges();
- tooltip = fixture.debugElement.query(By.css('button'))!.injector.get(MatTooltip);
+ tooltip = fixture.debugElement
+ .query(By.css('button'))!
+ .injector.get(MatLegacyTooltip);
});
it('should set a fallback origin position by inverting the main origin position', () => {
@@ -1067,13 +1039,13 @@ describe('MDC-based MatTooltip', () => {
describe('scrollable usage', () => {
let fixture: ComponentFixture;
let buttonDebugElement: DebugElement;
- let tooltipDirective: MatTooltip;
+ let tooltipDirective: MatLegacyTooltip;
beforeEach(() => {
fixture = TestBed.createComponent(ScrollableTooltipDemo);
fixture.detectChanges();
buttonDebugElement = fixture.debugElement.query(By.css('button'))!;
- tooltipDirective = buttonDebugElement.injector.get(MatTooltip);
+ tooltipDirective = buttonDebugElement.injector.get(MatLegacyTooltip);
});
it('should hide tooltip if clipped after changing positions', fakeAsync(() => {
@@ -1130,14 +1102,14 @@ describe('MDC-based MatTooltip', () => {
let fixture: ComponentFixture;
let buttonDebugElement: DebugElement;
let buttonElement: HTMLButtonElement;
- let tooltipDirective: MatTooltip;
+ let tooltipDirective: MatLegacyTooltip;
beforeEach(() => {
fixture = TestBed.createComponent(OnPushTooltipDemo);
fixture.detectChanges();
buttonDebugElement = fixture.debugElement.query(By.css('button'))!;
buttonElement = buttonDebugElement.nativeElement;
- tooltipDirective = buttonDebugElement.injector.get(MatTooltip);
+ tooltipDirective = buttonDebugElement.injector.get(MatLegacyTooltip);
});
it('should show and hide the tooltip', fakeAsync(() => {
@@ -1153,11 +1125,9 @@ describe('MDC-based MatTooltip', () => {
finishCurrentTooltipAnimation(overlayContainerElement, true);
// Make sure tooltip is shown to the user and animation has finished
- const tooltipElement = overlayContainerElement.querySelector(
- '.mat-mdc-tooltip',
- ) as HTMLElement;
+ const tooltipElement = overlayContainerElement.querySelector('.mat-tooltip') as HTMLElement;
expect(tooltipElement instanceof HTMLElement).toBe(true);
- expect(tooltipElement.classList).toContain('mat-mdc-tooltip-show');
+ expect(tooltipElement.classList).toContain('mat-tooltip-show');
// After hide called, a timeout delay is created that will to hide the tooltip.
const tooltipDelay = 1000;
@@ -1184,9 +1154,7 @@ describe('MDC-based MatTooltip', () => {
fixture.detectChanges();
tick(0);
- const tooltipElement = overlayContainerElement.querySelector(
- '.mat-mdc-tooltip',
- ) as HTMLElement;
+ const tooltipElement = overlayContainerElement.querySelector('.mat-tooltip') as HTMLElement;
expect(tooltipElement.textContent).toContain('initial tooltip message');
}));
});
@@ -1478,7 +1446,7 @@ class BasicTooltipDemo {
showButton: boolean = true;
showTooltipClass = false;
touchGestures: TooltipTouchGestures = 'auto';
- @ViewChild(MatTooltip) tooltip: MatTooltip;
+ @ViewChild(MatLegacyTooltip) tooltip: MatLegacyTooltip;
@ViewChild('button') button: ElementRef;
}
@@ -1584,12 +1552,12 @@ class TooltipOnDraggableElement {
})
class TooltipDemoWithoutPositionBinding {
message: any = initialTooltipMessage;
- @ViewChild(MatTooltip) tooltip: MatTooltip;
+ @ViewChild(MatLegacyTooltip) tooltip: MatLegacyTooltip;
@ViewChild('button') button: ElementRef;
}
/** Asserts whether a tooltip directive has a tooltip instance. */
-function assertTooltipInstance(tooltip: MatTooltip, shouldExist: boolean): void {
+function assertTooltipInstance(tooltip: MatLegacyTooltip, shouldExist: boolean): void {
// Note that we have to cast this to a boolean, because Jasmine will go into an infinite loop
// if it tries to stringify the `_tooltipInstance` when an assertion fails. The infinite loop
// happens due to the `_tooltipInstance` having a circular structure.
@@ -1597,10 +1565,10 @@ function assertTooltipInstance(tooltip: MatTooltip, shouldExist: boolean): void
}
function finishCurrentTooltipAnimation(overlayContainer: HTMLElement, isVisible: boolean) {
- const tooltip = overlayContainer.querySelector('.mat-mdc-tooltip')!;
+ const tooltip = overlayContainer.querySelector('.mat-tooltip')!;
const event = createFakeEvent('animationend');
Object.defineProperty(event, 'animationName', {
- get: () => `mat-mdc-tooltip-${isVisible ? 'show' : 'hide'}`,
+ get: () => `mat-tooltip-${isVisible ? 'show' : 'hide'}`,
});
dispatchEvent(tooltip, event);
}
diff --git a/src/material-experimental/mdc-tooltip/tooltip.ts b/src/material/legacy-tooltip/tooltip.ts
similarity index 60%
rename from src/material-experimental/mdc-tooltip/tooltip.ts
rename to src/material/legacy-tooltip/tooltip.ts
index c08addbf7f2b..fdd2e90d8149 100644
--- a/src/material-experimental/mdc-tooltip/tooltip.ts
+++ b/src/material/legacy-tooltip/tooltip.ts
@@ -5,7 +5,12 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
-
+import {AriaDescriber, FocusMonitor} from '@angular/cdk/a11y';
+import {Directionality} from '@angular/cdk/bidi';
+import {BreakpointObserver, Breakpoints, BreakpointState} from '@angular/cdk/layout';
+import {Overlay} from '@angular/cdk/overlay';
+import {Platform} from '@angular/cdk/platform';
+import {ScrollDispatcher} from '@angular/cdk/scrolling';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
@@ -20,26 +25,15 @@ import {
ViewEncapsulation,
} from '@angular/core';
import {DOCUMENT} from '@angular/common';
-import {Platform} from '@angular/cdk/platform';
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
-import {AriaDescriber, FocusMonitor} from '@angular/cdk/a11y';
-import {Directionality} from '@angular/cdk/bidi';
-import {ConnectedPosition, Overlay, ScrollDispatcher} from '@angular/cdk/overlay';
+import {Observable} from 'rxjs';
import {
- MatTooltipDefaultOptions,
- MAT_TOOLTIP_DEFAULT_OPTIONS,
- MAT_TOOLTIP_SCROLL_STRATEGY,
_MatTooltipBase,
_TooltipComponentBase,
+ MAT_TOOLTIP_DEFAULT_OPTIONS,
+ MAT_TOOLTIP_SCROLL_STRATEGY,
+ MatTooltipDefaultOptions,
} from '@angular/material/tooltip';
-import {numbers} from '@material/tooltip';
-
-/**
- * CSS class that will be attached to the overlay panel.
- * @deprecated
- * @breaking-change 13.0.0 remove this variable
- */
-export const TOOLTIP_PANEL_CLASS = 'mat-mdc-tooltip-panel';
/**
* Directive that attaches a material design tooltip to the host element. Animates the showing and
@@ -51,12 +45,11 @@ export const TOOLTIP_PANEL_CLASS = 'mat-mdc-tooltip-panel';
selector: '[matTooltip]',
exportAs: 'matTooltip',
host: {
- 'class': 'mat-mdc-tooltip-trigger',
+ 'class': 'mat-tooltip-trigger',
},
})
-export class MatTooltip extends _MatTooltipBase {
- protected override readonly _tooltipComponent = TooltipComponent;
- protected override readonly _cssClassPrefix = 'mat-mdc';
+export class MatLegacyTooltip extends _MatTooltipBase {
+ protected readonly _tooltipComponent = LegacyTooltipComponent;
constructor(
overlay: Overlay,
@@ -86,24 +79,6 @@ export class MatTooltip extends _MatTooltipBase {
defaultOptions,
_document,
);
- this._viewportMargin = numbers.MIN_VIEWPORT_TOOLTIP_THRESHOLD;
- }
-
- protected override _addOffset(position: ConnectedPosition): ConnectedPosition {
- const offset = numbers.UNBOUNDED_ANCHOR_GAP;
- const isLtr = !this._dir || this._dir.value == 'ltr';
-
- if (position.originY === 'top') {
- position.offsetY = -offset;
- } else if (position.originY === 'bottom') {
- position.offsetY = offset;
- } else if (position.originX === 'start') {
- position.offsetX = isLtr ? -offset : offset;
- } else if (position.originX === 'end') {
- position.offsetX = isLtr ? offset : -offset;
- }
-
- return position;
}
}
@@ -125,36 +100,24 @@ export class MatTooltip extends _MatTooltipBase {
'aria-hidden': 'true',
},
})
-export class TooltipComponent extends _TooltipComponentBase {
- /* Whether the tooltip text overflows to multiple lines */
- _isMultiline = false;
+export class LegacyTooltipComponent extends _TooltipComponentBase {
+ /** Stream that emits whether the user has a handset-sized display. */
+ _isHandset: Observable = this._breakpointObserver.observe(Breakpoints.Handset);
+ _showAnimation = 'mat-tooltip-show';
+ _hideAnimation = 'mat-tooltip-hide';
- /** Reference to the internal tooltip element. */
@ViewChild('tooltip', {
// Use a static query here since we interact directly with
// the DOM which can happen before `ngAfterViewInit`.
static: true,
})
_tooltip: ElementRef;
- _showAnimation = 'mat-mdc-tooltip-show';
- _hideAnimation = 'mat-mdc-tooltip-hide';
constructor(
changeDetectorRef: ChangeDetectorRef,
- private _elementRef: ElementRef,
+ private _breakpointObserver: BreakpointObserver,
@Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string,
) {
super(changeDetectorRef, animationMode);
}
-
- protected override _onShow(): void {
- this._isMultiline = this._isTooltipMultiline();
- this._markForCheck();
- }
-
- /** Whether the tooltip text has overflown to the next line */
- private _isTooltipMultiline() {
- const rect = this._elementRef.nativeElement.getBoundingClientRect();
- return rect.height > numbers.MIN_HEIGHT && rect.width >= numbers.MAX_WIDTH;
- }
}
diff --git a/src/material/paginator/BUILD.bazel b/src/material/paginator/BUILD.bazel
index 532b49a2ecf5..0b3c9063411a 100644
--- a/src/material/paginator/BUILD.bazel
+++ b/src/material/paginator/BUILD.bazel
@@ -21,8 +21,8 @@ ng_module(
"//src/cdk/coercion",
"//src/material/button",
"//src/material/core",
+ "//src/material/legacy-tooltip",
"//src/material/select",
- "//src/material/tooltip",
"@npm//@angular/common",
"@npm//@angular/core",
"@npm//@angular/forms", # TODO(jelbourn): transitive dep via generated code
diff --git a/src/material/paginator/paginator-module.ts b/src/material/paginator/paginator-module.ts
index 4428ecbb4fa4..f9c15bb9750d 100644
--- a/src/material/paginator/paginator-module.ts
+++ b/src/material/paginator/paginator-module.ts
@@ -11,12 +11,18 @@ import {NgModule} from '@angular/core';
import {MatCommonModule} from '@angular/material/core';
import {MatButtonModule} from '@angular/material/button';
import {MatSelectModule} from '@angular/material/select';
-import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
import {MatPaginator} from './paginator';
import {MAT_PAGINATOR_INTL_PROVIDER} from './paginator-intl';
@NgModule({
- imports: [CommonModule, MatButtonModule, MatSelectModule, MatTooltipModule, MatCommonModule],
+ imports: [
+ CommonModule,
+ MatButtonModule,
+ MatSelectModule,
+ MatLegacyTooltipModule,
+ MatCommonModule,
+ ],
exports: [MatPaginator],
declarations: [MatPaginator],
providers: [MAT_PAGINATOR_INTL_PROVIDER],
diff --git a/src/material/tooltip/BUILD.bazel b/src/material/tooltip/BUILD.bazel
index de6c0e1c098f..8ec0805fd2eb 100644
--- a/src/material/tooltip/BUILD.bazel
+++ b/src/material/tooltip/BUILD.bazel
@@ -14,46 +14,47 @@ ng_module(
name = "tooltip",
srcs = glob(
["**/*.ts"],
- exclude = ["**/*.spec.ts"],
+ exclude = [
+ "**/*.spec.ts",
+ ],
),
- assets = [":tooltip.css"] + glob(["**/*.html"]),
+ assets = [
+ ":tooltip_scss",
+ ] + glob(["**/*.html"]),
deps = [
- "//src:dev_mode_types",
- "//src/cdk/a11y",
- "//src/cdk/bidi",
"//src/cdk/coercion",
- "//src/cdk/keycodes",
- "//src/cdk/layout",
"//src/cdk/overlay",
- "//src/cdk/platform",
"//src/cdk/portal",
- "//src/cdk/scrolling",
"//src/material/core",
- "@npm//@angular/common",
- "@npm//@angular/core",
- "@npm//rxjs",
+ "@npm//@material/tooltip",
],
)
sass_library(
name = "tooltip_scss_lib",
srcs = glob(["**/_*.scss"]),
- deps = ["//src/material/core:core_scss_lib"],
+ deps = [
+ "//:mdc_sass_lib",
+ "//src/material/core:core_scss_lib",
+ ],
)
sass_binary(
name = "tooltip_scss",
src = "tooltip.scss",
deps = [
- "//src/cdk:sass_lib",
+ "//:mdc_sass_lib",
+ "//src/material/core:core_scss_lib",
],
)
ng_test_library(
- name = "unit_test_sources",
+ name = "tooltip_tests_lib",
srcs = glob(
["**/*.spec.ts"],
- exclude = ["**/*.e2e.spec.ts"],
+ exclude = [
+ "**/*.e2e.spec.ts",
+ ],
),
deps = [
":tooltip",
@@ -63,6 +64,7 @@ ng_test_library(
"//src/cdk/overlay",
"//src/cdk/platform",
"//src/cdk/testing/private",
+ "@npm//@angular/animations",
"@npm//@angular/platform-browser",
"@npm//rxjs",
],
@@ -70,7 +72,9 @@ ng_test_library(
ng_web_test_suite(
name = "unit_tests",
- deps = [":unit_test_sources"],
+ deps = [
+ ":tooltip_tests_lib",
+ ],
)
markdown_to_html(
diff --git a/src/material/tooltip/README.md b/src/material/tooltip/README.md
index b2f403793554..c82fc6795bae 100644
--- a/src/material/tooltip/README.md
+++ b/src/material/tooltip/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/tooltip
\ No newline at end of file
+Please see the official documentation at https://material.angular.io/components/component/tooltip
diff --git a/src/material/tooltip/_tooltip-theme.import.scss b/src/material/tooltip/_tooltip-theme.import.scss
index 4a0efa17862d..2bb4d09f26a3 100644
--- a/src/material/tooltip/_tooltip-theme.import.scss
+++ b/src/material/tooltip/_tooltip-theme.import.scss
@@ -1,9 +1,2 @@
-@forward '../core/theming/theming.import';
-@forward '../core/typography/typography-utils.import';
-@forward 'tooltip-theme' hide $font-size, $handset-font-size, $handset-target-height,
-$handset-vertical-padding, $target-height, $vertical-padding, color, theme, typography;
-@forward 'tooltip-theme' as mat-tooltip-* hide mat-tooltip-density;
+@forward 'tooltip-theme' as mat-mdc-tooltip-*;
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/typography/typography-utils';
diff --git a/src/material/tooltip/_tooltip-theme.scss b/src/material/tooltip/_tooltip-theme.scss
index f4abc670b893..e7af11b0480c 100644
--- a/src/material/tooltip/_tooltip-theme.scss
+++ b/src/material/tooltip/_tooltip-theme.scss
@@ -1,44 +1,34 @@
@use 'sass:map';
-@use 'sass:math';
+@use '@material/tooltip/tooltip';
+@use '@material/tooltip' as tooltip-theme;
@use '../core/theming/theming';
+@use '../core/theming/palette';
+@use '../core/mdc-helpers/mdc-helpers';
@use '../core/typography/typography';
-@use '../core/typography/typography-utils';
-
-$target-height: 22px;
-$font-size: 10px;
-$vertical-padding: math.div($target-height - $font-size, 2);
-
-$handset-target-height: 30px;
-$handset-font-size: 14px;
-$handset-vertical-padding: math.div($handset-target-height - $handset-font-size, 2);
@mixin color($config-or-theme) {
$config: theming.get-color-config($config-or-theme);
- $background: map.get($config, background);
-
- .mat-tooltip {
- background: theming.get-color-from-palette($background, tooltip, 0.9);
+ @include mdc-helpers.using-mdc-theme($config) {
+ @include tooltip.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
+ // We are defining our own tooltip background color because of concerns
+ // surrounding the 0.6 background color opacity of the MDC tooltip styles.
+ @include tooltip-theme.fill-color(
+ map.get(palette.$light-theme-background-palette, tooltip)
+ );
}
}
@mixin typography($config-or-theme) {
- $config: typography.private-typography-to-2014-config(
- theming.get-typography-config($config-or-theme));
- .mat-tooltip {
- font-family: typography-utils.font-family($config);
- font-size: $font-size;
- padding-top: $vertical-padding;
- padding-bottom: $vertical-padding;
- }
-
- .mat-tooltip-handset {
- font-size: $handset-font-size;
- padding-top: $handset-vertical-padding;
- padding-bottom: $handset-vertical-padding;
+ $config: typography.private-typography-to-2018-config(
+ theming.get-typography-config($config-or-theme));
+ @include mdc-helpers.using-mdc-typography($config) {
+ @include tooltip.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
}
}
-@mixin _density($config-or-theme) {}
+@mixin density($config-or-theme) {
+ $density-scale: theming.get-density-config($config-or-theme);
+}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -51,11 +41,10 @@ $handset-vertical-padding: math.div($handset-target-height - $handset-font-size,
@include color($color);
}
@if $density != null {
- @include _density($density);
+ @include density($density);
}
@if $typography != null {
@include typography($typography);
}
}
}
-
diff --git a/src/material-experimental/mdc-tooltip/module.ts b/src/material/tooltip/module.ts
similarity index 77%
rename from src/material-experimental/mdc-tooltip/module.ts
rename to src/material/tooltip/module.ts
index 33aca8410dd2..fc3cd81e1c32 100644
--- a/src/material-experimental/mdc-tooltip/module.ts
+++ b/src/material/tooltip/module.ts
@@ -11,9 +11,12 @@ import {CommonModule} from '@angular/common';
import {A11yModule} from '@angular/cdk/a11y';
import {OverlayModule} from '@angular/cdk/overlay';
import {CdkScrollableModule} from '@angular/cdk/scrolling';
-import {MatCommonModule} from '@angular/material-experimental/mdc-core';
-import {MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER} from '@angular/material/tooltip';
-import {MatTooltip, TooltipComponent} from './tooltip';
+import {MatCommonModule} from '@angular/material/core';
+import {
+ MatTooltip,
+ TooltipComponent,
+ MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER,
+} from './tooltip';
@NgModule({
imports: [A11yModule, CommonModule, OverlayModule, MatCommonModule],
diff --git a/src/material/tooltip/public-api.ts b/src/material/tooltip/public-api.ts
index 4181ad895781..5e8a5f711b99 100644
--- a/src/material/tooltip/public-api.ts
+++ b/src/material/tooltip/public-api.ts
@@ -6,6 +6,6 @@
* found in the LICENSE file at https://angular.io/license
*/
-export * from './tooltip-module';
export * from './tooltip';
export * from './tooltip-animations';
+export * from './module';
diff --git a/src/material/tooltip/testing/BUILD.bazel b/src/material/tooltip/testing/BUILD.bazel
index 3d1f0d20be19..abfc1c2a28cd 100644
--- a/src/material/tooltip/testing/BUILD.bazel
+++ b/src/material/tooltip/testing/BUILD.bazel
@@ -18,32 +18,19 @@ filegroup(
srcs = glob(["**/*.ts"]),
)
-ng_test_library(
- name = "harness_tests_lib",
- srcs = ["shared.spec.ts"],
- deps = [
- ":testing",
- "//src/cdk/testing",
- "//src/cdk/testing/testbed",
- "//src/material/tooltip",
- "@npm//@angular/platform-browser",
- ],
-)
-
ng_test_library(
name = "unit_tests_lib",
- srcs = glob(
- ["**/*.spec.ts"],
- exclude = ["shared.spec.ts"],
- ),
+ srcs = glob(["**/*.spec.ts"]),
deps = [
- ":harness_tests_lib",
":testing",
+ "//src/material/legacy-tooltip/testing:harness_tests_lib",
"//src/material/tooltip",
],
)
ng_web_test_suite(
name = "unit_tests",
- deps = [":unit_tests_lib"],
+ deps = [
+ ":unit_tests_lib",
+ ],
)
diff --git a/src/material/tooltip/testing/tooltip-harness.spec.ts b/src/material/tooltip/testing/tooltip-harness.spec.ts
index eb1446ae478c..3649f65f9b79 100644
--- a/src/material/tooltip/testing/tooltip-harness.spec.ts
+++ b/src/material/tooltip/testing/tooltip-harness.spec.ts
@@ -1,7 +1,7 @@
import {MatTooltipModule} from '@angular/material/tooltip';
-import {runHarnessTests} from '@angular/material/tooltip/testing/shared.spec';
-import {MatTooltipHarness} from './tooltip-harness';
+import {runHarnessTests} from '@angular/material/legacy-tooltip/testing/shared.spec';
+import {MatTooltipHarness} from './index';
-describe('Non-MDC-based MatTooltipHarness', () => {
- runHarnessTests(MatTooltipModule, MatTooltipHarness);
+describe('MDC-based MatTooltipHarness', () => {
+ runHarnessTests(MatTooltipModule, MatTooltipHarness as any);
});
diff --git a/src/material/tooltip/testing/tooltip-harness.ts b/src/material/tooltip/testing/tooltip-harness.ts
index bd1ce13c833f..70b2e5e82662 100644
--- a/src/material/tooltip/testing/tooltip-harness.ts
+++ b/src/material/tooltip/testing/tooltip-harness.ts
@@ -9,6 +9,7 @@
import {
AsyncFactoryFn,
ComponentHarness,
+ ComponentHarnessConstructor,
HarnessPredicate,
TestElement,
} from '@angular/cdk/testing';
@@ -60,19 +61,23 @@ export abstract class _MatTooltipHarnessBase extends ComponentHarness {
/** Harness for interacting with a standard mat-tooltip in tests. */
export class MatTooltipHarness extends _MatTooltipHarnessBase {
- protected _optionalPanel = this.documentRootLocatorFactory().locatorForOptional('.mat-tooltip');
- protected _hiddenClass = 'mat-tooltip-hide';
- protected _showAnimationName = 'mat-tooltip-show';
- protected _hideAnimationName = 'mat-tooltip-hide';
- static hostSelector = '.mat-tooltip-trigger';
+ protected _optionalPanel =
+ this.documentRootLocatorFactory().locatorForOptional('.mat-mdc-tooltip');
+ static hostSelector = '.mat-mdc-tooltip-trigger';
+ protected _hiddenClass = 'mat-mdc-tooltip-hide';
+ protected _showAnimationName = 'mat-mdc-tooltip-show';
+ protected _hideAnimationName = 'mat-mdc-tooltip-hide';
/**
- * Gets a `HarnessPredicate` that can be used to search
- * for a tooltip trigger with specific attributes.
+ * Gets a `HarnessPredicate` that can be used to search for a tooltip trigger with specific
+ * attributes.
* @param options Options for narrowing the search.
* @return a `HarnessPredicate` configured with the given options.
*/
- static with(options: TooltipHarnessFilters = {}): HarnessPredicate {
- return new HarnessPredicate(MatTooltipHarness, options);
+ static with(
+ this: ComponentHarnessConstructor,
+ options: TooltipHarnessFilters = {},
+ ): HarnessPredicate {
+ return new HarnessPredicate(this, options);
}
}
diff --git a/src/material/tooltip/tooltip-animations.ts b/src/material/tooltip/tooltip-animations.ts
index a52daf42c450..1f4c33dd275e 100644
--- a/src/material/tooltip/tooltip-animations.ts
+++ b/src/material/tooltip/tooltip-animations.ts
@@ -8,7 +8,6 @@
import {
animate,
AnimationTriggerMetadata,
- keyframes,
state,
style,
transition,
@@ -24,19 +23,11 @@ export const matTooltipAnimations: {
} = {
/** Animation that transitions a tooltip in and out. */
tooltipState: trigger('state', [
- state('initial, void, hidden', style({opacity: 0, transform: 'scale(0)'})),
+ // TODO(crisbeto): these values are based on MDC's CSS.
+ // We should be able to use their styles directly once we land #19432.
+ state('initial, void, hidden', style({opacity: 0, transform: 'scale(0.8)'})),
state('visible', style({transform: 'scale(1)'})),
- transition(
- '* => visible',
- animate(
- '200ms cubic-bezier(0, 0, 0.2, 1)',
- keyframes([
- style({opacity: 0, transform: 'scale(0)', offset: 0}),
- style({opacity: 0.5, transform: 'scale(0.99)', offset: 0.5}),
- style({opacity: 1, transform: 'scale(1)', offset: 1}),
- ]),
- ),
- ),
- transition('* => hidden', animate('100ms cubic-bezier(0, 0, 0.2, 1)', style({opacity: 0}))),
+ transition('* => visible', animate('150ms cubic-bezier(0, 0, 0.2, 1)')),
+ transition('* => hidden', animate('75ms cubic-bezier(0.4, 0, 1, 1)')),
]),
};
diff --git a/src/material/tooltip/tooltip.html b/src/material/tooltip/tooltip.html
index cf6bd74a0592..28b374a88f8a 100644
--- a/src/material/tooltip/tooltip.html
+++ b/src/material/tooltip/tooltip.html
@@ -1,5 +1,8 @@
-{{message}}
+
diff --git a/src/material/tooltip/tooltip.scss b/src/material/tooltip/tooltip.scss
index 61a547d431b9..5901072294cb 100644
--- a/src/material/tooltip/tooltip.scss
+++ b/src/material/tooltip/tooltip.scss
@@ -1,52 +1,41 @@
-@use '@angular/cdk';
+@use '@material/tooltip/tooltip';
-$horizontal-padding: 8px;
-$max-width: 250px;
-$margin: 14px;
+// Only include the structural styles, because we handle the animation ourselves.
+@include tooltip.core-styles($query: structure);
-$handset-horizontal-padding: 16px;
-$handset-margin: 24px;
-
-.mat-tooltip {
- color: white;
- border-radius: 4px;
- margin: $margin;
- max-width: $max-width;
- padding-left: $horizontal-padding;
- padding-right: $horizontal-padding;
- overflow: hidden;
- text-overflow: ellipsis;
+.mat-mdc-tooltip {
+ // We don't use MDC's positioning so this has to be relative.
+ position: relative;
transform: scale(0);
+ // Increases the area of the tooltip so the user's pointer can go from the trigger directly to it.
+ &::before {
+ $offset: -8px;
+ content: '';
+ top: $offset;
+ right: $offset;
+ bottom: $offset;
+ left: $offset;
+ z-index: -1;
+ position: absolute;
+ }
+
&._mat-animation-noopable {
animation: none;
transform: scale(1);
}
-
- @include cdk.high-contrast(active, off) {
- outline: solid 1px;
- }
}
-.mat-tooltip-handset {
- margin: $handset-margin;
- padding-left: $handset-horizontal-padding;
- padding-right: $handset-horizontal-padding;
-}
-
-.mat-tooltip-panel-non-interactive {
+.mat-mdc-tooltip-panel-non-interactive {
pointer-events: none;
}
-@keyframes mat-tooltip-show {
+// TODO(crisbeto): we may be able to use MDC directly for these animations.
+
+@keyframes mat-mdc-tooltip-show {
0% {
opacity: 0;
- transform: scale(0);
- }
-
- 50% {
- opacity: 0.5;
- transform: scale(0.99);
+ transform: scale(0.8);
}
100% {
@@ -55,7 +44,7 @@ $handset-margin: 24px;
}
}
-@keyframes mat-tooltip-hide {
+@keyframes mat-mdc-tooltip-hide {
0% {
opacity: 1;
transform: scale(1);
@@ -63,14 +52,14 @@ $handset-margin: 24px;
100% {
opacity: 0;
- transform: scale(1);
+ transform: scale(0.8);
}
}
-.mat-tooltip-show {
- animation: mat-tooltip-show 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
+.mat-mdc-tooltip-show {
+ animation: mat-mdc-tooltip-show 150ms cubic-bezier(0, 0, 0.2, 1) forwards;
}
-.mat-tooltip-hide {
- animation: mat-tooltip-hide 100ms cubic-bezier(0, 0, 0.2, 1) forwards;
+.mat-mdc-tooltip-hide {
+ animation: mat-mdc-tooltip-hide 75ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
diff --git a/src/material/tooltip/tooltip.spec.ts b/src/material/tooltip/tooltip.spec.ts
index 4bc23b88c980..369779bad0e3 100644
--- a/src/material/tooltip/tooltip.spec.ts
+++ b/src/material/tooltip/tooltip.spec.ts
@@ -44,7 +44,7 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations';
const initialTooltipMessage = 'initial tooltip message';
-describe('MatTooltip', () => {
+describe('MDC-based MatTooltip', () => {
let overlayContainerElement: HTMLElement;
let dir: {value: Direction; change: Subject};
let platform: Platform;
@@ -111,9 +111,11 @@ describe('MatTooltip', () => {
finishCurrentTooltipAnimation(overlayContainerElement, true);
// Make sure tooltip is shown to the user and animation has finished.
- const tooltipElement = overlayContainerElement.querySelector('.mat-tooltip') as HTMLElement;
+ const tooltipElement = overlayContainerElement.querySelector(
+ '.mat-mdc-tooltip',
+ ) as HTMLElement;
expect(tooltipElement instanceof HTMLElement).toBe(true);
- expect(tooltipElement.classList).toContain('mat-tooltip-show');
+ expect(tooltipElement.classList).toContain('mat-mdc-tooltip-show');
expect(overlayContainerElement.textContent).toContain(initialTooltipMessage);
@@ -257,7 +259,7 @@ describe('MatTooltip', () => {
tick();
expect(tooltipDirective._overlayRef?.overlayElement.classList).toContain(
- 'mat-tooltip-panel-non-interactive',
+ 'mat-mdc-tooltip-panel-non-interactive',
);
}));
@@ -271,7 +273,7 @@ describe('MatTooltip', () => {
expect(!!overlayRef).toBeTruthy();
expect(overlayRef!.overlayElement.classList)
.withContext('Expected the overlay panel element to have the tooltip panel class set.')
- .toContain('mat-tooltip-panel');
+ .toContain('mat-mdc-tooltip-panel');
}));
it('should not show if disabled', fakeAsync(() => {
@@ -446,20 +448,22 @@ describe('MatTooltip', () => {
fixture.detectChanges();
// Make sure classes aren't prematurely added
- let tooltipElement = overlayContainerElement.querySelector('.mat-tooltip') as HTMLElement;
- expect(tooltipElement.classList)
- .not.withContext('Expected to not have the class before enabling matTooltipClass')
- .toContain('custom-one');
- expect(tooltipElement.classList)
- .not.withContext('Expected to not have the class before enabling matTooltipClass')
- .toContain('custom-two');
+ let tooltipElement = overlayContainerElement.querySelector('.mat-mdc-tooltip') as HTMLElement;
+ expect(tooltipElement.classList).not.toContain(
+ 'custom-one',
+ 'Expected to not have the class before enabling matTooltipClass',
+ );
+ expect(tooltipElement.classList).not.toContain(
+ 'custom-two',
+ 'Expected to not have the class before enabling matTooltipClass',
+ );
// Enable the classes via ngClass syntax
fixture.componentInstance.showTooltipClass = true;
fixture.detectChanges();
// Make sure classes are correctly added
- tooltipElement = overlayContainerElement.querySelector('.mat-tooltip') as HTMLElement;
+ tooltipElement = overlayContainerElement.querySelector('.mat-mdc-tooltip') as HTMLElement;
expect(tooltipElement.classList)
.withContext('Expected to have the class after enabling matTooltipClass')
.toContain('custom-one');
@@ -687,6 +691,7 @@ describe('MatTooltip', () => {
tooltipDirective.show();
tick(0);
fixture.detectChanges();
+
document.body.click();
fixture.detectChanges();
tick(500);
@@ -759,7 +764,7 @@ describe('MatTooltip', () => {
fixture.detectChanges();
tick(500);
- expect(overlayContainerElement.querySelector('.mat-tooltip')).toBeNull();
+ expect(overlayContainerElement.querySelector('.mat-mdc-tooltip')).toBeNull();
}));
it('should not show the tooltip on mouse focus', fakeAsync(() => {
@@ -771,7 +776,7 @@ describe('MatTooltip', () => {
fixture.detectChanges();
tick(500);
- expect(overlayContainerElement.querySelector('.mat-tooltip')).toBeNull();
+ expect(overlayContainerElement.querySelector('.mat-mdc-tooltip')).toBeNull();
}));
it('should not show the tooltip on touch focus', fakeAsync(() => {
@@ -783,7 +788,7 @@ describe('MatTooltip', () => {
fixture.detectChanges();
tick(500);
- expect(overlayContainerElement.querySelector('.mat-tooltip')).toBeNull();
+ expect(overlayContainerElement.querySelector('.mat-mdc-tooltip')).toBeNull();
}));
it('should not hide the tooltip when calling `show` twice in a row', fakeAsync(() => {
@@ -816,19 +821,19 @@ describe('MatTooltip', () => {
setPositionAndShow('below');
const classList = tooltipDirective._overlayRef!.overlayElement.classList;
- expect(classList).toContain('mat-tooltip-panel-below');
+ expect(classList).toContain('mat-mdc-tooltip-panel-below');
setPositionAndShow('above');
- expect(classList).not.toContain('mat-tooltip-panel-below');
- expect(classList).toContain('mat-tooltip-panel-above');
+ expect(classList).not.toContain('mat-mdc-tooltip-panel-below');
+ expect(classList).toContain('mat-mdc-tooltip-panel-above');
setPositionAndShow('left');
- expect(classList).not.toContain('mat-tooltip-panel-above');
- expect(classList).toContain('mat-tooltip-panel-left');
+ expect(classList).not.toContain('mat-mdc-tooltip-panel-above');
+ expect(classList).toContain('mat-mdc-tooltip-panel-left');
setPositionAndShow('right');
- expect(classList).not.toContain('mat-tooltip-panel-left');
- expect(classList).toContain('mat-tooltip-panel-right');
+ expect(classList).not.toContain('mat-mdc-tooltip-panel-left');
+ expect(classList).toContain('mat-mdc-tooltip-panel-right');
function setPositionAndShow(position: TooltipPosition) {
tooltipDirective.hide(0);
@@ -859,10 +864,10 @@ describe('MatTooltip', () => {
tick(500);
const classList = tooltipDirective._overlayRef!.overlayElement.classList;
- expect(classList).not.toContain('mat-tooltip-panel-after');
- expect(classList).not.toContain('mat-tooltip-panel-before');
- expect(classList).not.toContain('mat-tooltip-panel-left');
- expect(classList).toContain('mat-tooltip-panel-right');
+ expect(classList).not.toContain('mat-mdc-tooltip-panel-after');
+ expect(classList).not.toContain('mat-mdc-tooltip-panel-before');
+ expect(classList).not.toContain('mat-mdc-tooltip-panel-left');
+ expect(classList).toContain('mat-mdc-tooltip-panel-right');
tooltipDirective.hide(0);
fixture.detectChanges();
@@ -874,10 +879,10 @@ describe('MatTooltip', () => {
fixture.detectChanges();
tick(500);
- expect(classList).not.toContain('mat-tooltip-panel-after');
- expect(classList).not.toContain('mat-tooltip-panel-before');
- expect(classList).not.toContain('mat-tooltip-panel-right');
- expect(classList).toContain('mat-tooltip-panel-left');
+ expect(classList).not.toContain('mat-mdc-tooltip-panel-after');
+ expect(classList).not.toContain('mat-mdc-tooltip-panel-before');
+ expect(classList).not.toContain('mat-mdc-tooltip-panel-right');
+ expect(classList).toContain('mat-mdc-tooltip-panel-left');
}));
it('should clear the show timeout on destroy', fakeAsync(() => {
@@ -907,6 +912,25 @@ describe('MatTooltip', () => {
fixture.destroy();
}));
+ it('should set the multiline class on tooltips with messages that overflow', fakeAsync(() => {
+ fixture.componentInstance.message =
+ 'This is a very long message that should cause the' +
+ 'tooltip message body to overflow onto a new line.';
+ tooltipDirective.show();
+ fixture.detectChanges();
+ tick();
+
+ // Need to detect changes again to wait for the multiline class to be applied.
+ fixture.detectChanges();
+
+ const tooltipElement = overlayContainerElement.querySelector(
+ '.mat-mdc-tooltip',
+ ) as HTMLElement;
+
+ expect(tooltipElement.classList).toContain('mdc-tooltip--multiline');
+ expect(tooltipDirective._tooltipInstance?._isMultiline).toBeTrue();
+ }));
+
it('should hide on mouseleave on the trigger', fakeAsync(() => {
// We don't bind mouse events on mobile devices.
if (platform.IOS || platform.ANDROID) {
@@ -935,7 +959,9 @@ describe('MatTooltip', () => {
tick(0);
expect(tooltipDirective._isTooltipVisible()).toBe(true);
- const tooltipElement = overlayContainerElement.querySelector('.mat-tooltip') as HTMLElement;
+ const tooltipElement = overlayContainerElement.querySelector(
+ '.mat-mdc-tooltip',
+ ) as HTMLElement;
const event = createMouseEvent('mouseleave');
Object.defineProperty(event, 'relatedTarget', {value: tooltipElement});
@@ -956,7 +982,9 @@ describe('MatTooltip', () => {
tick(0);
expect(tooltipDirective._isTooltipVisible()).toBe(true);
- const tooltipElement = overlayContainerElement.querySelector('.mat-tooltip') as HTMLElement;
+ const tooltipElement = overlayContainerElement.querySelector(
+ '.mat-mdc-tooltip',
+ ) as HTMLElement;
dispatchMouseEvent(tooltipElement, 'mouseleave');
fixture.detectChanges();
tick(0);
@@ -974,7 +1002,9 @@ describe('MatTooltip', () => {
tick(0);
expect(tooltipDirective._isTooltipVisible()).toBe(true);
- const tooltipElement = overlayContainerElement.querySelector('.mat-tooltip') as HTMLElement;
+ const tooltipElement = overlayContainerElement.querySelector(
+ '.mat-mdc-tooltip',
+ ) as HTMLElement;
const event = createMouseEvent('mouseleave');
Object.defineProperty(event, 'relatedTarget', {
value: fixture.componentInstance.button.nativeElement,
@@ -1123,9 +1153,11 @@ describe('MatTooltip', () => {
finishCurrentTooltipAnimation(overlayContainerElement, true);
// Make sure tooltip is shown to the user and animation has finished
- const tooltipElement = overlayContainerElement.querySelector('.mat-tooltip') as HTMLElement;
+ const tooltipElement = overlayContainerElement.querySelector(
+ '.mat-mdc-tooltip',
+ ) as HTMLElement;
expect(tooltipElement instanceof HTMLElement).toBe(true);
- expect(tooltipElement.classList).toContain('mat-tooltip-show');
+ expect(tooltipElement.classList).toContain('mat-mdc-tooltip-show');
// After hide called, a timeout delay is created that will to hide the tooltip.
const tooltipDelay = 1000;
@@ -1152,7 +1184,9 @@ describe('MatTooltip', () => {
fixture.detectChanges();
tick(0);
- const tooltipElement = overlayContainerElement.querySelector('.mat-tooltip') as HTMLElement;
+ const tooltipElement = overlayContainerElement.querySelector(
+ '.mat-mdc-tooltip',
+ ) as HTMLElement;
expect(tooltipElement.textContent).toContain('initial tooltip message');
}));
});
@@ -1563,10 +1597,10 @@ function assertTooltipInstance(tooltip: MatTooltip, shouldExist: boolean): void
}
function finishCurrentTooltipAnimation(overlayContainer: HTMLElement, isVisible: boolean) {
- const tooltip = overlayContainer.querySelector('.mat-tooltip')!;
+ const tooltip = overlayContainer.querySelector('.mat-mdc-tooltip')!;
const event = createFakeEvent('animationend');
Object.defineProperty(event, 'animationName', {
- get: () => `mat-tooltip-${isVisible ? 'show' : 'hide'}`,
+ get: () => `mat-mdc-tooltip-${isVisible ? 'show' : 'hide'}`,
});
dispatchEvent(tooltip, event);
}
diff --git a/src/material/tooltip/tooltip.ts b/src/material/tooltip/tooltip.ts
index 77c9a665acb4..4dbb65e9d9f5 100644
--- a/src/material/tooltip/tooltip.ts
+++ b/src/material/tooltip/tooltip.ts
@@ -5,8 +5,7 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
-import {AriaDescriber, FocusMonitor} from '@angular/cdk/a11y';
-import {Directionality} from '@angular/cdk/bidi';
+import {take, takeUntil} from 'rxjs/operators';
import {
BooleanInput,
coerceBooleanProperty,
@@ -14,23 +13,8 @@ import {
NumberInput,
} from '@angular/cdk/coercion';
import {ESCAPE, hasModifierKey} from '@angular/cdk/keycodes';
-import {BreakpointObserver, Breakpoints, BreakpointState} from '@angular/cdk/layout';
-import {
- FlexibleConnectedPositionStrategy,
- HorizontalConnectionPos,
- OriginConnectionPosition,
- Overlay,
- OverlayConnectionPosition,
- OverlayRef,
- ScrollStrategy,
- VerticalConnectionPos,
- ConnectionPositionPair,
- ConnectedPosition,
-} from '@angular/cdk/overlay';
-import {Platform, normalizePassiveListenerOptions} from '@angular/cdk/platform';
-import {ComponentPortal, ComponentType} from '@angular/cdk/portal';
-import {ScrollDispatcher} from '@angular/cdk/scrolling';
import {
+ AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
@@ -42,15 +26,32 @@ import {
NgZone,
OnDestroy,
Optional,
+ ViewChild,
ViewContainerRef,
ViewEncapsulation,
- AfterViewInit,
- ViewChild,
} from '@angular/core';
import {DOCUMENT} from '@angular/common';
+import {normalizePassiveListenerOptions, Platform} from '@angular/cdk/platform';
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
+import {AriaDescriber, FocusMonitor} from '@angular/cdk/a11y';
+import {Directionality} from '@angular/cdk/bidi';
+import {
+ ComponentType,
+ ConnectedPosition,
+ ConnectionPositionPair,
+ FlexibleConnectedPositionStrategy,
+ HorizontalConnectionPos,
+ OriginConnectionPosition,
+ Overlay,
+ OverlayConnectionPosition,
+ OverlayRef,
+ ScrollDispatcher,
+ ScrollStrategy,
+ VerticalConnectionPos,
+} from '@angular/cdk/overlay';
+import {numbers} from '@material/tooltip';
+import {ComponentPortal} from '@angular/cdk/portal';
import {Observable, Subject} from 'rxjs';
-import {take, takeUntil} from 'rxjs/operators';
/** Possible positions for a tooltip. */
export type TooltipPosition = 'left' | 'right' | 'above' | 'below' | 'before' | 'after';
@@ -67,24 +68,6 @@ export type TooltipVisibility = 'initial' | 'visible' | 'hidden';
/** 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.
- * @deprecated
- * @breaking-change 13.0.0 remove this variable
- */
-export const TOOLTIP_PANEL_CLASS = 'mat-tooltip-panel';
-
-const PANEL_CLASS = 'tooltip-panel';
-
-/** Options used to bind passive event listeners. */
-const passiveListenerOptions = normalizePassiveListenerOptions({passive: true});
-
-/**
- * Time between the user putting the pointer on a tooltip
- * trigger and the long press event being fired.
- */
-const LONGPRESS_DELAY = 500;
-
/**
* Creates an error to be thrown if the user supplied an invalid tooltip position.
* @docs-private
@@ -110,6 +93,24 @@ export const MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER = {
useFactory: MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY,
};
+/** @docs-private */
+export function MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY(): MatTooltipDefaultOptions {
+ return {
+ showDelay: 0,
+ hideDelay: 0,
+ touchendHideDelay: 1500,
+ };
+}
+
+/** Injection token to be used to override the default options for `matTooltip`. */
+export const MAT_TOOLTIP_DEFAULT_OPTIONS = new InjectionToken(
+ 'mat-tooltip-default-options',
+ {
+ providedIn: 'root',
+ factory: MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY,
+ },
+);
+
/** Default `matTooltip` options that can be overridden. */
export interface MatTooltipDefaultOptions {
/** Default delay when the tooltip is shown. */
@@ -131,23 +132,23 @@ export interface MatTooltipDefaultOptions {
disableTooltipInteractivity?: boolean;
}
-/** Injection token to be used to override the default options for `matTooltip`. */
-export const MAT_TOOLTIP_DEFAULT_OPTIONS = new InjectionToken(
- 'mat-tooltip-default-options',
- {
- providedIn: 'root',
- factory: MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY,
- },
-);
+/**
+ * CSS class that will be attached to the overlay panel.
+ * @deprecated
+ * @breaking-change 13.0.0 remove this variable
+ */
+export const TOOLTIP_PANEL_CLASS = 'mat-mdc-tooltip-panel';
-/** @docs-private */
-export function MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY(): MatTooltipDefaultOptions {
- return {
- showDelay: 0,
- hideDelay: 0,
- touchendHideDelay: 1500,
- };
-}
+const PANEL_CLASS = 'tooltip-panel';
+
+/** Options used to bind passive event listeners. */
+const passiveListenerOptions = normalizePassiveListenerOptions({passive: true});
+
+/**
+ * Time between the user putting the pointer on a tooltip
+ * trigger and the long press event being fired.
+ */
+const LONGPRESS_DELAY = 500;
@Directive()
export abstract class _MatTooltipBase
@@ -173,6 +174,7 @@ export abstract class _MatTooltipBase
get position(): TooltipPosition {
return this._position;
}
+
set position(value: TooltipPosition) {
if (value !== this._position) {
this._position = value;
@@ -190,6 +192,7 @@ export abstract class _MatTooltipBase
get disabled(): boolean {
return this._disabled;
}
+
set disabled(value: BooleanInput) {
this._disabled = coerceBooleanProperty(value);
@@ -206,9 +209,11 @@ export abstract class _MatTooltipBase
get showDelay(): number {
return this._showDelay;
}
+
set showDelay(value: NumberInput) {
this._showDelay = coerceNumberProperty(value);
}
+
private _showDelay = this._defaultOptions.showDelay;
/** The default delay in ms before hiding the tooltip after hide is called */
@@ -216,6 +221,7 @@ export abstract class _MatTooltipBase
get hideDelay(): number {
return this._hideDelay;
}
+
set hideDelay(value: NumberInput) {
this._hideDelay = coerceNumberProperty(value);
@@ -223,6 +229,7 @@ export abstract class _MatTooltipBase
this._tooltipInstance._mouseLeaveHideDelay = this._hideDelay;
}
}
+
private _hideDelay = this._defaultOptions.hideDelay;
/**
@@ -246,6 +253,7 @@ export abstract class _MatTooltipBase
get message() {
return this._message;
}
+
set message(value: string) {
this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this._message, 'tooltip');
@@ -270,6 +278,7 @@ export abstract class _MatTooltipBase
});
}
}
+
private _message = '';
/** Classes to be passed to the tooltip. Supports the same syntax as `ngClass`. */
@@ -277,6 +286,7 @@ export abstract class _MatTooltipBase
get tooltipClass() {
return this._tooltipClass;
}
+
set tooltipClass(value: string | string[] | Set | {[key: string]: any}) {
this._tooltipClass = value;
if (this._tooltipInstance) {
@@ -799,11 +809,12 @@ export abstract class _MatTooltipBase
selector: '[matTooltip]',
exportAs: 'matTooltip',
host: {
- 'class': 'mat-tooltip-trigger',
+ 'class': 'mat-mdc-tooltip-trigger',
},
})
export class MatTooltip extends _MatTooltipBase {
- protected readonly _tooltipComponent = TooltipComponent;
+ protected override readonly _tooltipComponent = TooltipComponent;
+ protected override readonly _cssClassPrefix = 'mat-mdc';
constructor(
overlay: Overlay,
@@ -833,6 +844,24 @@ export class MatTooltip extends _MatTooltipBase {
defaultOptions,
_document,
);
+ this._viewportMargin = numbers.MIN_VIEWPORT_TOOLTIP_THRESHOLD;
+ }
+
+ protected override _addOffset(position: ConnectedPosition): ConnectedPosition {
+ const offset = numbers.UNBOUNDED_ANCHOR_GAP;
+ const isLtr = !this._dir || this._dir.value == 'ltr';
+
+ if (position.originY === 'top') {
+ position.offsetY = -offset;
+ } else if (position.originY === 'bottom') {
+ position.offsetY = offset;
+ } else if (position.originX === 'start') {
+ position.offsetX = isLtr ? -offset : offset;
+ } else if (position.originX === 'end') {
+ position.offsetX = isLtr ? offset : -offset;
+ }
+
+ return position;
}
}
@@ -1037,23 +1066,35 @@ export abstract class _TooltipComponentBase implements OnDestroy {
},
})
export class TooltipComponent extends _TooltipComponentBase {
- /** Stream that emits whether the user has a handset-sized display. */
- _isHandset: Observable = this._breakpointObserver.observe(Breakpoints.Handset);
- _showAnimation = 'mat-tooltip-show';
- _hideAnimation = 'mat-tooltip-hide';
+ /* Whether the tooltip text overflows to multiple lines */
+ _isMultiline = false;
+ /** Reference to the internal tooltip element. */
@ViewChild('tooltip', {
// Use a static query here since we interact directly with
// the DOM which can happen before `ngAfterViewInit`.
static: true,
})
_tooltip: ElementRef;
+ _showAnimation = 'mat-mdc-tooltip-show';
+ _hideAnimation = 'mat-mdc-tooltip-hide';
constructor(
changeDetectorRef: ChangeDetectorRef,
- private _breakpointObserver: BreakpointObserver,
+ private _elementRef: ElementRef,
@Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string,
) {
super(changeDetectorRef, animationMode);
}
+
+ protected override _onShow(): void {
+ this._isMultiline = this._isTooltipMultiline();
+ this._markForCheck();
+ }
+
+ /** Whether the tooltip text has overflown to the next line */
+ private _isTooltipMultiline() {
+ const rect = this._elementRef.nativeElement.getBoundingClientRect();
+ return rect.height > numbers.MIN_HEIGHT && rect.width >= numbers.MAX_WIDTH;
+ }
}
diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts
index 81afe6996d73..2867cb8fded3 100644
--- a/src/universal-app/kitchen-sink/kitchen-sink.ts
+++ b/src/universal-app/kitchen-sink/kitchen-sink.ts
@@ -30,7 +30,7 @@ import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatSnackBarModule, MatSnackBar} from '@angular/material/snack-bar';
import {MatTabsModule} from '@angular/material/tabs';
import {MatToolbarModule} from '@angular/material/toolbar';
-import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
import {MatBottomSheetModule, MatBottomSheet} from '@angular/material/bottom-sheet';
import {MatBadgeModule} from '@angular/material/badge';
import {MatDividerModule} from '@angular/material/divider';
@@ -128,7 +128,7 @@ export class KitchenSink {
MatSnackBarModule,
MatTabsModule,
MatToolbarModule,
- MatTooltipModule,
+ MatLegacyTooltipModule,
MatExpansionModule,
MatSortModule,
MatTableModule,
diff --git a/tools/public_api_guard/material/legacy-tooltip-testing.md b/tools/public_api_guard/material/legacy-tooltip-testing.md
new file mode 100644
index 000000000000..a4d0ef9a0c61
--- /dev/null
+++ b/tools/public_api_guard/material/legacy-tooltip-testing.md
@@ -0,0 +1,32 @@
+## API Report File for "components-srcs"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { AsyncFactoryFn } from '@angular/cdk/testing';
+import { HarnessPredicate } from '@angular/cdk/testing';
+import { _MatTooltipHarnessBase } from '@angular/material/tooltip/testing';
+import { TestElement } from '@angular/cdk/testing';
+import { TooltipHarnessFilters } from '@angular/material/tooltip/testing';
+
+// @public
+export class MatLegacyTooltipHarness extends _MatTooltipHarnessBase {
+ // (undocumented)
+ protected _hiddenClass: string;
+ // (undocumented)
+ protected _hideAnimationName: string;
+ // (undocumented)
+ static hostSelector: string;
+ // (undocumented)
+ protected _optionalPanel: AsyncFactoryFn;
+ // (undocumented)
+ protected _showAnimationName: string;
+ static with(options?: TooltipHarnessFilters): HarnessPredicate;
+}
+
+export { TooltipHarnessFilters }
+
+// (No @packageDocumentation comment for this package)
+
+```
diff --git a/tools/public_api_guard/material/legacy-tooltip.md b/tools/public_api_guard/material/legacy-tooltip.md
new file mode 100644
index 000000000000..8a34051180f2
--- /dev/null
+++ b/tools/public_api_guard/material/legacy-tooltip.md
@@ -0,0 +1,107 @@
+## API Report File for "components-srcs"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { AnimationTriggerMetadata } from '@angular/animations';
+import { AriaDescriber } from '@angular/cdk/a11y';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { BreakpointState } from '@angular/cdk/layout';
+import { ChangeDetectorRef } from '@angular/core';
+import { Directionality } from '@angular/cdk/bidi';
+import { ElementRef } from '@angular/core';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { getMatTooltipInvalidPositionError } from '@angular/material/tooltip';
+import * as i0 from '@angular/core';
+import * as i2 from '@angular/cdk/a11y';
+import * as i3 from '@angular/common';
+import * as i4 from '@angular/cdk/overlay';
+import * as i5 from '@angular/material/core';
+import * as i6 from '@angular/cdk/scrolling';
+import { MAT_TOOLTIP_DEFAULT_OPTIONS } from '@angular/material/tooltip';
+import { MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY } from '@angular/material/tooltip';
+import { MAT_TOOLTIP_SCROLL_STRATEGY } from '@angular/material/tooltip';
+import { MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY } from '@angular/material/tooltip';
+import { MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER } from '@angular/material/tooltip';
+import { _MatTooltipBase } from '@angular/material/tooltip';
+import { MatTooltipDefaultOptions } from '@angular/material/tooltip';
+import { NgZone } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Overlay } from '@angular/cdk/overlay';
+import { Platform } from '@angular/cdk/platform';
+import { SCROLL_THROTTLE_MS } from '@angular/material/tooltip';
+import { ScrollDispatcher } from '@angular/cdk/scrolling';
+import { _TooltipComponentBase } from '@angular/material/tooltip';
+import { TooltipPosition } from '@angular/material/tooltip';
+import { TooltipTouchGestures } from '@angular/material/tooltip';
+import { TooltipVisibility } from '@angular/material/tooltip';
+import { ViewContainerRef } from '@angular/core';
+
+export { getMatTooltipInvalidPositionError }
+
+// @public
+export class LegacyTooltipComponent extends _TooltipComponentBase {
+ constructor(changeDetectorRef: ChangeDetectorRef, _breakpointObserver: BreakpointObserver, animationMode?: string);
+ // (undocumented)
+ _hideAnimation: string;
+ _isHandset: Observable;
+ // (undocumented)
+ _showAnimation: string;
+ // (undocumented)
+ _tooltip: ElementRef;
+ // (undocumented)
+ static ɵcmp: i0.ɵɵComponentDeclaration;
+ // (undocumented)
+ static ɵfac: i0.ɵɵFactoryDeclaration;
+}
+
+export { MAT_TOOLTIP_DEFAULT_OPTIONS }
+
+export { MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY }
+
+export { MAT_TOOLTIP_SCROLL_STRATEGY }
+
+export { MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY }
+
+export { MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER }
+
+// @public
+export class MatLegacyTooltip extends _MatTooltipBase {
+ constructor(overlay: Overlay, elementRef: ElementRef, scrollDispatcher: ScrollDispatcher, viewContainerRef: ViewContainerRef, ngZone: NgZone, platform: Platform, ariaDescriber: AriaDescriber, focusMonitor: FocusMonitor, scrollStrategy: any, dir: Directionality, defaultOptions: MatTooltipDefaultOptions, _document: any);
+ // (undocumented)
+ protected readonly _tooltipComponent: typeof LegacyTooltipComponent;
+ // (undocumented)
+ static ɵdir: i0.ɵɵDirectiveDeclaration;
+ // (undocumented)
+ static ɵfac: i0.ɵɵFactoryDeclaration;
+}
+
+// @public (undocumented)
+export class MatLegacyTooltipModule {
+ // (undocumented)
+ static ɵfac: i0.ɵɵFactoryDeclaration;
+ // (undocumented)
+ static ɵinj: i0.ɵɵInjectorDeclaration;
+ // (undocumented)
+ static ɵmod: i0.ɵɵNgModuleDeclaration;
+}
+
+// @public
+export const matTooltipAnimations: {
+ readonly tooltipState: AnimationTriggerMetadata;
+};
+
+export { MatTooltipDefaultOptions }
+
+export { SCROLL_THROTTLE_MS }
+
+export { TooltipPosition }
+
+export { TooltipTouchGestures }
+
+export { TooltipVisibility }
+
+// (No @packageDocumentation comment for this package)
+
+```
diff --git a/tools/public_api_guard/material/paginator.md b/tools/public_api_guard/material/paginator.md
index cf29cb0c9c35..4ab92af640ae 100644
--- a/tools/public_api_guard/material/paginator.md
+++ b/tools/public_api_guard/material/paginator.md
@@ -15,7 +15,7 @@ import * as i0 from '@angular/core';
import * as i2 from '@angular/common';
import * as i3 from '@angular/material/button';
import * as i4 from '@angular/material/select';
-import * as i5 from '@angular/material/tooltip';
+import * as i5 from '@angular/material/legacy-tooltip';
import * as i6 from '@angular/material/core';
import { InjectionToken } from '@angular/core';
import { MatFormFieldAppearance } from '@angular/material/form-field';
@@ -126,7 +126,7 @@ export class MatPaginatorModule {
// (undocumented)
static ɵinj: i0.ɵɵInjectorDeclaration;
// (undocumented)
- static ɵmod: i0.ɵɵNgModuleDeclaration;
+ static ɵmod: i0.ɵɵNgModuleDeclaration;
}
// @public
diff --git a/tools/public_api_guard/material/tooltip-testing.md b/tools/public_api_guard/material/tooltip-testing.md
index f40f0eefdca8..eac5b875a170 100644
--- a/tools/public_api_guard/material/tooltip-testing.md
+++ b/tools/public_api_guard/material/tooltip-testing.md
@@ -7,6 +7,7 @@
import { AsyncFactoryFn } from '@angular/cdk/testing';
import { BaseHarnessFilters } from '@angular/cdk/testing';
import { ComponentHarness } from '@angular/cdk/testing';
+import { ComponentHarnessConstructor } from '@angular/cdk/testing';
import { HarnessPredicate } from '@angular/cdk/testing';
import { TestElement } from '@angular/cdk/testing';
@@ -22,7 +23,7 @@ export class MatTooltipHarness extends _MatTooltipHarnessBase {
protected _optionalPanel: AsyncFactoryFn;
// (undocumented)
protected _showAnimationName: string;
- static with(options?: TooltipHarnessFilters): HarnessPredicate;
+ static with(this: ComponentHarnessConstructor, options?: TooltipHarnessFilters): HarnessPredicate;
}
// @public (undocumented)
diff --git a/tools/public_api_guard/material/tooltip.md b/tools/public_api_guard/material/tooltip.md
index efcd8322ff4d..531b85e0e7ea 100644
--- a/tools/public_api_guard/material/tooltip.md
+++ b/tools/public_api_guard/material/tooltip.md
@@ -8,10 +8,8 @@ import { AfterViewInit } from '@angular/core';
import { AnimationTriggerMetadata } from '@angular/animations';
import { AriaDescriber } from '@angular/cdk/a11y';
import { BooleanInput } from '@angular/cdk/coercion';
-import { BreakpointObserver } from '@angular/cdk/layout';
-import { BreakpointState } from '@angular/cdk/layout';
import { ChangeDetectorRef } from '@angular/core';
-import { ComponentType } from '@angular/cdk/portal';
+import { ComponentType } from '@angular/cdk/overlay';
import { ConnectedPosition } from '@angular/cdk/overlay';
import { Directionality } from '@angular/cdk/bidi';
import { ElementRef } from '@angular/core';
@@ -32,7 +30,7 @@ import { Overlay } from '@angular/cdk/overlay';
import { OverlayConnectionPosition } from '@angular/cdk/overlay';
import { OverlayRef } from '@angular/cdk/overlay';
import { Platform } from '@angular/cdk/platform';
-import { ScrollDispatcher } from '@angular/cdk/scrolling';
+import { ScrollDispatcher } from '@angular/cdk/overlay';
import { ScrollStrategy } from '@angular/cdk/overlay';
import { ViewContainerRef } from '@angular/core';
@@ -62,6 +60,10 @@ export const MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER: {
export class MatTooltip extends _MatTooltipBase {
constructor(overlay: Overlay, elementRef: ElementRef, scrollDispatcher: ScrollDispatcher, viewContainerRef: ViewContainerRef, ngZone: NgZone, platform: Platform, ariaDescriber: AriaDescriber, focusMonitor: FocusMonitor, scrollStrategy: any, dir: Directionality, defaultOptions: MatTooltipDefaultOptions, _document: any);
// (undocumented)
+ protected _addOffset(position: ConnectedPosition): ConnectedPosition;
+ // (undocumented)
+ protected readonly _cssClassPrefix = "mat-mdc";
+ // (undocumented)
protected readonly _tooltipComponent: typeof TooltipComponent;
// (undocumented)
static ɵdir: i0.ɵɵDirectiveDeclaration;
@@ -152,17 +154,19 @@ export class MatTooltipModule {
export const SCROLL_THROTTLE_MS = 20;
// @public @deprecated
-export const TOOLTIP_PANEL_CLASS = "mat-tooltip-panel";
+export const TOOLTIP_PANEL_CLASS = "mat-mdc-tooltip-panel";
// @public
export class TooltipComponent extends _TooltipComponentBase {
- constructor(changeDetectorRef: ChangeDetectorRef, _breakpointObserver: BreakpointObserver, animationMode?: string);
+ constructor(changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef, animationMode?: string);
// (undocumented)
_hideAnimation: string;
- _isHandset: Observable;
// (undocumented)
- _showAnimation: string;
+ _isMultiline: boolean;
// (undocumented)
+ protected _onShow(): void;
+ // (undocumented)
+ _showAnimation: string;
_tooltip: ElementRef;
// (undocumented)
static ɵcmp: i0.ɵɵComponentDeclaration;