[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

[aardrian]

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

1. 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; […]

1. 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.

[manuelmeister]

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:

---

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.