Add tooltip conponent

src/components/Tooltip/Tooltip.css

@@ -0,0 +1,32 @@
+.tooltip {
+  cursor: help;
+  position: relative;
+  word-break: break-word;
+}
+
+.tooltip:hover::after {
+  position: absolute;
+  opacity: 0;
+  content: attr(data-tooltip);
+  animation: tooltip 0.35s cubic-bezier(0.42, 0, 0.62, 1.32) forwards;
+  color: var(--codex-color);
+  background: var(--codex-background-light);
+  border-radius: var(--codex-border-radius);
+  min-width: 150px;
+  max-width: 100%;
+  font-weight: 600;
+  text-align: center;
+  font-size: 0.85rem;
+  padding: 0.5rem;
+  bottom: 140%;
+  left: -140%;
+}
+
+@keyframes tooltip {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import "./Tooltip.css";
+
+type Props = {
+  children: ReactNode;
+  message: string;
+  className?: string;
+};
+
+export function Tooltip({ children, message, className = "" }: Props) {
+  return (
+    <span className={"tooltip " + className} data-tooltip={message}>
+      {children}
+    </span>
+  );
+}

stories/Tooltip.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tooltip } from "../src/components/Tooltip/Tooltip";
+import { CheckCircle } from "lucide-react";
+
+const meta = {
+  title: "Overlays/Tooltip",
+  component: Tooltip,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    message: "Hello world",
+    children: <CheckCircle size={"1rem"} className="cell-stateIcon" />,
+  },
+};