From 2ae9c7350674a549ad04f806692f65294d1fdb3b Mon Sep 17 00:00:00 2001
From: EnricoGianoglio <egianoglio@microsoft.com>
Date: Wed, 1 Apr 2026 17:06:40 +0200
Subject: [PATCH] add brand appearance to Tooltip

---
 .../library/etc/react-tooltip.api.md          |  2 +-
 .../src/components/Tooltip/Tooltip.types.ts   |  3 ++-
 .../Tooltip/useTooltipStyles.styles.ts        |  6 ++++++
 .../src/Tooltip/TooltipBrand.stories.tsx      | 19 +++++++++++++++++++
 .../stories/src/Tooltip/index.stories.tsx     |  1 +
 5 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 packages/react-components/react-tooltip/stories/src/Tooltip/TooltipBrand.stories.tsx

diff --git a/packages/react-components/react-tooltip/library/etc/react-tooltip.api.md b/packages/react-components/react-tooltip/library/etc/react-tooltip.api.md
index 29f3571b5bf64..fc36228be4633 100644
--- a/packages/react-components/react-tooltip/library/etc/react-tooltip.api.md
+++ b/packages/react-components/react-tooltip/library/etc/react-tooltip.api.md
@@ -37,7 +37,7 @@ export const tooltipClassNames: SlotClassNames<TooltipSlots>;
 
 // @public
 export type TooltipProps = ComponentProps<TooltipSlots> & TriggerProps<TooltipTriggerProps> & Pick<PortalProps, 'mountNode'> & {
-    appearance?: 'normal' | 'inverted';
+    appearance?: 'normal' | 'inverted' | 'brand';
     hideDelay?: number;
     onVisibleChange?: (event: React_2.PointerEvent<HTMLElement> | React_2.FocusEvent<HTMLElement> | undefined, data: OnVisibleChangeData) => void;
     positioning?: PositioningShorthand;
diff --git a/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.types.ts b/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.types.ts
index 979f8ce01c675..93f014be5463a 100644
--- a/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.types.ts
+++ b/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.types.ts
@@ -54,10 +54,11 @@ export type TooltipProps = ComponentProps<TooltipSlots> &
      * The tooltip's visual appearance.
      * * `normal` - Uses the theme's background and text colors.
      * * `inverted` - Higher contrast variant that uses the theme's inverted colors.
+     * * `brand` - Uses the brand colors from the theme.
      *
      * @default normal
      */
-    appearance?: 'normal' | 'inverted';
+    appearance?: 'normal' | 'inverted' | 'brand';
     /**
      * Delay before the tooltip is hidden, in milliseconds.
      *
diff --git a/packages/react-components/react-tooltip/library/src/components/Tooltip/useTooltipStyles.styles.ts b/packages/react-components/react-tooltip/library/src/components/Tooltip/useTooltipStyles.styles.ts
index c1c11f184c144..39051d6f47b98 100644
--- a/packages/react-components/react-tooltip/library/src/components/Tooltip/useTooltipStyles.styles.ts
+++ b/packages/react-components/react-tooltip/library/src/components/Tooltip/useTooltipStyles.styles.ts
@@ -45,6 +45,11 @@ const useStyles = makeStyles({
     color: tokens.colorNeutralForegroundStaticInverted,
   },
 
+  brand: {
+    backgroundColor: tokens.colorBrandBackground,
+    color: tokens.colorNeutralForegroundOnBrand,
+  },
+
   arrow: createArrowStyles({ arrowHeight }),
 });
 
@@ -60,6 +65,7 @@ export const useTooltipStyles_unstable = (state: TooltipState): TooltipState =>
     tooltipClassNames.content,
     styles.root,
     state.appearance === 'inverted' && styles.inverted,
+    state.appearance === 'brand' && styles.brand,
     state.visible && styles.visible,
     state.content.className,
   );
diff --git a/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipBrand.stories.tsx b/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipBrand.stories.tsx
new file mode 100644
index 0000000000000..76dbbfb5421d9
--- /dev/null
+++ b/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipBrand.stories.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { JSXElement } from '@fluentui/react-components';
+import { Button, Tooltip } from '@fluentui/react-components';
+import { SlideTextFilled } from '@fluentui/react-icons';
+
+export const Brand = (): JSXElement => (
+  <Tooltip appearance="brand" content="Example brand tooltip" relationship="label">
+    <Button icon={<SlideTextFilled />} size="large" />
+  </Tooltip>
+);
+
+Brand.storyName = 'Appearance: brand';
+Brand.parameters = {
+  docs: {
+    description: {
+      story: "The `appearance` prop can be set to `brand` to use the theme's brand colors.",
+    },
+  },
+};
diff --git a/packages/react-components/react-tooltip/stories/src/Tooltip/index.stories.tsx b/packages/react-components/react-tooltip/stories/src/Tooltip/index.stories.tsx
index 60b4048b98d5b..45fcfb98b8478 100644
--- a/packages/react-components/react-tooltip/stories/src/Tooltip/index.stories.tsx
+++ b/packages/react-components/react-tooltip/stories/src/Tooltip/index.stories.tsx
@@ -8,6 +8,7 @@ export { Default } from './TooltipDefault.stories';
 export { RelationshipLabel } from './TooltipRelationshipLabel.stories';
 export { RelationshipDescription } from './TooltipRelationshipDescription.stories';
 export { Inverted } from './TooltipInverted.stories';
+export { Brand } from './TooltipBrand.stories';
 export { WithArrow } from './TooltipWithArrow.stories';
 export { Styled } from './TooltipStyled.stories';
 export { CustomMount } from './TooltipCustomMount.stories';