Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tooltip blocks :hover styles #4691

Closed
fredericojesus opened this issue May 20, 2017 · 3 comments · Fixed by #5514
Closed

Tooltip blocks :hover styles #4691

fredericojesus opened this issue May 20, 2017 · 3 comments · Fixed by #5514
Assignees
@devversion
Labels
help wanted The team would appreciate a PR from the community to address this issue P4 A relatively minor issue that is not relevant to core functions

Comments

@fredericojesus
Copy link

fredericojesus commented May 20, 2017 •
edited
Loading

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When hovering an icon with a tooltip the parent that also has a hover should not lose his hover state.

What is the current behavior?

When hovering an icon with a tooltip the parent that also has a hover should loses his hover state.

What are the steps to reproduce?

Start the app.
Put the mouse in the first Home icon from the list.
Start moving the mouse down to hover the other icons and at the same time the other list items.
You'll see that for a little time the list item loses hover state.

Plunker: http://plnkr.co/edit/k2Qqy2IDMOtLgzb6FIch?p=info

What is the use-case or motivation for changing an existing behavior?

It causes a really bad impression for users. In the case of my team we have a list with multiple social icons in each item of the list. So user's are very prone to hover the social icons like mentioned in the steps to reproduce, so that flickering of the hover state doesn't give the best user experience.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

All I suppose. I'm using the latest atm (beta5)
@jelbourn jelbourn changed the title Tooltip hovering bug Tooltip blocks :hover styles Jun 7, 2017
@jelbourn
Copy link
Member

jelbourn commented Jun 7, 2017

While the tooltip itself has pointer-events: none, the parent overlay panel has pointer-events: auto and this is blocking hover styles. The overlay panel should be given pointer-events: none for tooltips specifically.

@jelbourn jelbourn added help wanted The team would appreciate a PR from the community to address this issue P4 A relatively minor issue that is not relevant to core functions labels Jun 7, 2017
@devversion devversion self-assigned this Jul 5, 2017
devversion added a commit to devversion/material2 that referenced this issue Jul 5, 2017
@devversion
fix(tooltip): panel element blocks hover effects
1ab727b 
By default the overlay container always has pointer events disabled. Currently the tooltip component also has pointer events disabled. The only thing that has pointer events enabled is the overlay panel element.

This can be problematic because as soon as someone hovers of the overlay panel element, the pointer events & hover effects are going to the overlay panel element instead of the element that the tooltip just overlays.

Fixes angular#4691
@devversion devversion mentioned this issue Jul 5, 2017
Merged
devversion added a commit to devversion/material2 that referenced this issue Jul 8, 2017
@devversion
fix(tooltip): panel element blocks hover effects
aaedc90 
By default the overlay container always has pointer events disabled. Currently the tooltip component also has pointer events disabled. The only thing that has pointer events enabled is the overlay panel element.

This can be problematic because as soon as someone hovers of the overlay panel element, the pointer events & hover effects are going to the overlay panel element instead of the element that the tooltip just overlays.

Fixes angular#4691
@fredericojesus
Copy link
Author

Hey,
When will this fix be released?

jelbourn pushed a commit that referenced this issue Jul 13, 2017
@devversion @jelbourn
fix(tooltip): panel element blocks hover effects
3070114 
By default the overlay container always has pointer events disabled. Currently the tooltip component also has pointer events disabled. The only thing that has pointer events enabled is the overlay panel element.

This can be problematic because as soon as someone hovers of the overlay panel element, the pointer events & hover effects are going to the overlay panel element instead of the element that the tooltip just overlays.

Fixes #4691
jelbourn pushed a commit that referenced this issue Jul 14, 2017
@devversion @jelbourn
fix(tooltip): panel element blocks hover effects (#5514)
d04230c 
By default the overlay container always has pointer events disabled. Currently the tooltip component also has pointer events disabled. The only thing that has pointer events enabled is the overlay panel element.

This can be problematic because as soon as someone hovers of the overlay panel element, the pointer events & hover effects are going to the overlay panel element instead of the element that the tooltip just overlays.

Fixes #4691
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@devversion devversion

Labels
help wanted The team would appreciate a PR from the community to address this issue P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(tooltip): panel element blocks hover effects devversion/material2
3 participants
@jelbourn @devversion @fredericojesus