feat(ui): tooltips - #19870
feat(ui): tooltips#19870annadoesdesign wants to merge 4 commits into
Conversation
bgTooltip is an inverted dark surface in light mode, so pointing dropdowns, selects, popovers, and tooltips at it rendered their text dark-on-dark. bgOverlay matches the canvas in light mode and lifts above it in dark mode. Co-authored-by: Cursor <cursoragent@cursor.com>
bgOverlay now matches bg in both themes; the borders added to menus, dropdowns, popovers, and tooltips are removed so elevation comes from the shadow alone. Dark shadows were translucent against a near-black canvas and read as nothing, so they go opaque black, wider, and layered. Co-authored-by: Cursor <cursoragent@cursor.com>
Introduce FloatingOverlay, a headless Floating UI primitive, and rebuild Tooltip and Popover on top of it so no overlay depends on antd. Collapse the per-entity hover card previews into a single EntityHoverCard composed of HoverCardHeader/Section/EntityRow. Callers now render the component directly and pass no styling, so every surface gets the same card instead of the previous mix of widths, paddings and overrides. Other changes: - Render entity icons as consistent tiles: colored rounded squares for domains, terms, tags and data products, circular surfaces for platform logos, with the glyph inset rather than filling its container. - Use semantic theme tokens throughout so overlays read correctly in dark mode, and move the propagation icon to Phosphor. - Keep overlays working on disabled controls. React suppresses mouse events there, so the listeners move to a wrapper element, matching the behaviour antd provided. - Remove PreviewType.HOVER_CARD and the code it kept alive, including HoverEntityTooltipContext and the hover-card-only "view related" links. Co-authored-by: Cursor <cursoragent@cursor.com>
PR SummaryOverview Entity hovers are redesigned: Supporting changes include Reviewed by Cursor Bugbot for commit 3da88b6. Bugbot is set up for automated code reviews on this repo. Configure here. |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using high effort and found 3 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 3da88b6. Configure here.
| ); | ||
|
|
||
| if (!child) return <>{children}</>; | ||
| if (!hasContent(content)) return child; |
There was a problem hiding this comment.
Childless overlays never render
High Severity
FloatingOverlay bails out when children is not a single valid element, so the portal never mounts. Chart Popovers in BarChart and LineChart are always-open, childless chrome inside visx tooltips; antd previously synthesized a trigger, but these series hover cards now render nothing.
Reviewed by Cursor Bugbot for commit 3da88b6. Configure here.
| ...floatingStyles, | ||
| display: isOpen ? overlayStyle?.display : 'none', | ||
| zIndex: overlayStyle?.zIndex ?? zIndex, | ||
| }} |
There was a problem hiding this comment.
Overlay style loses position
High Severity
Inline overlayStyle position values such as left are spread before floatingStyles, so Floating UI overwrites them. View Select still passes left: 0 and width: 100% and dropped the old left: 0 !important CSS, so the views menu no longer pins across the navbar and can overflow the viewport.
Additional Locations (2)
Reviewed by Cursor Bugbot for commit 3da88b6. Configure here.
| onBlur: (event: React.FocusEvent<HTMLElement>) => { | ||
| forwardTo?.onBlur?.(event); | ||
| if (triggers.includes('focus') || triggers.includes('hover')) setOpen(false); | ||
| }, |
There was a problem hiding this comment.
Blur closes hover overlays
Medium Severity
Focus and blur always open or close the overlay when hover is in trigger, and blur does not check relatedTarget. Callers that pass trigger="hover" still get focus behavior, and a focused trigger (links, buttons) closes the overlay immediately when focus or a click moves into the portal, including HoverEntityTooltip cards.
Reviewed by Cursor Bugbot for commit 3da88b6. Configure here.
maggiehays
added
the
needs-review
This branch was successfully deployed
2 participants
Summary by cubic
Replaces the remaining antd
TooltipandPopoverusages with a newFloatingOverlaybuilt on@floating-ui/react-dom, and unifies all entity hover cards into a singleEntityHoverCard. This fixes dark-mode overlays and makes tooltips, popovers, and hover cards render consistently across the app.Migrating overlays
TooltipandPopovernow come from@componentsand are backed byFloatingOverlay; antd-specific props likeoverlayInnerStyleandpopupVisibleare no longer passed through.bgOverlaytheme token instead ofbg/bgTooltip, and dark-mode shadows were rewritten so overlays remain visible on near-black backgrounds..ant-tooltip-inner/.ant-popover-inner-contentto.alchemy-floating-overlay-inner(a few.lessand styled-component selectors were updated).Hover cards
PreviewType.HOVER_CARD,HoverEntityTooltipContext, and per-entity hover card previews; callers render the sharedEntityHoverCarddirectly, removing the old mix of widths, paddings, and overrides.parsePropagationContexthelper so sections reserve space only when content will render.Adds
@floating-ui/react-domtopackage.jsonand adds unit tests for the newTooltipandPopoverbehavior.Written for commit 3da88b6. Summary will update on new commits.