Tooltip : updated tooltip styles (#28264)

* updated tooltip styles * updated style as per review comments * updated comment and added vr test
microsoft · Jun 20, 2023 · 64fb6d6 · 64fb6d6
1 parent 9b5b3f3
commit 64fb6d6
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 0 deletions.
diff --git a/apps/vr-tests-react-components/src/stories/Tooltip.stories.tsx b/apps/vr-tests-react-components/src/stories/Tooltip.stories.tsx
@@ -79,6 +79,20 @@ storiesOf('Tooltip Converged', module)
         <button>Target</button>
       </Tooltip>
     </div>
+  ))
+  .addStory('overflow-wrap', () => (
+    <div className={useStyles().wrapper}>
+      <Tooltip visible content="Thistooltiptextislongenoughtobebrokenintoanewline" relationship="description">
+        <button>Target</button>
+      </Tooltip>
+    </div>
+  ))
+  .addStory('overflow-wrap withArrow', () => (
+    <div className={useStyles().wrapper}>
+      <Tooltip visible withArrow content="Thistooltiptextislongenoughtobebrokenintoanewline" relationship="description">
+        <button>Target</button>
+      </Tooltip>
+    </div>
   ));
 
 const TooltipPositioning: React.FC = () => {

diff --git a/change/@fluentui-react-tooltip-0c7f8278-85ad-44f1-82b3-8048cf63b2e7.json b/change/@fluentui-react-tooltip-0c7f8278-85ad-44f1-82b3-8048cf63b2e7.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: added overflowWrap to make sure content does not exceed the tooltip container and added vr test for the same",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "kakrookaran@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-tooltip/src/components/Tooltip/useTooltipStyles.styles.ts b/packages/react-components/react-tooltip/src/components/Tooltip/useTooltipStyles.styles.ts
@@ -21,6 +21,7 @@ const useStyles = makeStyles({
     fontFamily: tokens.fontFamilyBase,
     fontSize: tokens.fontSizeBase200,
     lineHeight: tokens.lineHeightBase200,
+    overflowWrap: 'break-word',
 
     ...shorthands.borderRadius(tokens.borderRadiusMedium),
     ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),