feat: add tooltip position appear below

fix: add type string literal for tooltipPosition

Update Readme

Revert to previous Readme

Update Readme from master

Author: kala2

README.md

@@ -1,11 +1,14 @@
 ## react-copy-mailto
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 [![npm version](https://badge.fury.io/js/react-copy-mailto.svg)](https://badge.fury.io/js/react-copy-mailto) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-copy-mailto)
 
 A fully customizable React component for copying email from `mailto` links.
 
 ## Motivation
-The one thing we all can agree on that we hate it when the default mail app pops up after clicking on the `mailto` links. Most of the time we just want to copy the email address and that's where this module comes into play.
+The one thing we all can agree on that we hate it when the default mail app pops up after clicking on the `mailto` links. Most of the time we just want to copy the email address and that's where this module comes into play. Big shout out to [Kuldar](https://twitter.com/kkuldar) whose tweet [thread](https://twitter.com/kkuldar/status/1270736717939716097) inspired us to build this.
 
 
 ## Demo
@@ -46,13 +49,14 @@ You can customize almost every aspect of this component using the below props, o
 
 |  Name 	|   Type	|  Default 	|   Description	|
 |:-:	|---	|---	|---	|
-| email  	|  string 	|  none 	|  The email to be copied 	|
+| email  	|  string 	|  none 	|  The email to be copied. 	|
 | children  	|  ReactNode  	|  null 	|  Use this if you want to use some custom component inside the anchor tag. 	|
 | defaultTooltip  	|   string	|   "Copy email address"	|   Text shown in the tooltip when the user hovers over the link.	|
 | copiedTooltip 	|   string	|   "Copied to clipboard!"	|   Text shown in the tooltip when the user clicks on the link and the text is copied to clipboard.	|
-| 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	|
+| 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.	|
+| tooltipPosition  	|   string	|   "above"	|   The position of the tooltip.	|
 
 ## Development
 
@@ -78,3 +82,23 @@ Feel free to open [issues](https://github.com/devfolioco/react-copy-mailto/issue
 
 [![NPM](https://img.shields.io/npm/l/react-copy-mailto)](https://github.com/devfolioco/react-copy-mailto/blob/master/LICENSE)
 
+
+## Contributors ✨
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="http://prateeksurana.me"><img src="https://avatars3.githubusercontent.com/u/21277179?v=4" width="100px;" alt=""/><br /><sub><b>Prateek Surana</b></sub></a><br /><a href="https://github.com/devfolioco/react-copy-mailto/commits?author=prateek3255" title="Code">💻</a> <a href="#design-prateek3255" title="Design">🎨</a> <a href="#content-prateek3255" title="Content">🖋</a> <a href="https://github.com/devfolioco/react-copy-mailto/commits?author=prateek3255" title="Documentation">📖</a></td>
+    <td align="center"><a href="http://ankiiitraj.github.io"><img src="https://avatars2.githubusercontent.com/u/48787278?v=4" width="100px;" alt=""/><br /><sub><b>Ankit Raj</b></sub></a><br /><a href="#tool-ankiiitraj" title="Tools">🔧</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-enable -->
+<!-- prettier-ignore-end -->
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

src/demo/index.tsx

@@ -8,7 +8,7 @@ const App = () => (
     style={{ display: "flex", alignItems: "center", flexDirection: "column" }}
   >
     <h1 style={{ marginBottom: "50px" }}>Copy email address to clipboard</h1>
-    <CopyMailTo email="[email protected]" />
+    <CopyMailTo email="[email protected]" tooltipPosition="below" />
   </div>
 );
 

src/lib/index.tsx

@@ -1,5 +1,7 @@
 import React, { MouseEvent } from "react";
 
+type TooltipPosition = "above" | "below";
+
 const copyToClipboard = (str: string) => {
   const el = document.createElement("textarea"); // Create a <textarea> element
   el.value = str; // Set its value to the string that you want copied
@@ -25,8 +27,8 @@ const containerBaseStyles: React.CSSProperties = {
   position: "relative",
 };
 
-const tooltipBaseStyles: React.CSSProperties = {
-  bottom: "26px",
+const tooltipBaseStyles = (tooltipPosition: string): React.CSSProperties => ({
+  [tooltipPosition === "above" ? "bottom" : "top"]: "26px",
   maxWidth: "fit-content",
   position: "absolute",
   width: "auto",
@@ -41,10 +43,10 @@ const tooltipBaseStyles: React.CSSProperties = {
   padding: "6px 8px",
   borderRadius: "5px",
   opacity: 0,
-  transform: "translateY(-5px)",
+  transform: `translateY(${tooltipPosition === "above" ? "-5px": "5px"})`,
   visibility: "hidden",
   transition: "all 0.2s ease-in-out",
-};
+});
 
 const toolTipVisibleStyles: React.CSSProperties = {
   opacity: 1,
@@ -60,6 +62,7 @@ const CopyMailTo = ({
   containerStyles = {},
   tooltipStyles = {},
   anchorStyles = {},
+  tooltipPosition = "above",
 }: {
   email: string;
   children?: React.ReactNode;
@@ -68,6 +71,7 @@ const CopyMailTo = ({
   containerStyles?: React.CSSProperties;
   tooltipStyles?: React.CSSProperties;
   anchorStyles?: React.CSSProperties;
+  tooltipPosition?: TooltipPosition;
 }): JSX.Element => {
   const [showCopied, setShowCopied] = React.useState(false);
   const [showTooltip, setShowTooltip] = React.useState(false);
@@ -101,10 +105,10 @@ const CopyMailTo = ({
   };
 
   const allTooltipStyles = {
-    ...tooltipBaseStyles,
-    ...tooltipStyles,
-    ...(showTooltip && toolTipVisibleStyles),
-  };
+		...tooltipBaseStyles(tooltipPosition),
+		...tooltipStyles,
+		...(showTooltip && toolTipVisibleStyles),
+	};
 
   return (
     <span style={allContainerStyles}>