From 38662e95cb409b422523b0c71bedb2de54e31892 Mon Sep 17 00:00:00 2001
From: "Bhavesh S. Gupta" <BhaveshSGupta@gmail.com>
Date: Sun, 11 Oct 2020 07:42:11 +0530
Subject: [PATCH] Added tooltip to bottom feature. Fixes #7

---
 README.md         |  1 +
 src/lib/index.tsx | 12 +++++++-----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 71c7919..4366c19 100644
--- a/README.md
+++ b/README.md
@@ -56,6 +56,7 @@ You can customize almost every aspect of this component using the below props, o
 | containerStyles  	|   style object	|   none	|   The styles to be applied to the container.	|
 | tooltipStyles  	|   style object	|   none	|   The styles to be applied to the tooltip.	|
 | anchorStyles  	|   style object	|   none	|   The styles to be applied to the anchor.	|
+| showTooltipAtBottom    |   boolean   |   false   |   This is use to position tooltip to bottom. |
 
 ## Development
 
diff --git a/src/lib/index.tsx b/src/lib/index.tsx
index 5313063..1ff17cb 100644
--- a/src/lib/index.tsx
+++ b/src/lib/index.tsx
@@ -25,8 +25,8 @@ const containerBaseStyles: React.CSSProperties = {
   position: "relative",
 };
 
-const tooltipBaseStyles: React.CSSProperties = {
-  bottom: "26px",
+const tooltipBaseStyles = (showTooltipAtBottom: boolean): React.CSSProperties => ({
+  [ showTooltipAtBottom ? "top": "bottom" ]: "26px",
   maxWidth: "fit-content",
   position: "absolute",
   width: "auto",
@@ -41,10 +41,10 @@ const tooltipBaseStyles: React.CSSProperties = {
   padding: "6px 8px",
   borderRadius: "5px",
   opacity: 0,
-  transform: "translateY(-5px)",
+  transform: `translateY(${showTooltipAtBottom ? "": "-"}5px)`,
   visibility: "hidden",
   transition: "all 0.2s ease-in-out",
-};
+});
 
 const toolTipVisibleStyles: React.CSSProperties = {
   opacity: 1,
@@ -60,6 +60,7 @@ const CopyMailTo = ({
   containerStyles = {},
   tooltipStyles = {},
   anchorStyles = {},
+  showTooltipAtBottom = false,
 }: {
   email: string;
   children?: React.ReactNode;
@@ -68,6 +69,7 @@ const CopyMailTo = ({
   containerStyles?: React.CSSProperties;
   tooltipStyles?: React.CSSProperties;
   anchorStyles?: React.CSSProperties;
+  showTooltipAtBottom?: boolean;
 }): JSX.Element => {
   const [showCopied, setShowCopied] = React.useState(false);
   const [showTooltip, setShowTooltip] = React.useState(false);
@@ -101,7 +103,7 @@ const CopyMailTo = ({
   };
 
   const allTooltipStyles = {
-    ...tooltipBaseStyles,
+    ...tooltipBaseStyles(showTooltipAtBottom),
     ...tooltipStyles,
     ...(showTooltip && toolTipVisibleStyles),
   };