From b736b880fb7440c5a21ae2d26d09b4b629361def Mon Sep 17 00:00:00 2001
From: Arnaud <arnaud@status.im>
Date: Wed, 28 Aug 2024 10:03:44 +0200
Subject: [PATCH] Add tooltip conponent

---
 src/components/Tooltip/Tooltip.css | 32 ++++++++++++++++++++++++++++++
 src/components/Tooltip/Tooltip.tsx | 16 +++++++++++++++
 stories/Tooltip.stories.tsx        | 23 +++++++++++++++++++++
 3 files changed, 71 insertions(+)
 create mode 100644 src/components/Tooltip/Tooltip.css
 create mode 100644 src/components/Tooltip/Tooltip.tsx
 create mode 100644 stories/Tooltip.stories.tsx

diff --git a/src/components/Tooltip/Tooltip.css b/src/components/Tooltip/Tooltip.css
new file mode 100644
index 0000000..87e3fc3
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
new file mode 100644
index 0000000..5551475
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/stories/Tooltip.stories.tsx b/stories/Tooltip.stories.tsx
new file mode 100644
index 0000000..5d24d92
--- /dev/null
+++ b/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" />,
+  },
+};