API reference for Angular Material tooltip
import {MatTooltipModule} from '@angular/material/tooltip';
Directives
MatTooltip
Directive that attaches a material design tooltip to the host element. Animates the showing and hiding of a tooltip provided position (defaults to below the element).
https://material.io/design/components/tooltips.html
Selector: [matTooltip]
Exported as: matTooltipProperties
Name | Description |
---|---|
@Input('matTooltipDisabled')
|
Disables the display of the tooltip. |
@Input('matTooltipHideDelay')
|
The default delay in ms before hiding the tooltip after hide is called |
@Input('matTooltip')
|
The message to be displayed in the tooltip |
@Input('matTooltipPosition')
|
Allows the user to define the position of the tooltip relative to the parent element |
@Input('matTooltipPositionAtOrigin')
|
Whether tooltip should be relative to the click or touch origin instead of outside the element bounding box. |
@Input('matTooltipShowDelay')
|
The default delay in ms before showing the tooltip after show is called |
@Input('matTooltipClass')
|
Classes to be passed to the tooltip. Supports the same syntax as |
@Input('matTooltipTouchGestures')
|
How touch gestures should be handled by the tooltip. On touch devices the tooltip directive uses a long press gesture to show and hide, however it can conflict with the native browser gestures. To work around the conflict, Angular Material disables native gestures on the trigger, but that might not be desirable on particular elements (e.g. inputs and draggable elements). The different values for this option configure the touch event handling as follows:
|
Methods
hide | |
---|---|
Hides the tooltip after the delay in ms, defaults to tooltip-delay-hide or 0ms if no input |
|
Parameters | |
delay number = this.hideDelay
|
|
show | |
---|---|
Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input |
|
Parameters | |
delay number = this.showDelay
|
|
origin? { x: number; y: number; }
|
|
toggle | |
---|---|
Shows/hides the tooltip |
|
Parameters | |
origin? { x: number; y: number; }
|
|
Interfaces
MatTooltipDefaultOptions
Default matTooltip
options that can be overridden.
Properties
Name | Description |
---|---|
|
Disables the ability for the user to interact with the tooltip element. |
|
Default delay when the tooltip is hidden. |
|
Default position for tooltips. |
|
Default value for whether tooltips should be positioned near the click or touch origin instead of outside the element bounding box. |
|
Default delay when the tooltip is shown. |
|
Default classes to be applied to the tooltip. These default classes will not be applied if
|
|
Default touch gesture handling for tooltips. |
|
Time between the user putting the pointer on a tooltip trigger and the long press event being fired on a touch device. |
|
Default delay when hiding the tooltip on a touch device. |
Type aliases
TooltipPosition
Possible positions for a tooltip.
type TooltipPosition = 'left' | 'right' | 'above' | 'below' | 'before' | 'after';
TooltipTouchGestures
Options for how the tooltip trigger should handle touch gestures.
See MatTooltip.touchGestures
for more information.
type TooltipTouchGestures = 'auto' | 'on' | 'off';
TooltipVisibility
Possible visibility states of a tooltip.
type TooltipVisibility = 'initial' | 'visible' | 'hidden';
Constants
SCROLL_THROTTLE_MS
Time in ms to throttle repositioning after scroll events.
const SCROLL_THROTTLE_MS: 20;
MAT_TOOLTIP_SCROLL_STRATEGY
Injection token that determines the scroll handling while a tooltip is visible.
const MAT_TOOLTIP_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
MAT_TOOLTIP_DEFAULT_OPTIONS
Injection token to be used to override the default options for matTooltip
.
const MAT_TOOLTIP_DEFAULT_OPTIONS: InjectionToken<MatTooltipDefaultOptions>;
TOOLTIP_PANEL_CLASS
CSS class that will be attached to the overlay panel.
const TOOLTIP_PANEL_CLASS: "mat-mdc-tooltip-panel";
API reference for Angular Material tooltip-testing
import {MatTooltipHarness} from '@angular/material/tooltip/testing';
Classes
MatTooltipHarness
extends
ComponentHarness
Harness for interacting with a mat-tooltip in tests.
Properties
Name | Description |
---|---|
|
Methods
async
getTooltipText
|
|
---|---|
Gets a promise for the tooltip panel's text. |
|
Returns | |
Promise<string>
|
|
async
hide
|
|
---|---|
Hides the tooltip. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
async
isDisabled
|
|
---|---|
Gets whether the tooltip is disabled |
|
Returns | |
Promise<boolean>
|
|
async
isOpen
|
|
---|---|
Gets whether the tooltip is open. |
|
Returns | |
Promise<boolean>
|
|
async
show
|
|
---|---|
Shows the tooltip. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options TooltipHarnessFilters = {}
|
Options for narrowing the search. |
Returns | |
HarnessPredicate<T>
|
a |
Interfaces
TooltipHarnessFilters
A set of criteria that can be used to filter a list of MatTooltipHarness
instances.