Improve primary menu bar - remove need for "overlayForHover"

Created on 18 July 2024, 3 months ago
Updated 19 August 2024, about 2 months ago

Overview

In the primary menu bar the Radix MenuBar primative component is used. There is a requirement to show tooltips on hover of the Menubar.Trigger. The current clever solution is to overlay an absolutely positioned invisible element over the top to trigger the tooltip and for that to handle pointerDown events to trigger the menu.

BUT this causes issues with writing e2e tests as the invisible overlay is blocking being able to click the actual item.

Proposed resolution

I think use of the asChild={true} prop on the Menubar.Trigger component would allow the TooltipComponent to live inside Menubar.Trigger rather than having to overlay on top of it.

User interface changes

UI should look the way it does now from a user perspective but with a cleaner underlying DOM structure.

๐Ÿ› Bug report
Status

Closed: outdated

Component

Page builder

Created by

๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom jessebaker

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024