From e1b2065b2ecbb0f6adf254d39e45028903119d02 Mon Sep 17 00:00:00 2001
From: Roman Hotsiy <gotsijroman@gmail.com>
Date: Fri, 9 Feb 2018 13:31:54 +0200
Subject: [PATCH] =?UTF-8?q?refactor:=20switch=20to=20simple=20Tooltip=20(?=
 =?UTF-8?q?=F0=9F=97=9C=20yet=20another=2083kB=20to=20bundle=20size)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                              |  1 -
 src/common-elements/CopyButtonWrapper.tsx | 13 +---
 src/common-elements/Tooltip.tsx           | 72 +++++++++++++++++++++++
 tslint.json                               |  2 +-
 yarn.lock                                 | 10 ----
 5 files changed, 74 insertions(+), 24 deletions(-)
 create mode 100644 src/common-elements/Tooltip.tsx

diff --git a/package.json b/package.json
index 72c7090283..9a809b2095 100644
--- a/package.json
+++ b/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",
diff --git a/src/common-elements/CopyButtonWrapper.tsx b/src/common-elements/CopyButtonWrapper.tsx
index 26ded018f4..f3cd904d5b 100644
--- a/src/common-elements/CopyButtonWrapper.tsx
+++ b/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>
diff --git a/src/common-elements/Tooltip.tsx b/src/common-elements/Tooltip.tsx
new file mode 100644
index 0000000000..3130fc6493
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/tslint.json b/tslint.json
index e7e8fcf124..415245bb9f 100644
--- a/tslint.json
+++ b/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"],
diff --git a/yarn.lock b/yarn.lock
index 4dfa4e318b..2483c24105 100644
--- a/yarn.lock
+++ b/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"