feat(react-tooltip): add secondary content

[petdud]

Previous Behavior

Tooltip only supported a single content region. Applications commonly appended supporting information to the primary label instead of using the same primary/secondary hierarchy available in MenuItem.

New Behavior

• Adds an optional secondaryContent slot to Tooltip, consistent with MenuItem.
• Renders secondary content opposite the primary content with wrapping, RTL-safe alignment, dark mode, and high-contrast support.
• Leaves existing Tooltip DOM and styling unchanged when secondaryContent is not provided.
• Includes secondary content in the trigger's accessible label or description, matching MenuItem semantics.
• Documents keyboard shortcuts as one common use case without making the API shortcut-specific.
• Adds unit, Storybook, API report, and visual-regression coverage.

<Tooltip content="Bold" secondaryContent="Ctrl+B" relationship="label">
  <Button icon={<TextBoldRegular />} />
</Tooltip>

Design review

Perspective	Feedback
UI engineering	Supported a constrained additive slot because it standardizes a recurring primary/secondary layout and aligns with MenuItem.
UX/accessibility	Supported the hierarchy; keyboard shortcuts are a valid use case, but the API should remain generic and have explicit accessible semantics.
Content design	Supported the secondaryContent name and the distinction between primary content and short supporting metadata.
Visual design	Supported a compact two-region layout with wrapping, RTL, dark-mode, and high-contrast behavior.
Product management	Agreed the user value is real, but initially preferred a documented JSX recipe. The API is justified when consistency and adoption across products are the goal.

Related Issue(s)

• Fixes [Feature]: Add secondary content to Tooltip #36491

[github-actions]

Pull request demo site: URL

[github-actions]

🕵🏾‍♀️ 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	1228	Changed
vr-tests-react-components/CalendarCompat.multiDayView.default.chromium_1.png	489	Changed
vr-tests-react-components/CalendarCompat.multiDayView - Dark Mode.default.chromium.png	1103	Changed
vr-tests-react-components/CalendarCompat.multiDayView - RTL.default.chromium.png	494	Changed

vr-tests-react-components/Menu 1 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Menu.Nested Submenus Small Viewport Stacked.nested menu.chromium.png	841	Changed

vr-tests-react-components/Menu Converged - submenuIndicator slotted content 1 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default.submenus open.chromium.png	413	Changed

vr-tests-react-components/Positioning 2 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png	957	Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png	744	Changed

vr-tests-react-components/ProgressBar converged 3 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png	40	Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png	27	Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png	35	Changed

vr-tests-react-components/TagPicker 2 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/TagPicker.disabled - Dark Mode.chromium.png	658	Changed
vr-tests-react-components/TagPicker.disabled.chromium.png	677	Changed

vr-tests-react-components/Tooltip Converged 3 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Tooltip Converged.secondary content - Dark Mode.default.chromium.png	0	Added
vr-tests-react-components/Tooltip Converged.secondary content - High Contrast.default.chromium.png	0	Added
vr-tests-react-components/Tooltip Converged.secondary content.default.chromium.png	0	Added

