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;