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.

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

Button Tooltip not visible on hover #7004

Closed
anevins12 opened this Issue May 29, 2018 · 9 comments

Comments

Projects
None yet
3 participants
@anevins12
Contributor

anevins12 commented May 29, 2018

Describe the bug
Tooltips do not persist on hover and may not be readable by people using enhanced pointer icons (such as larger pointers). Moving the pointer onto the tooltip for a more visible view of the information will then hide the tooltip.
tooltip-hover

This is a bad experience and is against WCAG 2.1 'Content on hover or focus' guideline;
https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html

To Reproduce
Steps to reproduce the behavior:

  1. Edit a post
  2. Hover your mouse over a WYSIWYG control like "B" (bold)
  3. If you don't see the issue, increase your cursor size by 400%.

Expected behavior
It is difficult to achieve a tooltip that appears for everyone, that also does not obscure other content, but the tooltip should persist on hover of the tooltip.

Desktop (please complete the following information):

  • Replicated on Ubuntu 16.04 LTS;
  • Firefox 61.0.1
    However you should be able to replicate this on many operating systems and browsers.
@anevins12

This comment has been minimized.

Contributor

anevins12 commented May 29, 2018

To overcome the pointer overlapping tooltip information, should the tooltips be moved above the WYSIWYG buttons? This wouldn't resolve the accessibility criteria, but should at least make the tooltips visible by default.

@karmatosed

This comment has been minimized.

Member

karmatosed commented May 29, 2018

Thanks for your insights @anevins12. If I may, @afercia just cc'ing you in here to get your input on tooltips.

@afercia

This comment has been minimized.

Contributor

afercia commented May 30, 2018

I'd second @anevins12 concerns. Worth noting there are a few issues with tooltips position, see for example #6669. Having a consistent position would help. Also, some blocks (the Classic block) don't display tooltips on focus, see #6193.

However, the point raised here is that, ideally, the tooltip should persist when the mouse pointer is moved hover the tooltip itself. See the Example 2 in the WCAG page linked above:

screen shot 2018-05-30 at 10 45 22

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.

The screenshot in the WCAG example comes from Gmail. You can test it "live" there. They've implements persistent tooltips meaning they're still visible when the mouse pointer is moved over them:

gmail tooltip

@anevins12

This comment has been minimized.

Contributor

anevins12 commented May 30, 2018

Onto the Pull Request!

@anevins12

This comment has been minimized.

Contributor

anevins12 commented Jun 4, 2018

@afercia Am I right in thinking the positioning of this tooltip has now been resolved to be above the button?

@afercia

This comment has been minimized.

Contributor

afercia commented Jun 4, 2018

@anevins12 which tooltip? The Gmail one is still above the button for me. I don't see changes in the Gutenberg ones.

@anevins12

This comment has been minimized.

Contributor

anevins12 commented Jun 5, 2018

@afercia Oh, when I check the demo of Gutenberg I can't find an instance of the tooltip being below the buttons: https://testgutenberg.com/

@afercia

This comment has been minimized.

Contributor

afercia commented Jun 5, 2018

@anevins12 I see testgutenberg.com is not updated and still on Gutenberg v2.8.0. It also gives an error when trying to add a Classic block. You should test with the latest version or with master cloned from the GitHub repo.

@anevins12

This comment has been minimized.

Contributor

anevins12 commented Jun 6, 2018

That PR only concerns non-TinyMCE buttons. The TinyMCE fix is coming from #core

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment