fix(ui): tooltip style #505

libs/components/ui/src/popover/Popover.tsx

@@ -4,7 +4,7 @@ import { type PopperHandler, Popper } from '../popper';
 import { PopoverContainer } from './container';
 import type { PopoverProps, PopoverDirection } from './interface';
 
-const placementToContainerDirection: Record<
+export const placementToContainerDirection: Record<
     PopperPlacementType,
     PopoverDirection
 > = {

libs/components/ui/src/tooltip/Tooltip.tsx

@@ -1,10 +1,6 @@
-import React, {
+import { forwardRef, type PropsWithChildren, type CSSProperties } from 'react';
-    forwardRef,
-    type PropsWithChildren,
-    type CSSProperties,
-    useState,
-} from 'react';
 import { type PopperHandler, type PopperProps, Popper } from '../popper';
+import { PopoverContainer, placementToContainerDirection } from '../popover';
 import type { TooltipProps } from './interface';
 import { useTheme } from '../theme';
 
@@ -15,7 +11,6 @@ const useTooltipStyle = (): CSSProperties => {
         color: theme.affine.palette.white,
         ...theme.affine.typography.tooltip,
         padding: '4px 8px',
-        borderRadius: theme.shape.borderRadius,
     };
 };
 
@@ -23,14 +18,25 @@ export const Tooltip = forwardRef<
     PopperHandler,
     PropsWithChildren<PopperProps & TooltipProps>
 >((props, ref) => {
+    const { content, placement = 'top-start' } = props;
     const style = useTooltipStyle();
+    // 如果没有内容，则永远隐藏
+    const visibleProp = content ? {} : { visible: false };
     return (
         <Popper
             ref={ref}
-            popoverStyle={style}
+            {...visibleProp}
             placement="top"
-            showArrow
             {...props}
+            showArrow={false}
+            content={
+                <PopoverContainer
+                    style={style}
+                    direction={placementToContainerDirection[placement]}
+                >
+                    {content}
+                </PopoverContainer>
+            }
         />
     );
 });