diff --git a/client/app/scripts/components/plugins.js b/client/app/scripts/components/plugins.js
index 61cdea746..e673bc7d2 100644
--- a/client/app/scripts/components/plugins.js
+++ b/client/app/scripts/components/plugins.js
@@ -1,22 +1,24 @@
import React from 'react';
import { connect } from 'react-redux';
import classNames from 'classnames';
-import ReactTooltip from 'react-tooltip';
+
+import Tooltip from './tooltip';
const Plugin = ({id, label, description, status}) => {
const error = status !== 'ok';
const className = classNames({ error });
- const title = `Plugin description: ${description}
Status: ${status}`;
+ const tip = (Description: {description}
Status: {status});
// Inner span to hold styling so we don't effect the "before:content"
return (
-
- {error && }
- {label || id}
-
-
+
+
+ {error && }
+ {label || id}
+
+
);
};
diff --git a/client/app/scripts/components/tooltip.js b/client/app/scripts/components/tooltip.js
new file mode 100644
index 000000000..2150ef524
--- /dev/null
+++ b/client/app/scripts/components/tooltip.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+
+export default class Tooltip extends React.Component {
+ render() {
+ return (
+
+ {this.props.tip}
+ {this.props.children}
+
+ );
+ }
+}
diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index 4ac1d0741..0834a3b81 100644
--- a/client/app/styles/_base.scss
+++ b/client/app/styles/_base.scss
@@ -264,9 +264,47 @@ a {
margin-left: 0.5em;
}
- .tooltip {
- // above everything
- z-index: 20000;
+ .tooltip-wrapper {
+ position: relative;
+
+ .tooltip {
+ display: none;
+ background-color: black;
+ position: absolute;
+ color: white;
+ text-align: center;
+ line-height: 22px;
+ border-radius: 3px;
+ font-size: 12px;
+ margin-bottom: 25px;
+ margin-left: -4px;
+ opacity: 0.75;
+ padding: 10px 20px;
+ bottom: 0;
+ left: 10px;
+ transform: translateX(-50%);
+ white-space: nowrap;
+ // above everything
+ z-index: 20000;
+
+ // Adjusted from http://www.cssarrowplease.com/
+ &:after {
+ border: 6px solid transparent;
+ content: ' ';
+ top: 100%;
+ left: 50%;
+ height: 0;
+ width: 0;
+ position: absolute;
+ border-color: transparent;
+ border-top-color: black;
+ margin-left: -6px;
+ }
+ }
+
+ &:hover .tooltip {
+ display: block;
+ }
}
}
diff --git a/client/package.json b/client/package.json
index 27690be6a..aee1066ce 100644
--- a/client/package.json
+++ b/client/package.json
@@ -36,7 +36,6 @@
"react-dom": "15.5.4",
"react-motion": "0.5.0",
"react-redux": "5.0.4",
- "react-tooltip": "3.3.0",
"redux": "3.6.0",
"redux-immutable": "4.0.0",
"redux-logger": "3.0.1",
diff --git a/client/yarn.lock b/client/yarn.lock
index 874cd1448..4f8e833d6 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1232,7 +1232,7 @@ clap@^1.0.9:
dependencies:
chalk "^1.1.3"
-classnames@2.2.5, classnames@^2.2.0, classnames@^2.2.5:
+classnames@2.2.5, classnames@^2.2.5:
version "2.2.5"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
@@ -1678,17 +1678,13 @@ d3-dispatch@1:
version "1.0.3"
resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.3.tgz#46e1491eaa9b58c358fce5be4e8bed626e7871f8"
-d3-drag@1, d3-drag@1.0.4:
+d3-drag@1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-1.0.4.tgz#a9c1609f11dd5530ae275ebd64377ec54efb9d8f"
dependencies:
d3-dispatch "1"
d3-selection "1"
-d3-ease@1:
- version "1.0.3"
- resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.3.tgz#68bfbc349338a380c44d8acc4fbc3304aa2d8c0e"
-
d3-format@1, d3-format@1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.2.0.tgz#6b480baa886885d4651dc248a8f4ac9da16db07a"
@@ -1735,31 +1731,6 @@ d3-time@1:
version "1.0.6"
resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.0.6.tgz#a55b13d7d15d3a160ae91708232e0835f1d5e945"
-d3-timer@1:
- version "1.0.5"
- resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.5.tgz#b266d476c71b0d269e7ac5f352b410a3b6fe6ef0"
-
-d3-transition@1, d3-transition@1.0.4:
- version "1.0.4"
- resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-1.0.4.tgz#e1a9ebae3869a9d9c2874ab00841fa8313ae5de5"
- dependencies:
- d3-color "1"
- d3-dispatch "1"
- d3-ease "1"
- d3-interpolate "1"
- d3-selection "1"
- d3-timer "1"
-
-d3-zoom@1.1.4:
- version "1.1.4"
- resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-1.1.4.tgz#903fd2c988b5cace43f00dcf7aae09470c9cc12d"
- dependencies:
- d3-dispatch "1"
- d3-drag "1"
- d3-interpolate "1"
- d3-selection "1"
- d3-transition "1"
-
d@1:
version "1.0.0"
resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
@@ -5156,13 +5127,6 @@ react-redux@5.0.4:
loose-envify "^1.1.0"
prop-types "^15.0.0"
-react-tooltip@3.3.0:
- version "3.3.0"
- resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-3.3.0.tgz#51c08ae0221075e2c43d83cd47fc78466612df7d"
- dependencies:
- classnames "^2.2.0"
- prop-types "^15.5.8"
-
react@15.5.4:
version "15.5.4"
resolved "https://registry.yarnpkg.com/react/-/react-15.5.4.tgz#fa83eb01506ab237cdc1c8c3b1cea8de012bf047"