diff --git a/frontend/app/components/ui/ItemMenu/ItemMenu.js b/frontend/app/components/ui/ItemMenu/ItemMenu.js
index 18dc414d4..442bcac50 100644
--- a/frontend/app/components/ui/ItemMenu/ItemMenu.js
+++ b/frontend/app/components/ui/ItemMenu/ItemMenu.js
@@ -1,90 +1,81 @@
 import React from 'react';
-import { Icon, Popup } from 'UI';
+import { Icon } from 'UI';
 import styles from './itemMenu.module.css';
 import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
 import cn from 'classnames';
 
 export default class ItemMenu extends React.PureComponent {
-  state = {
-    displayed: false,
-  };
+    state = {
+        displayed: false,
+    };
 
-  handleEsc = (e) => e.key === 'Escape' && this.closeMenu()
+    handleEsc = (e) => e.key === 'Escape' && this.closeMenu();
 
-  componentDidMount() {
-    document.addEventListener("keydown", this.handleEsc, false);
-  }
-  componentWillUnmount() {
-    document.removeEventListener("keydown", this.handleEsc, false);
-  }
+    componentDidMount() {
+        document.addEventListener('keydown', this.handleEsc, false);
+    }
+    componentWillUnmount() {
+        document.removeEventListener('keydown', this.handleEsc, false);
+    }
 
-  onClick = callback => (e) => {
-    e.stopPropagation();
-    callback(e);
-  }
+    onClick = (callback) => (e) => {
+        e.stopPropagation();
+        callback(e);
+    };
 
-  toggleMenu = (e) => {
-    this.setState({ displayed: !this.state.displayed });
-  }
+    toggleMenu = (e) => {
+        this.setState({ displayed: !this.state.displayed });
+    };
 
-  closeMenu = () => this.setState({ displayed: false })
+    closeMenu = () => this.setState({ displayed: false });
 
-  render() {
-    const { items, label = "", bold } = this.props;
-    const { displayed } = this.state;
-    const parentStyles = label ? 'rounded px-2 py-2 hover:bg-gray-light' : '';
+    render() {
+        const { items, label = '', bold } = this.props;
+        const { displayed } = this.state;
+        const parentStyles = label ? 'rounded px-2 py-2 hover:bg-gray-light' : '';
 
-    return (
-      <div className={ styles.wrapper }>
-        <OutsideClickDetectingDiv
-          onClickOutside={ this.closeMenu }
-        >
-          <div
-            onClick={ this.toggleMenu }
-            className={cn("flex items-center cursor-pointer select-none", parentStyles, { 'bg-gray-light' : displayed && label })}
-          >
-            {label && <span className={cn('mr-1', bold ? 'font-medium color-gray-darkest' : 'color-gray-medium')}>{label}</span>}
-            <div
-              ref={ (ref) => { this.menuBtnRef = ref; } }
-              className={cn("rounded-full flex items-center justify-center", { 'bg-gray-light' : displayed, "w-10 h-10" : !label })}
-              role="button"
-            >
-              <Icon name="ellipsis-v" size="16" />
-            </div>
-          </div>
-        </OutsideClickDetectingDiv>
-        <div
-          className={ cn(styles.menu, { [styles.menuDim]: !bold }) }
-          data-displayed={ displayed }
-        >
-          { items.filter(({ hidden }) => !hidden).map(({ onClick, text, icon, disabled = false, disabledMessage = '' }) => (
-            <div
-              key={ text }
-              onClick={ !disabled ? this.onClick(onClick) : () => {} }
-              className={disabled ? 'cursor-not-allowed' : ''}
-              role="menuitem"
-              tabIndex="-1"
-            >
-              <Popup
-                  delay={500}
-                  arrow
-                  title={ disabledMessage }
-                  position="left"
-                  disabled={ !disabled }
-              >
-                  <div className={cn(styles.menuItem, 'text-neutral-700', {'disabled' : disabled })}>
-                    { icon && (
-                        <div className={ styles.iconWrapper }>
-                          <Icon name={ icon } size="13" color="gray-dark" />
+        return (
+            <div className={styles.wrapper}>
+                <OutsideClickDetectingDiv onClickOutside={this.closeMenu}>
+                    <div
+                        onClick={this.toggleMenu}
+                        className={cn('flex items-center cursor-pointer select-none', parentStyles, { 'bg-gray-light': displayed && label })}
+                    >
+                        {label && <span className={cn('mr-1', bold ? 'font-medium color-gray-darkest' : 'color-gray-medium')}>{label}</span>}
+                        <div
+                            ref={(ref) => {
+                                this.menuBtnRef = ref;
+                            }}
+                            className={cn('rounded-full flex items-center justify-center', { 'bg-gray-light': displayed, 'w-10 h-10': !label })}
+                            role="button"
+                        >
+                            <Icon name="ellipsis-v" size="16" />
                         </div>
-                      )}
-                      <div>{ text }</div>
-                  </div>
-              </Popup>
+                    </div>
+                </OutsideClickDetectingDiv>
+                <div className={cn(styles.menu, { [styles.menuDim]: !bold })} data-displayed={displayed}>
+                    {items
+                        .filter(({ hidden }) => !hidden)
+                        .map(({ onClick, text, icon, disabled = false, disabledMessage = '' }) => (
+                            <div
+                                key={text}
+                                onClick={!disabled ? this.onClick(onClick) : () => {}}
+                                className={disabled ? 'cursor-not-allowed' : ''}
+                                role="menuitem"
+                                tabIndex="-1"
+                            >
+                                <div className={cn(styles.menuItem, 'text-neutral-700', { disabled: disabled })}>
+                                    {icon && (
+                                        <div className={styles.iconWrapper}>
+                                            <Icon name={icon} size="13" color="gray-dark" />
+                                        </div>
+                                    )}
+                                    <div>{text}</div>
+                                </div>
+                            </div>
+                        ))}
+                </div>
             </div>
-          ))}
-        </div>
-      </div>
-    );
-  }
+        );
+    }
 }
