diff --git a/modules/react/tooltip/stories/Tooltip.mdx b/modules/react/tooltip/stories/Tooltip.mdx
index cd1e3ce94f..dd435b9a1a 100644
--- a/modules/react/tooltip/stories/Tooltip.mdx
+++ b/modules/react/tooltip/stories/Tooltip.mdx
@@ -5,6 +5,7 @@ import {InformationHighlight} from '@workday/canvas-kit-react/information-highli
import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
import TooltipStoriesMeta from './Tooltip.stories';
+import {AIDisclosure} from './examples/AIDisclosure';
import {CustomContent} from './examples/CustomContent';
import {Default} from './examples/Default';
import {DelayedTooltip} from './examples/DelayedTooltip';
@@ -146,6 +147,15 @@ a dialog instead.
+### AI Disclosure
+
+Use a tooltip to disclose when content or functionality is powered by AI. Pair an icon button with a
+tooltip near the content it describes so users understand how it was produced before they act on it.
+The tooltip labels the button, making the disclosure available to both sighted and screen reader
+users.
+
+
+
### Delayed Tooltip
The default delay for showing and hiding a tooltip are 300ms and 100ms, respectively. You can
diff --git a/modules/react/tooltip/stories/Tooltip.stories.ts b/modules/react/tooltip/stories/Tooltip.stories.ts
index 39b669fc42..4c982c08b0 100644
--- a/modules/react/tooltip/stories/Tooltip.stories.ts
+++ b/modules/react/tooltip/stories/Tooltip.stories.ts
@@ -3,6 +3,7 @@ import {Meta, StoryObj} from '@storybook/react';
import {Tooltip} from '@workday/canvas-kit-react/tooltip';
import mdxDoc from './Tooltip.mdx';
+import {AIDisclosure as AIDisclosureExample} from './examples/AIDisclosure';
import {Alt as AltExample} from './examples/Alt';
import {CustomContent as CustomContentExample} from './examples/CustomContent';
import {Default as DefaultExample} from './examples/Default';
@@ -34,6 +35,9 @@ export const Default: Story = {
export const CustomContent: Story = {
render: CustomContentExample,
};
+export const AIDisclosure: Story = {
+ render: AIDisclosureExample,
+};
export const DelayedTooltip: Story = {
render: DelayedTooltipExample,
};
diff --git a/modules/react/tooltip/stories/examples/AIDisclosure.tsx b/modules/react/tooltip/stories/examples/AIDisclosure.tsx
new file mode 100644
index 0000000000..de3d12995b
--- /dev/null
+++ b/modules/react/tooltip/stories/examples/AIDisclosure.tsx
@@ -0,0 +1,38 @@
+import {ExternalHyperlink, TertiaryButton} from '@workday/canvas-kit-react/button';
+import {Card} from '@workday/canvas-kit-react/card';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {infoSparkleIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+const containerStyles = createStyles({
+ background: system.color.bg.alt.default,
+ padding: system.padding.xl,
+});
+
+export const AIDisclosure = () => {
+ return (
+
+
+
+ Giant Pacific Octopus
+
+
+
+
+
+ The giant Pacific octopus (Enteroctopus dofleini), also known as the North Pacific giant
+ octopus, is a large marine cephalopod belonging to the genus Enteroctopus and
+ Enteroctopodidae family. –{' '}
+
+ View Source
+
+
+
+
+ );
+};