feat(react-headless-components-preview): add Tooltip component#36079
Merged
dmytrokirpa merged 6 commits intomicrosoft:masterfrom May 5, 2026
Merged
feat(react-headless-components-preview): add Tooltip component#36079dmytrokirpa merged 6 commits intomicrosoft:masterfrom
dmytrokirpa merged 6 commits intomicrosoft:masterfrom
Conversation
|
Pull request demo site: URL |
dmytrokirpa
force-pushed
the
feat/headless-tooltip
branch
2 times, most recently
from
8674624 to
6731cf6
Compare
dmytrokirpa
force-pushed
the
feat/headless-tooltip
branch
from
6731cf6 to
8995a01
Compare
📊 Bundle size report
Unchanged fixtures
|
dmytrokirpa
force-pushed
the
feat/headless-tooltip
branch
from
8995a01 to
6ac8163
Compare
dmytrokirpa
force-pushed
the
feat/headless-tooltip
branch
from
6ac8163 to
f0e5f84
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new headless Tooltip entrypoint to @fluentui/react-headless-components-preview, including component implementation (Popover API + CSS Anchor Positioning via the package’s positioning utilities), Storybook stories/docs, tests, and package/export integration.
Changes:
- Introduces
Tooltipcomponent implementation (useTooltip,renderTooltip, types, exports) plus Jest tests. - Adds Storybook stories and markdown documentation for Tooltip usage patterns and accessibility relationships.
- Wires Tooltip into package exports, API extractor report, bundle-size fixture, dependencies, and beachball change file.
Reviewed changes
Copilot reviewed 20 out of 20 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/react-components/react-headless-components-preview/stories/src/Tooltip/index.stories.tsx | Registers Tooltip stories and docs in Storybook. |
| packages/react-components/react-headless-components-preview/stories/src/Tooltip/TooltipWithArrow.stories.tsx | Adds an arrow styling/positioning example story. |
| packages/react-components/react-headless-components-preview/stories/src/Tooltip/TooltipRelationshipLabel.stories.tsx | Demonstrates relationship="label" behavior and docs text. |
| packages/react-components/react-headless-components-preview/stories/src/Tooltip/TooltipRelationshipDescription.stories.tsx | Demonstrates relationship="description" behavior and docs text. |
| packages/react-components/react-headless-components-preview/stories/src/Tooltip/TooltipPositions.stories.tsx | Demonstrates different positioning shorthand values. |
| packages/react-components/react-headless-components-preview/stories/src/Tooltip/TooltipDescription.md | Component description for docs page. |
| packages/react-components/react-headless-components-preview/stories/src/Tooltip/TooltipDefault.stories.tsx | Default Tooltip example (with args passthrough). |
| packages/react-components/react-headless-components-preview/stories/src/Tooltip/TooltipControlled.stories.tsx | Controlled visible example. |
| packages/react-components/react-headless-components-preview/stories/src/Tooltip/TooltipBestPractices.md | Best-practices + accessibility guidance for tooltips. |
| packages/react-components/react-headless-components-preview/library/src/tooltip.ts | Adds the public ./tooltip entrypoint exports. |
| packages/react-components/react-headless-components-preview/library/src/components/Tooltip/useTooltip.ts | Implements Tooltip behavior (visibility, relationships, positioning refs, Popover API sync). |
| packages/react-components/react-headless-components-preview/library/src/components/Tooltip/renderTooltip.tsx | Renders trigger + tooltip content (and optional arrow). |
| packages/react-components/react-headless-components-preview/library/src/components/Tooltip/index.ts | Barrel exports for Tooltip component files. |
| packages/react-components/react-headless-components-preview/library/src/components/Tooltip/Tooltip.types.ts | Public props/state/type surface for headless Tooltip entrypoint. |
| packages/react-components/react-headless-components-preview/library/src/components/Tooltip/Tooltip.tsx | Tooltip component wrapper using hook + render function. |
| packages/react-components/react-headless-components-preview/library/src/components/Tooltip/Tooltip.test.tsx | Adds unit/conformance coverage for tooltip relationships and state attributes. |
| packages/react-components/react-headless-components-preview/library/package.json | Adds deps and registers ./tooltip export path. |
| packages/react-components/react-headless-components-preview/library/etc/tooltip.api.md | API Extractor report for the new tooltip entrypoint. |
| packages/react-components/react-headless-components-preview/library/bundle-size/AllComponents.fixture.js | Includes tooltip entrypoint in bundle-size fixture. |
| change/@fluentui-react-headless-components-preview-021e6dbb-6618-4217-a7ce-8567198a60ff.json | Beachball change file for publishing the addition. |
dmytrokirpa
force-pushed
the
feat/headless-tooltip
branch
2 times, most recently
from
5ad6afa to
a9bb2bf
Compare
dmytrokirpa
force-pushed
the
feat/headless-tooltip
branch
from
a9bb2bf to
cde85aa
Compare
dmytrokirpa
commented
May 2, 2026
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
dmytrokirpa
force-pushed
the
feat/headless-tooltip
branch
2 times, most recently
from
b1905a2 to
f7e4092
Compare
dmytrokirpa
force-pushed
the
feat/headless-tooltip
branch
from
526d9d5 to
ae3a059
Compare
dmytrokirpa
commented
May 3, 2026
dmytrokirpa
commented
May 3, 2026
dmytrokirpa
commented
May 3, 2026
mainframev
requested changes
May 4, 2026
mainframev
approved these changes
May 4, 2026
Contributor
mainframev
left a comment
mainframev
left a comment
There was a problem hiding this comment.
LGTM. We can solve / fix things in follow-ups depending on browser matrix answers from consumers
dmytrokirpa
force-pushed
the
feat/headless-tooltip
branch
from
b97d7d1 to
b2a66ee
Compare
dmytrokirpa
force-pushed
the
feat/headless-tooltip
branch
from
b2a66ee to
7d92510
Compare
Hotell
approved these changes
May 5, 2026
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
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.
This pull request introduces a new headless
Tooltipcomponent to the@fluentui/react-headless-components-previewpackage, providing a non-modal floating label or description anchored to a trigger element. The implementation leverages CSS Anchor Positioning and the Popover API for improved positioning and visibility management. Supporting types, tests, and exports are added, and the package dependencies and exports are updated accordingly.New Tooltip Component Implementation:
Tooltipcomponent and its supporting files (Tooltip.tsx,Tooltip.types.ts,renderTooltip.tsx,useTooltip.ts) to provide a headless tooltip with customizable positioning, visibility, and accessibility relationships. The implementation uses CSS Anchor Positioning and the Popover API for managing placement and visibility. [1] [2] [3] [4]Testing:
Tooltipcomponent, covering rendering, accessibility attributes, positioning, arrow support, and aria-relationship behaviors.Exports and Package Integration:
Tooltipcomponent, its types, and related utilities from the package entry points, making it available for consumers. [1] [2]Tooltipcomponent in the bundle size fixture for testing and documentation purposes.Dependency and Package Configuration:
@fluentui/react-tooltipand@fluentui/react-positioningas dependencies inpackage.jsonto support the new component, and registered the new entry point fortooltip. [1] [2] [3]