diff --git a/frontend/app/components/ui/Popup/Popup.tsx b/frontend/app/components/ui/Popup/Popup.tsx
index d44976b28..fba21fd4e 100644
--- a/frontend/app/components/ui/Popup/Popup.tsx
+++ b/frontend/app/components/ui/Popup/Popup.tsx
@@ -1,44 +1,57 @@
 import React from 'react';
-import { Tooltip } from 'react-tippy';
+import { Tooltip, Theme, Trigger, Position } from 'react-tippy';
 
 interface Props {
-  content?: any;
-  title?: any;
-  trigger?: any
-  position?: any
-  className?: string
-  delay?: number
-  disabled?: boolean
-  arrow?: boolean
-  open?: boolean
-  style?: any
-  [x:string]: any;
+    content?: any;
+    title?: any;
+    trigger?: Trigger;
+    position?: Position;
+    className?: string;
+    delay?: number;
+    hideDelay?: number;
+    duration?: number;
+    disabled?: boolean;
+    arrow?: boolean;
+    open?: boolean;
+    style?: any;
+    theme?: Theme;
+    interactive?: boolean;
+    children?: any;
+    // [x:string]: any;
 }
 export default ({
-  position = 'top',
-  title='',
-  className='',
-  trigger = 'mouseenter',
-  delay = 1000,
-  disabled = false,
-  arrow = true,
-  theme = 'dark',
-  style = {},
-  ...props
-}: Props) => (
-  <Tooltip
-    // {...props}
-    className={className}
-    trigger={trigger}
-    html={props.content || props.title}
-    disabled={disabled}
-    arrow={arrow}
-    delay={delay}
-    hideOnClick={true}
-    hideOnScroll={true}
-    theme={theme}
-    style={style}
-  >
-    { props.children }
-  </Tooltip>
+    position = 'top',
+    title = '',
+    className = '',
+    trigger = 'mouseenter',
+    delay = 1000,
+    hideDelay = 0,
+    content = '',
+    duration = 0,
+    disabled = false,
+    arrow = true,
+    theme = 'dark',
+    style = {},
+    interactive = false,
+    children,
+}: // ...props
+Props) => (
+    <Tooltip
+        position={position}
+        className={className}
+        trigger={trigger}
+        html={content || title}
+        disabled={disabled}
+        arrow={arrow}
+        delay={delay}
+        hideOnClick={true}
+        hideOnScroll={true}
+        theme={theme}
+        style={style}
+        interactive={interactive}
+        duration={0}
+        hideDelay={hideDelay}
+    >
+        {children}
+    </Tooltip>
 );