DRAFT: Popover and Anchor Positioning based Tooltip #35261
Draft
+1,805
−2
Conversation
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
📊 Bundle size report
Unchanged fixtures
|
|
Pull request demo site: URL |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| packages/react-components/react-color-picker/library @microsoft/cxe-prg | ||
| packages/react-components/react-color-picker/stories @microsoft/cxe-prg | ||
| packages/react-components/component-selector-preview/library @microsoft/teams-prg | ||
| packages/react-components/component-selector-preview/stories @microsoft/teams-prg |
There was a problem hiding this comment.
🕵🏾♀️ visual changes to review in the Visual Change Report
vr-tests-react-components/CalendarCompat 4 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/CalendarCompat.multiDayView - High Contrast.default.chromium.png | 1236 | Changed |
| vr-tests-react-components/CalendarCompat.multiDayView.default.chromium_1.png | 403 | Changed |
| vr-tests-react-components/CalendarCompat.multiDayView - RTL.default.chromium.png | 496 | Changed |
| vr-tests-react-components/CalendarCompat.multiDayView - Dark Mode.default.chromium.png | 1111 | Changed |
vr-tests-react-components/Positioning 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Positioning.Positioning end.chromium.png | 129 | Changed |
| vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png | 29 | Changed |
vr-tests/Callout 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests/Callout.Top right edge.default.chromium.png | 1134 | Changed |
| vr-tests/Callout.Rendering callout attached to a rectangle.default.chromium.png | 1832 | Changed |
| vr-tests/Callout.Beak 25.default.chromium.png | 2185 | Changed |
vr-tests/Coachmark 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests/Coachmark.Collapsed.default.chromium.png | 159 | Changed |
vr-tests/Keytip 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests/Keytip.Root.default.chromium.png | 55 | Changed |
vr-tests/react-charting-LineChart 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests/react-charting-LineChart.Multiple - Dark Mode.default.chromium.png | 181 | Changed |
| vr-tests/react-charting-LineChart.Multiple - RTL.default.chromium.png | 200 | Changed |
vr-tests/react-charting-VerticalBarChart 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests/react-charting-VerticalBarChart.Basic - Secondary Y Axis.default.chromium.png | 3 | Changed |
There were 1 duplicate changes discarded. Check the build logs for more information.
spmonahan
reviewed
Oct 6, 2025
| ...state.content.style, | ||
| }; | ||
|
|
||
| // When this tooltip is visible, hide any other tooltips, and register it |
There was a problem hiding this comment.
Do you think it's possible to enforce this with auto? https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover#auto
In other words, could we eliminate all this code to hide other tooltips?
There was a problem hiding this comment.
Theoretically yes, though we really want hint here. Using auto would dismiss other popovers, e.g. Menu which we don't want. hint also has issues when we want to preserve the ignoreNextFocusEventRef and the delay on dismissing after mousing out of the trigger. If we want that to remain unchanged I think we'll need to stick with manual and show/hide it with the existing logic.
spmonahan
reviewed
Oct 6, 2025
| color: tokens.colorNeutralForegroundStaticInverted, | ||
| }, | ||
|
|
||
| arrow: createArrowStyles({ arrowHeight }), |
There was a problem hiding this comment.
Have you been able to get this working? I struggled with adding it and maintaining the existing DOM structure when prototyping this.
There was a problem hiding this comment.
Not yet, no. It's also complicated by the position fallbacks. Currently we don't know which fallback position was used in code so we can't manually move the arrow in response
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Previous Behavior
New Behavior
Related Issue(s)