diff --git a/src/components/tooltip/Tooltip.js b/src/components/tooltip/Tooltip.js
deleted file mode 100644
index f77577751..000000000
--- a/src/components/tooltip/Tooltip.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-export default class Tool extends React.Component {
-  static propTypes = {
-    children: PropTypes.element.isRequired,
-    text: PropTypes.string.isRequired
-  }
-
-  state = {
-    show: false,
-    overflow: true
-  }
-
-  onResize = () => {
-    if (this.state.overflow !== (this.el.offsetWidth < this.el.scrollWidth)) {
-      this.setState((s) => ({ overflow: !s.overflow }))
-    }
-  }
-
-  componentDidMount () {
-    window.addEventListener('resize', this.onResize)
-    this.onResize()
-  }
-
-  componentWillUnmount () {
-    window.removeEventListener('resize', this.onResize)
-  }
-
-  onMouseOver = () => {
-    this.setState({ show: true })
-  }
-
-  onMouseLeave = () => {
-    this.setState({ show: false })
-  }
-
-  render () {
-    const { children, text, ...props } = this.props
-    const { show, overflow } = this.state
-
-    return (
-      <div className='relative' {...props}>
-        <div onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseOver} onBlur={this.onMouseLeave} className='overflow-hidden'>
-          {React.Children.map(children, c => React.cloneElement(c, { ref: (n) => { this.el = n } }))}
-        </div>
-
-        <div style={{
-          bottom: '-10px',
-          left: '50%',
-          transform: 'translate(-50%, 100%)',
-          wordWrap: 'break-word',
-          width: '100%'
-        }} className={`white z-max bg-navy-muted br2 pa1 f6 absolute ${(show && overflow) ? 'db' : 'dn'}`}>
-          <span style={{
-            width: '17px',
-            height: '17px',
-            transform: 'translate(-50%, -50%) rotate(45deg)',
-            borderRadius: '2px 0px 0px',
-            left: '50%',
-            zIndex: -1
-          }} className='db bg-navy-muted absolute' />
-          {text}
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/src/components/tooltip/Tooltip.tsx b/src/components/tooltip/Tooltip.tsx
new file mode 100644
index 000000000..c9d0eda2b
--- /dev/null
+++ b/src/components/tooltip/Tooltip.tsx
@@ -0,0 +1,86 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react'
+
+interface TooltipProps {
+  children: React.ReactElement
+  text: string
+}
+
+const Tooltip: React.FC<TooltipProps> = ({ children, text, ...props }) => {
+  const [show, setShow] = useState(false)
+  const [overflow, setOverflow] = useState(true)
+  const el = useRef<HTMLElement | null>(null)
+
+  const onResize = useCallback(() => {
+    if (
+      el.current &&
+      overflow !== (el.current.offsetWidth < el.current.scrollWidth)
+    ) {
+      setOverflow(!overflow)
+    }
+  }, [overflow])
+
+  useEffect(() => {
+    window.addEventListener('resize', onResize)
+    onResize()
+
+    return () => {
+      window.removeEventListener('resize', onResize)
+    }
+  }, [onResize])
+
+  const onMouseOver = () => {
+    setShow(true)
+  }
+
+  const onMouseLeave = () => {
+    setShow(false)
+  }
+
+  return (
+    <div className='relative' {...props}>
+      <div
+        onMouseOver={onMouseOver}
+        onMouseLeave={onMouseLeave}
+        onFocus={onMouseOver}
+        onBlur={onMouseLeave}
+        className='overflow-hidden'
+      >
+        {React.Children.map(children, (c) =>
+          React.cloneElement(c, {
+            ref: (n: HTMLElement) => {
+              el.current = n
+            }
+          })
+        )}
+      </div>
+
+      <div
+        style={{
+          bottom: '-10px',
+          left: '50%',
+          transform: 'translate(-50%, 100%)',
+          wordWrap: 'break-word',
+          width: '100%'
+        }}
+        className={`white z-max bg-navy-muted br2 pa1 f6 absolute ${
+          show && overflow ? 'db' : 'dn'
+        }`}
+      >
+        <span
+          style={{
+            width: '17px',
+            height: '17px',
+            transform: 'translate(-50%, -50%) rotate(45deg)',
+            borderRadius: '2px 0px 0px',
+            left: '50%',
+            zIndex: -1
+          }}
+          className='db bg-navy-muted absolute'
+        />
+        {text}
+      </div>
+    </div>
+  )
+}
+
+export default Tooltip
diff --git a/src/files/file/File.js b/src/files/file/File.js
index 2c37bab15..3e1617212 100644
--- a/src/files/file/File.js
+++ b/src/files/file/File.js
@@ -8,7 +8,7 @@ import { normalizeFiles, humanSize } from '../../lib/files.js'
 import { useDrag, useDrop } from 'react-dnd'
 // Components
 import GlyphDots from '../../icons/GlyphDots.js'
-import Tooltip from '../../components/tooltip/Tooltip.js'
+import Tooltip from '../../components/tooltip/Tooltip.tsx'
 import Checkbox from '../../components/checkbox/Checkbox.js'
 import FileIcon from '../file-icon/FileIcon.js'
 import { CID } from 'multiformats/cid'