search

mondaycom / vibe

🎨 Official monday.com UI resources for application development in React.js
https://vibe.monday.com
418 stars 289 forks source link

[Bug]: Tooltip component is flickering #2225

Open Ma1kovich opened 1 month ago

Ma1kovich commented 1 month ago

Vibe version

2.116.0

Describe the bug

There is a special spot near or on a Tooltip's beak, which on hover starts hiding/showing the tooltip. In my app's enviroment it is flickering like crazy (many many times a second), and it is really easy to find the spot accidently, while mouse is moving over the button. In the StackBlitz enviroment the flickering is milder, but still noticable and disturbing.

Recording attached. Notice that after I found the correct spot, I no longer move my mouse, but the cursor is changing and the tooltip is flickering.

We use monday-ui-react-core version 2.102.0, in the StackBlitz enviroment it is set to 2.116.0.

Expected behavior

There should be no spot user can hover to achive the described behavior.

Steps to reproduce

  1. Add a Button with tooltip from Monday Vibe
  2. Hover over a button near or on the tooltip's beak
  3. Find a spot where it starts flickering and don't move the mouse

Reproduction example link

https://vibe-bug-report-nsxkbf.stackblitz.io/

System Info

No response

Additional context, Screenshots

Recording: https://github.com/mondaycom/vibe/assets/39345609/ab5b425f-8d16-40e4-97cc-1634355b21fa

Hossein-Mirazimi commented 2 weeks ago

I believe I may have found an issue that could be causing this bug: image image Why are these elements positioned differently? I think they should have similar positions. It seems that the correct position for the tooltip element is this one: image Am I right?

If so, we should consider updating either the tooltip component or the dialog component to ensure consistency.