diff --git a/src/demo/index.tsx b/src/demo/index.tsx
index 4db66df..4aa5a1d 100644
--- a/src/demo/index.tsx
+++ b/src/demo/index.tsx
@@ -8,7 +8,7 @@ const App = () => (
style={{ display: "flex", alignItems: "center", flexDirection: "column" }}
>
Copy email address to clipboard
-
+
);
diff --git a/src/lib/index.tsx b/src/lib/index.tsx
index 5313063..eb7a4af 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 = (tooltipPosition: string): React.CSSProperties => ({
+ [tooltipPosition === "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(${tooltipPosition === "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 = {},
+ tooltipPosition = "above",
}: {
email: string;
children?: React.ReactNode;
@@ -68,6 +69,7 @@ const CopyMailTo = ({
containerStyles?: React.CSSProperties;
tooltipStyles?: React.CSSProperties;
anchorStyles?: React.CSSProperties;
+ tooltipPosition?: 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(tooltipPosition),
+ ...tooltipStyles,
+ ...(showTooltip && toolTipVisibleStyles),
+ };
return (