From c0c04c2e2bd1de29fb01cf4d941c587f10103ff0 Mon Sep 17 00:00:00 2001
From: Filip Barl <filip.barl@gmail.com>
Date: Thu, 28 Sep 2017 13:18:20 +0200
Subject: [PATCH] Replaced react-tooltip with own component.

---
 client/app/scripts/components/plugins.js | 16 +++++----
 client/app/scripts/components/tooltip.js | 13 +++++++
 client/app/styles/_base.scss             | 44 ++++++++++++++++++++++--
 3 files changed, 63 insertions(+), 10 deletions(-)
 create mode 100644 client/app/scripts/components/tooltip.js

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}<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>
   );
 };
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 (
+      <span className="tooltip-wrapper">
+        <div className="tooltip">{this.props.tip}</div>
+        {this.props.children}
+      </span>
+    );
+  }
+}
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;
+    }
   }
 }