Merge pull request #6 from devfolioco/fix-tooltip-hover

Fix tooltip hover
devfolioco · Aug 1, 2020 · 6e2f2cc · 6e2f2cc
2 parents 43c5f8c + 16a9ba2
commit 6e2f2cc
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -50,8 +50,9 @@ You can customize almost every aspect of this component using the below props, o
 | 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 anchor container	|
+| 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	|
 
 ## Development
 

diff --git a/src/lib/index.tsx b/src/lib/index.tsx
@@ -57,13 +57,15 @@ const CopyMailTo = ({
   copiedTooltip = "Copied to clipboard!",
   containerStyles = {},
   tooltipStyles = {},
+  anchorStyles = {},
 }: {
   email: string;
   children?: React.ReactNode;
   defaultTooltip?: string;
   copiedTooltip?: string;
   containerStyles?: React.CSSProperties;
   tooltipStyles?: React.CSSProperties;
+  anchorStyles?: React.CSSProperties;
 }): JSX.Element => {
   const [showCopied, setShowCopied] = React.useState(false);
   const [showTooltip, setShowTooltip] = React.useState(false);
@@ -93,7 +95,7 @@ const CopyMailTo = ({
 
   const allContainerStyles = {
     ...containerBaseStyles,
-    ...containerStyles
+    ...containerStyles,
   };
 
   const allTooltipStyles = {
@@ -103,22 +105,23 @@ const CopyMailTo = ({
   };
 
   return (
-    <a
-      title={defaultTooltip}
-      href={`mailto:${email}`}
-      style={allContainerStyles}
-      onClick={copyEmail}
-      onMouseOver={displayTooltip}
-      onMouseOut={hideTooltip}
-      onFocus={displayTooltip}
-      onBlur={hideTooltip}
-    >
-      {children || email}
-
+    <span style={allContainerStyles}>
+      <a
+        aria-label={defaultTooltip}
+        onClick={copyEmail}
+        onMouseOver={displayTooltip}
+        onMouseOut={hideTooltip}
+        onFocus={displayTooltip}
+        onBlur={hideTooltip}
+        href={`mailto:${email}`}
+        style={anchorStyles}
+      >
+        {children || email}
+      </a>
       <span style={allTooltipStyles}>
         {showCopied ? copiedTooltip : defaultTooltip}
       </span>
-    </a>
+    </span>
   );
 };