refactor: switch to simple Tooltip (🗜 yet another 83kB to bundle size)

package.json

@@ -99,7 +99,6 @@
     "react-dropdown": "^1.3.0",
     "react-hot-loader": "3.1.3",
     "react-tabs": "^2.0.0",
-    "react-tippy": "^1.2.2",
     "slugify": "^1.2.1",
     "stickyfill": "^1.1.1",
     "styled-components": "^3.1.0",

src/common-elements/CopyButtonWrapper.tsx

@@ -1,10 +1,5 @@
 import * as React from 'react';
-import { Tooltip } from 'react-tippy';
+import { Tooltip } from '../common-elements/Tooltip';
-import { injectGlobal } from '../styled-components';
-
-import styles from 'react-tippy/dist/tippy.css';
-
-injectGlobal`${styles}`;
 
 import { ClipboardService } from '../services/ClipboardService';
 
@@ -45,14 +40,8 @@ export class CopyButtonWrapper extends React.PureComponent<
     return (
       <span onClick={this.copy}>
         <Tooltip
-          // options
           title={ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser'}
-          position="top"
           open={this.state.tooltipShown}
-          arrow="true"
-          duration={150}
-          trigger="manual"
-          theme="light"
         >
           Copy
         </Tooltip>

src/common-elements/Tooltip.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+
+import styled from '../styled-components';
+
+const Wrapper = styled.div`
+  position: relative;
+`;
+
+const Tip = styled.div`
+  position: absolute;
+  min-width: 80px;
+  max-width: 500px;
+  background: #fff;
+  bottom: 100%;
+  left: 50%;
+  margin-bottom: 10px;
+  transform: translateX(-50%);
+
+  border-radius: 4px;
+  padding: 0.3em 0.6em;
+  text-align: center;
+`;
+
+const Content = styled.div`
+  background: #fff;
+  color: #000;
+  display: inline;
+  font-size: 0.85em;
+  white-space: nowrap;
+`;
+
+const Arrow = styled.div`
+  position: absolute;
+  width: 0;
+  height: 0;
+  bottom: -5px;
+  left: 50%;
+  margin-left: -5px;
+  border-left: solid transparent 5px;
+  border-right: solid transparent 5px;
+  border-top: solid #fff 5px;
+`;
+
+const Gap = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 20px;
+  bottom: -20px;
+`;
+
+export interface TooltipProps {
+  open: boolean;
+  title: string;
+}
+
+export class Tooltip extends React.Component<TooltipProps> {
+  render() {
+    const { open, title, children } = this.props;
+    return (
+      <Wrapper>
+        {children}
+        {open && (
+          <Tip>
+            <Content>{title}</Content>
+            <Arrow />
+            <Gap />
+          </Tip>
+        )}
+      </Wrapper>
+    );
+  }
+}

tslint.json

@@ -17,7 +17,7 @@
     "quotemark": [true, "single", "avoid-template", "jsx-double"],
     "variable-name": [true, "ban-keywords", "check-format", "allow-leading-underscore", "allow-pascal-case"],
     "arrow-parens": [true, "ban-single-arg-parens"],
-    "no-submodule-imports": [true, "prismjs", "perfect-scrollbar", "react-tippy"],
+    "no-submodule-imports": [true, "prismjs", "perfect-scrollbar"],
     "object-literal-key-quotes": [true, "as-needed"],
     "no-unused-expression": [true, "allow-tagged-template"],
     "semicolon": [true, "always", "ignore-bound-class-methods"],

yarn.lock

@@ -5446,10 +5446,6 @@ pn@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
 
-popper.js@^1.11.1:
-  version "1.12.9"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.12.9.tgz#0dfbc2dff96c451bb332edcfcfaaf566d331d5b3"
-
 portfinder@^1.0.9:
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
@@ -6037,12 +6033,6 @@ react-test-renderer@^16.0.0-0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
-react-tippy@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/react-tippy/-/react-tippy-1.2.2.tgz#061467d34d29e7a5a9421822d125c451d6bb5153"
-  dependencies:
-    popper.js "^1.11.1"
-
 react@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"