fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard

[Bug]: Can not move the cursor to the tooltip content easily

Open harunurhan opened this issue 2 years ago • 6 comments

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 Intel(R) Xeon(R) Platinum 8370C CPU @ 2.80GHz
    Memory: 36.18 GB / 63.95 GB
  Browsers:
    Edge: Spartan (44.22621.2283.0), Chromium (117.0.2045.43)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

yes

Reproduction

https://codepen.io/Harun-Urhan/pen/jOXKmoK

Bug Description

Actual Behavior

User can not move the cursor to the tooltip content easily since it's closing way too early

broken-hover-hover

Expected Behavior

We should enable users to move the cursor to the tooltip content without a fight, it is useful cases like if they want to copy-paste the content or tooltip has a link.

An approach which was used to address such issues: https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

  • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • [X] The provided reproduction is a minimal reproducible example of the bug.

harunurhan avatar Sep 28 '23 16:09 harunurhan

I was just about to report the same issue 🙂 even when passing closeDelay to prevent the tooltip from disappearing immediately, it will still disappear even if the user is hovering over it:

6bf6a227-4b65-4f6f-9460-f63c9380cfbe

There was a previous instance of this issue in #9464, but it seems to have regressed (possibly in #9845).

kycutler avatar Sep 28 '23 17:09 kycutler

dropdown and tooltip are bit different UX patterns IMO so maybe if you need that copy / actionable functionality you should look for some different pattern instead of toolltip.

anyways ATM only "mitigation" is to use closeDelay property with reasonable time for you particular UI flow.

Hotell avatar Sep 29 '23 10:09 Hotell

@Hotell , as mentioned by @kycutler, closeDelay doesn't mitigate this. It still closes when delay is over even if the cursor is still on the tooltip content.

harunurhan avatar Sep 29 '23 12:09 harunurhan

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

Because this reported issue has not had any activity for over 180 days, we're automatically closing it for house-keeping reasons.

Still require assistance? Please, create a new issue with up-to date details and latest version of Fluent.

@behowell could you re-open this?

harunurhan avatar Apr 28 '24 09:04 harunurhan