From b5d2d063a5c7926dc3035b6682c41f29d1579453 Mon Sep 17 00:00:00 2001
From: alt1o <wxlxinglong@outlook.com>
Date: Thu, 28 Jul 2022 16:54:28 +0800
Subject: [PATCH] fix(ui): tooltip style #505

---
 libs/components/ui/src/popover/Popover.tsx |  2 +-
 libs/components/ui/src/tooltip/Tooltip.tsx | 24 ++++++++++++++--------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/libs/components/ui/src/popover/Popover.tsx b/libs/components/ui/src/popover/Popover.tsx
index e165d8324..67ab3f3c2 100644
--- a/libs/components/ui/src/popover/Popover.tsx
+++ b/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
 > = {
diff --git a/libs/components/ui/src/tooltip/Tooltip.tsx b/libs/components/ui/src/tooltip/Tooltip.tsx
index 6954fe2cc..0ae501dfb 100644
--- a/libs/components/ui/src/tooltip/Tooltip.tsx
+++ b/libs/components/ui/src/tooltip/Tooltip.tsx
@@ -1,10 +1,6 @@
-import React, {
-    forwardRef,
-    type PropsWithChildren,
-    type CSSProperties,
-    useState,
-} from 'react';
+import { forwardRef, type PropsWithChildren, type CSSProperties } 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>
+            }
         />
     );
 });