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 { injectGlobal } from '../styled-components';
-
-import styles from 'react-tippy/dist/tippy.css';
-
-injectGlobal`${styles}`;
+import { Tooltip } from '../common-elements/Tooltip';
 
 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"