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 (