more feedback

Author: mltejera

packages/react-components/react-tooltip/stories/src/Tooltip/TooltipDefault.stories.tsx

@@ -5,7 +5,7 @@ import { SlideTextRegular } from '@fluentui/react-icons';
 import type { TooltipProps } from '@fluentui/react-components';
 
 export const Default = (props: Partial<TooltipProps>) => (
-  <Tooltip visible={true} content="Example tooltip" relationship="label" {...props}>
+  <Tooltip content="Example tooltip" relationship="label" {...props}>
     <Button icon={<SlideTextRegular />} size="large" />
   </Tooltip>
 );

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/useSemanticTooltipStyles.styles.ts

@@ -3,10 +3,18 @@ import * as semanticTokens from '@fluentui/semantic-tokens';
 import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
 import type { TooltipState } from '@fluentui/react-tooltip';
 import { tokens } from '@fluentui/react-theme';
+import { createArrowStyles } from '@fluentui/react-positioning';
 
 const useStyles = makeStyles({
   root: {
+    display: 'none',
+    boxSizing: 'border-box',
+    maxWidth: '240px',
+    cursor: 'default',
+    overflowWrap: 'break-word',
+
     borderRadius: semanticTokens.ctrlTooltipCorner,
+    border: `1px solid ${semanticTokens.strokeLayer}`,
 
     paddingTop: semanticTokens._ctrlTooltipPaddingTop,
     paddingBottom: semanticTokens._ctrlTooltipPaddingBottom,
@@ -22,12 +30,19 @@ const useStyles = makeStyles({
 
     filter: semanticTokens._ctrlTooltipShadow,
   },
+  visible: {
+    display: 'block',
+  },
 
   // Semantic-tokens does not include inverted tokens, use existing tokens for now.
   inverted: {
     backgroundColor: tokens.colorNeutralBackgroundStatic,
     color: tokens.colorNeutralForegroundStaticInverted,
   },
+
+  // 6 is defined by a constant internal to tooltip
+  // I don't know if any tokens for it, or if it should be a token.
+  arrow: createArrowStyles({ arrowHeight: 6, borderColor: semanticTokens.strokeLayer }),
 });
 
 export const useSemanticTooltipStyles = (_state: unknown): TooltipState => {
@@ -36,14 +51,17 @@ export const useSemanticTooltipStyles = (_state: unknown): TooltipState => {
   const state = _state as TooltipState;
 
   const styles = useStyles();
-  const { appearance } = state;
+  const { appearance, visible } = state;
 
   state.content.className = mergeClasses(
     state.content.className,
-    appearance === 'inverted' && styles.inverted,
     styles.root,
+    appearance === 'inverted' && styles.inverted,
+    visible && styles.visible,
     getSlotClassNameProp_unstable(state.content),
   );
 
+  state.arrowClassName = styles.arrow;
+
   return state;
 };