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.

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

Accessibility: tooltip text is not selectable #4168

Open
rokalm opened this issue Oct 8, 2021 · 3 comments · May be fixed by #4687
Open

Accessibility: tooltip text is not selectable #4168

rokalm opened this issue Oct 8, 2021 · 3 comments · May be fixed by #4687

Comments

@rokalm
Copy link

rokalm commented Oct 8, 2021

Bug description

Tooltip content is not selectable, when use tries to hover on tooltip itself

  1. Hover over on tooltip https://ng-bootstrap.github.io/#/components/tooltip/examples
  2. Try to select text

Expected: see behavior here https://bootstrap-vue.org/docs/components/tooltip

WSAG Requirement Level AA https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html:

Hoverable
If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;
@maxokorokov
Copy link
Member

I think you're asking to add the ability to make tooltips and popovers interactive/hoverable. Something along those lines:

<button ngbTooltip="hi" [hoverable]="true" />

Similar to the vue-bootstrap's "interactive" tooltips → https://bootstrap-vue.org/docs/components/tooltip

I think it's a valid request and should actually be the default behaviour.
You could "simulate" with something like this → https://stackblitz.com/edit/angular-1dsbf1?file=src%2Fapp%2Ftooltip-triggers.html

But we should add this option.

@senthilchandran
Copy link

@maxokorokov Any update on this request? Is there an ETA on when this feature will be available to consume?

Thanks!

@daiscog
Copy link

daiscog commented Mar 5, 2024

@maxokorokov this is actually a serious concern for accessibility. It's not just about being able to "select" the text of the tooltip. Some partially-sighted users may use screen magnifiers to enlarge areas under the cursor; these users may need to move the cursor away from the trigger element and over the tooltip itself in order to bring the tooltip under the magnified area so they can read it. If the tooltip disappears immediately on leaving the trigger element, then it is completely inaccessible to these users, which will lead to a very frustrating user experience.

So I completely agree with your opinion that it "should actually be the default behaviour". This project should strive to be accessible by default, and not leave it up to consumers to try to hack accessibility on top through manual workarounds. IMO an issue seeking to address a lack of accessibility OOTB should be considered a bug not a feature request.

Could the team please consider prioritising a resolution for this issue soon?

daiscog added a commit to daiscog/ng-bootstrap that referenced this issue Mar 25, 2024
When using a hover trigger and a close delay, tooltips/popovers will be kept open if the mouse leaves the trigger element and enters the tooltip/popover element before the close delay times out.

Fixes ng-bootstrap#4168
daiscog added a commit to daiscog/ng-bootstrap that referenced this issue Mar 25, 2024
When using a hover trigger and a close delay, tooltips/popovers will be kept open if the mouse leaves the trigger element and enters the tooltip/popover element before the close delay times out.

Fixes ng-bootstrap#4168
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants