microsoft / microsoft/fluentui
[Feature]: Add secondary content to Tooltip
Open
@petdud is already working on this.
Since Aug 6, 2026.
Area: Accessibility
Component: Tooltip
Fluent UI react-components (v9)
From Shield
Needs: Backlog review
Needs: Design
Type: Feature
- Dominant language
- TypeScript
- Stars
- 20.3k
- Forks
- 2.9k
- Avg merge
- 2d 9h
- Merged PRs (30d)
- 46
Description
User story
As a user, I want tooltips to distinguish primary and supporting content so that the main label stays concise and secondary information remains easy to scan.
Teams currently includes supporting information such as keyboard shortcuts in parentheses as part of tooltip labels. This mixes the main label with secondary information. Menu items already provide a secondaryContent slot; Tooltip should offer the same content hierarchy and visual pattern.
Proposed behavior
- Add an optional
secondaryContentslot to Tooltip. - Render it opposite the primary
content, consistent with MenuItem. - Keep existing Tooltip rendering unchanged when
secondaryContentis absent. - Document keyboard shortcuts as one common use case without making the API shortcut-specific.
- Support wrapping, RTL, dark mode, and high contrast.
Acceptance criteria
secondaryContentis a public slot and participates in the accessible label or description, matching MenuItem behavior.- Primary and secondary content render on one row when space permits and wrap cleanly when constrained.
- Existing Tooltip consumers have no DOM or visual change unless they use the new slot.
- Unit, Storybook, and visual-regression coverage are included.
Example
<Tooltip content="Bold" secondaryContent="Ctrl+B" relationship="label">
<Button icon={<TextBoldRegular />} />
</Tooltip>
Preview
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.