There were 3 duplicate changes discarded. Check the build logs for more information.

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-charts AreaChart	405.805 kB 126.781 kB	407.398 kB 127.313 kB	1.593 kB 532 B
react-charts DeclarativeChart	757.337 kB 222.298 kB	758.93 kB 222.773 kB	1.593 kB 475 B
react-charts DonutChart	316.638 kB 97.601 kB	318.231 kB 98.078 kB	1.593 kB 477 B
react-charts FunnelChart	308.038 kB 94.378 kB	309.631 kB 94.853 kB	1.593 kB 475 B
react-charts GanttChart	388.936 kB 121.254 kB	390.519 kB 121.713 kB	1.583 kB 459 B
react-charts GaugeChart	315.986 kB 96.99 kB	317.578 kB 97.467 kB	1.592 kB 477 B
react-charts GroupedVerticalBarChart	397.013 kB 124.032 kB	398.599 kB 124.514 kB	1.586 kB 482 B
react-charts HeatMapChart	391.071 kB 122.287 kB	392.664 kB 122.83 kB	1.593 kB 543 B
react-charts HorizontalBarChart	296.314 kB 90.097 kB	297.9 kB 90.557 kB	1.586 kB 460 B
react-charts LineChart	417.153 kB 129.918 kB	418.739 kB 130.362 kB	1.586 kB 444 B
react-charts SankeyChart	212.696 kB 68.311 kB	214.36 kB 68.862 kB	1.664 kB 551 B
react-charts ScatterChart	396.479 kB 123.959 kB	398.065 kB 124.439 kB	1.586 kB 480 B
react-charts VerticalBarChart	433.471 kB 128.969 kB	435.057 kB 129.448 kB	1.586 kB 479 B
react-charts VerticalStackedBarChart	403.031 kB 125.453 kB	404.617 kB 125.902 kB	1.586 kB 449 B
react-components react-components: entire library	1.295 MB 326.281 kB	1.296 MB 326.737 kB	1.618 kB 456 B
react-headless-components-preview react-headless-components-preview: entire library	268.493 kB 77.803 kB	268.924 kB 77.911 kB	431 B 108 B
react-tooltip Tooltip	53.519 kB 19.021 kB	55.189 kB 19.598 kB	1.67 kB 577 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-avatar Avatar	47.22 kB 14.855 kB
react-avatar AvatarGroup	16.254 kB 6.502 kB
react-avatar AvatarGroupItem	60.339 kB 18.758 kB
react-charts HorizontalBarChartWithAxis	63 B 83 B
react-charts Legends	235.545 kB 70.669 kB
react-charts PolarChart	344.492 kB 107.638 kB
react-charts Sparkline	80.888 kB 26.864 kB
react-checkbox Checkbox	29.609 kB 10.527 kB
react-combobox Combobox (including child components)	138.149 kB 44.681 kB
react-combobox Dropdown (including child components)	137.905 kB 44.453 kB
react-components react-components: Button, FluentProvider & webLightTheme	66.281 kB 19.002 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	226.026 kB 68.049 kB
react-components react-components: FluentProvider & webLightTheme	39.504 kB 13.112 kB
react-datepicker-compat DatePicker Compat	216.224 kB 63.964 kB
react-dialog Dialog (including children components)	89.951 kB 27.858 kB
react-field Field	21.132 kB 7.881 kB
react-input Input	25.027 kB 8.183 kB
react-list List	74.531 kB 23.01 kB
react-list ListItem	98.023 kB 29.881 kB
react-persona Persona	54.173 kB 16.791 kB
react-portal-compat PortalCompatProvider	5.341 kB 2.146 kB
react-progress ProgressBar	19.063 kB 7.418 kB
react-radio Radio	26.994 kB 8.711 kB
react-radio RadioGroup	12.759 kB 5.176 kB
react-select Select	24.876 kB 8.936 kB
react-slider Slider	32.231 kB 11.086 kB
react-spinbutton SpinButton	32.513 kB 10.584 kB
react-swatch-picker @fluentui/react-swatch-picker - package	92.187 kB 27.315 kB
react-switch Switch	32.231 kB 10.156 kB
react-table DataGrid	146.759 kB 43.576 kB
react-table Table (Primitives only)	36.893 kB 12.305 kB
react-table Table as DataGrid	118.503 kB 33.331 kB
react-table Table (Selection only)	65.373 kB 18.591 kB
react-table Table (Sort only)	64.036 kB 18.204 kB
react-tag-picker @fluentui/react-tag-picker - package	174.01 kB 54.191 kB
react-tags InteractionTag	12.463 kB 4.942 kB
react-tags Tag	28.376 kB 8.9 kB
react-tags TagGroup	69.648 kB 21.404 kB
react-textarea Textarea	23.392 kB 8.447 kB
react-timepicker-compat TimePicker	140.867 kB 46.058 kB
react-tree FlatTree	135.661 kB 40.459 kB
react-tree PersonaFlatTree	137.524 kB 40.991 kB
react-tree PersonaTree	133.605 kB 39.781 kB
react-tree Tree	131.748 kB 39.265 kB

_{🤖 This report was generated against a575a0b65e536162fee57c32ba1f7f884ae4bd8a}