Merge pull request #2871 from weaveworks/2869-get-rid-of-react-tooltip

Get rid of react-tooltip dependency

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}<br />Status: ${status}`;
+  const tip = (<span>Description: {description}<br />Status: {status}</span>);
 
   // Inner span to hold styling so we don't effect the "before:content"
   return (
     <span className="plugins-plugin" key={id}>
-      <span className={className} data-tip={title} data-multiline>
-        {error && <span className="plugins-plugin-icon fa fa-exclamation-circle" />}
-        {label || id}
-      </span>
-      <ReactTooltip class="tooltip" effect="solid" offset={{right: 7}} />
+      <Tooltip tip={tip}>
+        <span className={className}>
+          {error && <span className="plugins-plugin-icon fa fa-exclamation-circle" />}
+          {label || id}
+        </span>
+      </Tooltip>
     </span>
   );
 };

client/app/scripts/components/tooltip.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+
+export default class Tooltip extends React.Component {
+  render() {
+    return (
+      <span className="tooltip-wrapper">
+        <div className="tooltip">{this.props.tip}</div>
+        {this.props.children}
+      </span>
+    );
+  }
+}

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;
+    }
   }
 }
 

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",

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"