components: [Tooltip] Do not hide overlay while tooltip is hovered

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

An option that allows not close tooltip when mouse hovers over tooltip. Something like: https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip

What is the current behavior?

The tooltip is immediately shown when the user’s mouse hovers over the element. The tooltip immediately hides when the user’s mouse leaves the element, it treats the tooltip area no difference with other area outside the element.

I understand that I can delay the hide time, but that is a different story.

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue. Doc site example: https://material.angular.io/components/component/tooltip

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

As a web user, I found that on many websites, tooltips do not close when I mouse hover over them. This allows me to copy the text in the tooltip.

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

Material 2.0.0-beta.6

Is there anything else we should know?

If it doesn’t sound like a fair feature, is there a workaround I can use to achieve this? I tried

md-tooltip-component:hover {
  .mat-tooltip {
    visibility: visible;
  }
}

But it did not work

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 16
Comments: 21 (9 by maintainers)

Commits related to this issue

fix(material/tooltip): don't hide when pointer moves to tooltip Currently we hide the tooltip as soon as the pointer leaves the trigger element which may be problematic with larger cursors that parti... — committed to crisbeto/material2 by crisbeto 2 years ago
fix(material/tooltip): don't hide when pointer moves to tooltip Currently we hide the tooltip as soon as the pointer leaves the trigger element which may be problematic with larger cursors that parti... — committed to crisbeto/material2 by crisbeto 2 years ago
fix(material/tooltip): don't hide when pointer moves to tooltip Currently we hide the tooltip as soon as the pointer leaves the trigger element which may be problematic with larger cursors that parti... — committed to crisbeto/material2 by crisbeto 2 years ago
fix(material/tooltip): don't hide when pointer moves to tooltip Currently we hide the tooltip as soon as the pointer leaves the trigger element which may be problematic with larger cursors that parti... — committed to crisbeto/material2 by crisbeto 2 years ago
fix(material/tooltip): don't hide when pointer moves to tooltip Currently we hide the tooltip as soon as the pointer leaves the trigger element which may be problematic with larger cursors that parti... — committed to crisbeto/material2 by crisbeto 2 years ago
fix(material/tooltip): don't hide when pointer moves to tooltip Currently we hide the tooltip as soon as the pointer leaves the trigger element which may be problematic with larger cursors that parti... — committed to crisbeto/material2 by crisbeto 2 years ago
fix(material/tooltip): don't hide when pointer moves to tooltip Currently we hide the tooltip as soon as the pointer leaves the trigger element which may be problematic with larger cursors that parti... — committed to crisbeto/material2 by crisbeto 2 years ago
fix(material/tooltip): don't hide when pointer moves to tooltip (#24475) Currently we hide the tooltip as soon as the pointer leaves the trigger element which may be problematic with larger cursors t... — committed to angular/components by crisbeto 2 years ago
fix(material/tooltip): don't hide when pointer moves to tooltip (#24475) Currently we hide the tooltip as soon as the pointer leaves the trigger element which may be problematic with larger cursors t... — committed to angular/components by crisbeto 2 years ago
fix(material/tooltip): don't hide when pointer moves to tooltip (#24475) Currently we hide the tooltip as soon as the pointer leaves the trigger element which may be problematic with larger cursors t... — committed to forsti0506/components by crisbeto 2 years ago

Most upvoted comments

The Basic tooltip in the docs as I see them today definitely has WCAG bugs:

It fails WCAG 2.1 SC 1.4.13 Content on Hover or Focus, specifically:

Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true: […] Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing; […]

The specific example fails WCAG 2.1 SC 2.5.3 Label in Name because the aria-label provides the accName for the control, overriding the visible text:

<button […] aria-label="Button that displays a tooltip when focused or hovered over" […]>
  <span class="mat-button-wrapper"> Action </span>
  […]
</button>

Obviously # 2 is less a concern because authors can “easily” fix that by not following the example in the docs.

The first issue is a genuine bug in the implementation. Which means every site that implements this tooltip component as-is is automatically failing that WCAG SC, and therefore WCAG as a whole. Which has all sorts of compliance and legal ramifications.

The issue was filed prior WCAG 2.1’s release with those SCs, but it was added in the August 2017 Working Draft and went live in June 2018. About 3⅔ years ago.

Since this now requires votes to fix this WCAG conformance bug, consider this comment as my vote, though I rather hope the “bug” label (or equivalent) gets added.

aardrian on Feb 1, 2022

This is requirement is not relevant to screen readers, but for accessibility. The section content-on-hover-or-focus.html#hoverable describes the requirement. You can see in the examples:

Screenshot of a button with a large mouse pointer over it, and a tooltip displayed below the button which is obscured by the large pointer

Screenshot of a button with a tooltip below it, and a large mouse pointer at the bottom of the tooltip

Figure 3 A button’s tooltip is displayed directly below it on mouse hover which can easily be obscured by a large pointer. The tooltip itself is able to be hovered so the mouse pointer can be moved down to its bottom edge in order to view the tooltip text.

manuelmeister on Nov 22, 2021

Thank you for submitting your feature request! Looks like during the polling process it didn’t collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular’s scope, we’d encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

angular-robot[bot] on Feb 21, 2022

@andrewseguin

I have no idea if this fits the material design or not, but the current behavior doesn’t meet WCAG requirements either, so it’s actually an A11Y issue. This is especially painful, because WCAG 2.x AA is now a must in the EU for gov sites (among others), it’s required by law.

I guess the functionality should be modified to meet the the following requirements: w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html

Any plans for fixing this in the near future?

gtamas on Apr 22, 2020

I just came across this as well. Still not fixed? Any alternatives/work-arounds?

digeomel on Jun 2, 2021

It shouldn’t be a problem to provide it on a per tooltip basis, I just figured that this is something that you either want or don’t want for the entire app. For what it’s worth, you can also provide it at the component level through the providers property on @Component.

crisbeto on Mar 15, 2022

I also encounter the “tooltip are now displayed over other buttons” problem, especially when buttons are presented in mat-table columns. @crisbeto overriding the default disableTooltipInteractivity would be a global (as in it would affect the whole app/component) change if I’m not mistaken. Would it be possible to add such an option to individual matTooltips ?

SadiinsoSnowfall on Mar 15, 2022

Is that under option ? Because we need to keep the previous behavior…

T4YoO on Mar 11, 2022

Hi, this fixes has a big drawback because now tooltips which are displayed over other buttons or links are really annoying. Perhaps the behavior should have been to cancel the hideTimer if the cursor moves over the tooltip before the timer expires, and start the hide timer again when the cursor leaves the tooltip, without adding any overlay between the target element and the tooltip

dricks on Mar 9, 2022

The fix was merged an hour ago so it hasn’t been released yet.

crisbeto on Feb 25, 2022