angular / angular/components

feat(MatTooltip): Mimic native tooltip behaviour

Open
#20,091 5 comments 0 reactions 0 assignees View on GitHub
area: material/tooltip feature P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Feature Description

##### If nested elements have `MatTooltip`s applied on them, show the innermost tooltip.

Suppose we have a `button` with a `span` inside it.

```html

Mat Tooltip

Native Tooltip

```

If both of these elements have the `title` attribute applied to them and we hover the `span`, the browser shows `title` text of the span.
However, if we use the `MatTooltip` directive, both tooltips are shown to the user.

[Minimal Reproduction on StackBlitz](https://mat-tooltip-vs-native-tooltip.stackblitz.io)

#### Use Case

Whenever you need to show different tooltips for parent and child elements.

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and inspect the MatTooltip behavior for nested elements. Done means hovering the nested span shows only its tooltip, while the parent button's tooltip still appears when the button itself is hovered.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.