From 38145e0780144c119d1ea1533ef17e563b9028d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”>
Date: Tue, 9 Aug 2022 17:22:38 +0300
Subject: [PATCH] Tooltip - onHover - Tooltip text and children can be provided

---
 src/components/Tooltip.tsx | 40 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 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 0000000..d611691
--- /dev/null
+++ b/src/components/Tooltip.tsx
@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+
+export interface TooltipProps {
+  /**
+   * Tooltip text - can be string or another component
+   */
+  tooltipMessage: ReactNode;
+  /**
+   * The targeted component
+   */
+  children: ReactNode;
+}
+
+const Tooltip = ({ tooltipMessage, children }: TooltipProps) => {
+  return (
+    <div
+      className="group cursor-pointer relative focus:outline-none overflow-hidden 
+      hover:overflow-visible"
+    >
+      {/* Tooltip will be shown under the component(children) when the children is onHover */}
+      {children}
+      {/* Creating the tooltip and give it a postion */}
+      <div
+        className="absolute left-1/2 -bottom-10 p-2 rounded transition-all duration-1000 
+        bg-gray-900 text-white text-sm -translate-x-1/2 opacity-0 z-40
+        
+        leading-none whitespace-no-wrap w-fit text-center
+
+        before:content-[''] before:absolute before:-top-1 before:left-1/2 before:-translate-x-1/2 
+        before:w-3 before:h-3 before:bg-gray-900 before:rotate-45 before:rounded-sm 
+         
+        group-hover:opacity-100"
+      >
+        {tooltipMessage}
+      </div>
+    </div>
+  );
+};
+
+export default Tooltip;