feat(Tooltip): Tooltip does not render by default

Author: chenyueban

packages/fluent-ui-hooks/src/usePopper.ts

@@ -6,7 +6,7 @@ export interface usePropperOptions extends PopperJS.PopperOptions {}
 
 export function usePopper({
   placement = 'bottom',
-  positionFixed = false,
+  positionFixed = true,
   eventsEnabled = true,
   ...otherOptions
 }: usePropperOptions): [React.MutableRefObject<null>, React.MutableRefObject<null>] {

packages/fluent-ui/src/Command/Command.tsx

@@ -58,8 +58,9 @@ const Command = React.forwardRef<HTMLDivElement, CommandProps>(
       }
     )
 
+    // Secondary Popup related
     const {
-      visible: secondaryVisible,
+      // visible: secondaryVisible,
       setVisible: setSecondaryVisible,
       Portal: SecondaryPortal
     } = usePortal()
@@ -113,13 +114,12 @@ const Command = React.forwardRef<HTMLDivElement, CommandProps>(
                 <MoreIcon />
               </CommandButton>
             ))}
-          {secondaryVisible && (
-            <SecondaryPortal style={portalStyle}>
-              <StyledSecondaryContainer ref={secondaryRef} acrylic={acrylic}>
-                {container.secondary}
-              </StyledSecondaryContainer>
-            </SecondaryPortal>
-          )}
+
+          <SecondaryPortal style={portalStyle}>
+            <StyledSecondaryContainer ref={secondaryRef} acrylic={acrylic}>
+              {container.secondary}
+            </StyledSecondaryContainer>
+          </SecondaryPortal>
         </CommandContext.Provider>
       </StyledContainer>
     )

packages/fluent-ui/src/Tooltip/Tooltip.tsx

@@ -59,7 +59,7 @@ const Tooltip = ({
   return (
     <>
       {React.cloneElement(children, { ref: referenceRef, ...bind })}
-      <Transition visible={isVisible} wrapper={false}>
+      <Transition visible={isVisible} wrapper={false} mountOnEnter unmountOnExit>
         {content}
       </Transition>
     </>