Added tooltip position and action workflow for deployment

.github/workflows/main.yml

@@ -0,0 +1,29 @@
+name: CI
+on:
+  push:
+    branches: [ master, dewanshrawat15-patch* ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v2.3.1
+        with:
+          persist-credentials: false
+
+      - name: Install and Build 🔧
+        run: |
+          npm install
+          npm run build
+          npm run demo:prod
+
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@3.6.2
+        with:
+          GITHUB_TOKEN: ${{ secrets.Devfolio_Token }}
+          BRANCH: gh-pages
+          FOLDER: dist
+          CLEAN: true

src/demo/index.tsx

@@ -8,8 +8,8 @@ const App = () => (
     style={{ display: "flex", alignItems: "center", flexDirection: "column" }}
   >
     <h1 style={{ marginBottom: "50px" }}>Copy email address to clipboard</h1>
-    <CopyMailTo email="email@domain.com" />
+    <CopyMailTo email="email@domain.com" pos="below" />
   </div>
 );
 
-ReactDOM.render(<App />, document.getElementById("app"));
+ReactDOM.render(<App />, document.getElementById("app"));

src/lib/index.tsx

@@ -25,8 +25,8 @@ const containerBaseStyles: React.CSSProperties = {
   position: "relative",
 };
 
-const tooltipBaseStyles: React.CSSProperties = {
-  bottom: "26px",
+const tooltipBaseStyles = (pos: string): React.CSSProperties => ({
+  [pos === "above" ? "bottom" : "top"]: "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(${pos === "above" ? "-5px": "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 = {},
+  pos = "above",
 }: {
   email: string;
   children?: React.ReactNode;
@@ -68,6 +69,7 @@ const CopyMailTo = ({
   containerStyles?: React.CSSProperties;
   tooltipStyles?: React.CSSProperties;
   anchorStyles?: React.CSSProperties;
+  pos?: string;
 }): JSX.Element => {
   const [showCopied, setShowCopied] = React.useState(false);
   const [showTooltip, setShowTooltip] = React.useState(false);
@@ -101,10 +103,10 @@ const CopyMailTo = ({
   };
 
   const allTooltipStyles = {
-    ...tooltipBaseStyles,
-    ...tooltipStyles,
-    ...(showTooltip && toolTipVisibleStyles),
-  };
+		...tooltipBaseStyles(pos),
+		...tooltipStyles,
+		...(showTooltip && toolTipVisibleStyles),
+	};
 
   return (
     <span style={allContainerStyles}>
@@ -127,4 +129,4 @@ const CopyMailTo = ({
   );
 };
 
-export default CopyMailTo;
+export default CopyMailTo;