init: the first public commit for AFFiNE

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

@@ -0,0 +1,36 @@
+import React, {
+    forwardRef,
+    type PropsWithChildren,
+    type CSSProperties,
+    useState,
+} from 'react';
+import { type PopperHandler, type PopperProps, Popper } from '../popper';
+import type { TooltipProps } from './interface';
+import { useTheme } from '../theme';
+
+const useTooltipStyle = (): CSSProperties => {
+    const theme = useTheme();
+    return {
+        backgroundColor: theme.affine.palette.icons,
+        color: theme.affine.palette.white,
+        ...theme.affine.typography.tooltip,
+        padding: '4px 8px',
+        borderRadius: theme.shape.borderRadius,
+    };
+};
+
+export const Tooltip = forwardRef<
+    PopperHandler,
+    PropsWithChildren<PopperProps & TooltipProps>
+>((props, ref) => {
+    const style = useTooltipStyle();
+    return (
+        <Popper
+            ref={ref}
+            popoverStyle={style}
+            placement="top"
+            showArrow
+            {...props}
+        />
+    );
+});

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

@@ -0,0 +1 @@
+export * from './Tooltip';

libs/components/ui/src/tooltip/interface.ts

@@ -0,0 +1,3 @@
+export type TooltipProps = {
+    showArrow?: boolean;
+};