diff --git a/components/Tooltip/index.scss b/components/Tooltip/index.scss
new file mode 100644
index 00000000..33218a12
--- /dev/null
+++ b/components/Tooltip/index.scss
@@ -0,0 +1,5 @@
+.Tooltip {
+  background: var(--dialog-bg);
+  border-radius: $card-corner;
+  padding: $unit * 1.5;
+}
diff --git a/components/Tooltip/index.tsx b/components/Tooltip/index.tsx
new file mode 100644
index 00000000..a894886c
--- /dev/null
+++ b/components/Tooltip/index.tsx
@@ -0,0 +1,39 @@
+import React, { PropsWithChildren } from 'react'
+import classNames from 'classnames'
+
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
+import './index.scss'
+interface Props extends TooltipPrimitive.TooltipContentProps {
+  content: React.ReactNode
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export default function Tooltip({
+  children,
+  content,
+  open,
+  onOpenChange,
+  ...props
+}: PropsWithChildren<Props>) {
+  const classes = classNames(props.className, {
+    Tooltip: true,
+  })
+
+  return (
+    <TooltipPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+      <TooltipPrimitive.Content
+        side="top"
+        align="center"
+        className={classes}
+        sideOffset={4}
+        {...props}
+      >
+        {content}
+        {/* <TooltipPrimitive.Arrow width={11} height={5} /> */}
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Root>
+  )
+}