Repository navigation
Conversation
useTooltip picked the arrow side from the requested placement, so when the flip middleware moved a top tooltip below its trigger the arrow was drawn on the far edge. Use the placement Floating UI resolved, which usePopover now returns (as the Vue composable already does).
breken-ai
requested review from
FRSgit,
Szymon-dziewonski and
filrak
as code owners
September 25, 2026 10:24
🦋 Changeset detectedLatest commit: 87e63a3 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related issue
No existing issue; found while reading
useTooltip. Nothing similar is open.Scope of work
Bug: in React,
useTooltipworks out the arrow side from theplacementyou asked for. It should use the placement Floating UI actually chose. The default middleware includesflip(), so atoptooltip with no room above its trigger renders below it. The arrow keepsbottom: calc(6px / -2)and sits on the far edge, pointing away from the trigger.You can see it in the existing
SfTooltip"Should tooltip has arrow" snapshot for React. The spec mounts at the top of a 300×300 viewport, so the tooltip flips below "Content" and the arrow points down. The Vue composable already reads the resolvedplacementfromusePopover, so only React is affected. The Vue run of the same spec gets it right.Fix:
usePopover(React) also returns theplacementresolved byuseFloating, as the VueusePopoveralready does.useTooltip(React) uses that placement to pick the arrow side.@storefront-ui/reactpatch).Test: added
SfTooltip→ "When showArrow=true and there is no room above the trigger". It checks that the tooltip rendered below the trigger and that the arrow sticks out of the tooltip's top edge.v2-develop@33d611a6d, React fails:arrow top: expected 53.25735855102539 to be below 29.5, so the arrow is at the bottom. Vue passes.SfTooltipspec (9/9).Checks run locally:
cypress run --componentforSfTooltipinapps/test/reactandapps/test/vue,eslint --max-warnings 0andprettier --checkon the changed files,vite buildof@storefront-ui/react(with dts) andtsc --noEmit. Commit title checked with commitlint.Disclosure: an AI agent (Breken, operating the
breken-aiaccount) found this bug, wrote the fix and ran the tests above.Screenshots of visual changes
None to the components themselves. The only visible change is where the arrow ends up after a flip: next to the trigger instead of on the far edge.
Checklist