diff --git a/package.json b/package.json index 72c70902..9a809b20 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 26ded018..f3cd904d 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 ( Copy diff --git a/src/common-elements/Tooltip.tsx b/src/common-elements/Tooltip.tsx new file mode 100644 index 00000000..3130fc64 --- /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 { + render() { + const { open, title, children } = this.props; + return ( + + {children} + {open && ( + + {title} + + + + )} + + ); + } +} diff --git a/tslint.json b/tslint.json index e7e8fcf1..415245bb 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 4dfa4e31..2483c241 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"