feat(component): apply animation for tooltip, remove triangle (#11245)

packages/frontend/component/src/ui/tooltip/styles.css.ts

@@ -1,6 +1,18 @@
 import { cssVar } from '@toeverything/theme';
 import { cssVarV2 } from '@toeverything/theme/v2';
-import { style } from '@vanilla-extract/css';
+import { keyframes, style } from '@vanilla-extract/css';
+
+const tooltipScaleIn = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'scale(0.85)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'scale(1)',
+  },
+});
+
 export const tooltipContent = style({
   backgroundColor: cssVarV2('tooltips/background'),
   color: cssVarV2('tooltips/foreground'),
@@ -9,6 +21,8 @@ export const tooltipContent = style({
   lineHeight: '22px',
   borderRadius: '4px',
   maxWidth: '280px',
+  transformOrigin: 'var(--radix-tooltip-content-transform-origin)',
+  animation: `${tooltipScaleIn} 0.2s cubic-bezier(0.2, 1, 0.3, 1)`,
 });
 
 export const withShortcut = style({

packages/frontend/component/src/ui/tooltip/tooltip.stories.tsx

@@ -91,6 +91,19 @@ export const CustomAlign = () => {
   );
 };
 
+const sides = ['top', 'right', 'bottom', 'left'] as const;
+export const CustomSide = () => {
+  return (
+    <div style={{ display: 'flex', gap: 4 }}>
+      {sides.map(side => (
+        <Tooltip content="This is a tooltip" side={side} key={side}>
+          <Button>Show tooltip at {side}</Button>
+        </Tooltip>
+      ))}
+    </div>
+  );
+};
+
 export const WithCustomContent: StoryFn<TooltipProps> = args => (
   <Tooltip
     content={

packages/frontend/component/src/ui/tooltip/tooltip.tsx

@@ -5,7 +5,6 @@ import type {
 } from '@radix-ui/react-tooltip';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { cssVar } from '@toeverything/theme';
-import { cssVarV2 } from '@toeverything/theme/v2';
 import clsx from 'clsx';
 import { type ReactElement, type ReactNode } from 'react';
 
@@ -110,20 +109,6 @@ export const Tooltip = ({
             ) : (
               content
             )}
-            <TooltipPrimitive.Arrow asChild>
-              <svg
-                width="10"
-                height="6"
-                viewBox="0 0 10 6"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M4.11111 5.55C4.55556 6.15 5.44445 6.15 5.88889 5.55L10 0H0L4.11111 5.55Z"
-                  fill={cssVarV2('tooltips/background')}
-                />
-              </svg>
-            </TooltipPrimitive.Arrow>
           </TooltipPrimitive.Content>
         </TooltipPrimitive.Portal>
       </TooltipPrimitive.Root>