Refactor CustomIconButtons

app/src/components/helper/Copy.tsx

@@ -48,13 +48,11 @@ class Copy extends React.Component<Props, State> {
 
     return (
       <span>
-        <Tooltip placement="top" title="Copy to clipboard">
-          <span style={{ fontSize: '16px' }}>
-            <CustomIconButton onClick={this.handleClick} >
-              {icon}
-            </CustomIconButton>
-          </span>
-        </Tooltip>
+        <span style={{ fontSize: '16px' }}>
+          <CustomIconButton onClick={this.handleClick} tooltip="Copy to clipboard">
+            {icon}
+          </CustomIconButton>
+        </span>
         <Snackbar
           anchorOrigin={{
             vertical: 'bottom',

app/src/components/helper/CustomIconButton.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react'
-import { IconButton } from '@material-ui/core'
+import { IconButton, Tooltip } from '@material-ui/core'
 import { Theme, withStyles } from '@material-ui/core/styles'
 
 interface Props {
-  onClick: any,
-  classes: any,
+  onClick: any
+  tooltip: string
+  classes: any
 }
 
 const styles = (theme: Theme) => ({
@@ -26,7 +27,11 @@ class CustomIconButton extends React.Component<Props, {}> {
 
   public render() {
     return (
-      <IconButton className={this.props.classes.button} onClick={this.onClick}>{this.props.children}</IconButton>
+      <IconButton className={this.props.classes.button} onClick={this.onClick}>
+        <Tooltip title={this.props.tooltip}>
+          <span>{this.props.children}</span>
+        </Tooltip>
+      </IconButton>
     )
   }
 }