From 156de6112bb88d62cf41054b738a764ed024c94a Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 16 Oct 2025 10:01:14 +0700
Subject: [PATCH] feat(FE-91): create Tooltip component

---
 src/components/Tooltip.tsx | 60 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 src/components/Tooltip.tsx

diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
new file mode 100644
index 00000000..02f86dca
--- /dev/null
+++ b/src/components/Tooltip.tsx
@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/lib/helper';
+import { Color } from '@/types/theme';
+
+interface TooltipProps {
+  children?: ReactNode;
+  content?: ReactNode;
+  className?: {
+    wrapper?: string;
+    content?: string;
+  };
+  open?: boolean;
+  color?: Color;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+const Tooltip = ({
+  children,
+  content,
+  className,
+  open,
+  color,
+  position,
+}: TooltipProps) => {
+  const tooltipBaseClassName = cn('tooltip', {
+    'tooltip-open': typeof open === 'boolean' && open,
+
+    'tooltip-top': position === 'top',
+    'tooltip-bottom': position === 'bottom',
+    'tooltip-left': position === 'left',
+    'tooltip-right': position === 'right',
+
+    'tooltip-primary': color === 'primary',
+    'tooltip-secondary': color === 'secondary',
+    'tooltip-accent': color === 'accent',
+    'tooltip-neutral': color === 'neutral',
+    'tooltip-info': color === 'info',
+    'tooltip-success': color === 'success',
+    'tooltip-warning': color === 'warning',
+    'tooltip-error': color === 'error',
+  });
+  return (
+    <div className={cn(tooltipBaseClassName, className?.wrapper)}>
+      <div
+        className={cn(
+          'tooltip-content',
+          'max-w-60 sm:max-w-xs',
+          className?.content
+        )}
+      >
+        {content}
+      </div>
+
+      {children}
+    </div>
+  );
+};
+
+export default Tooltip;