Merge pull request #2022 from weaveworks/fix-plugins-tooltip

Improve plugin errors tooltip

client/app/scripts/components/plugins.js

@@ -1,20 +1,22 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
+import ReactTooltip from 'react-tooltip';
 
 class Plugins extends React.Component {
   renderPlugin({id, label, description, status}) {
     const error = status !== 'ok';
     const className = classNames({ error });
-    const title = `Status: ${status} | Plugin description: ${description}`;
+    const title = `Plugin description: ${description}<br />Status: ${status}`;
 
     // Inner span to hold styling so we don't effect the "before:content"
     return (
       <span className="plugins-plugin" key={id}>
-        <span className={className} title={title}>
+        <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}} />
       </span>
     );
   }

client/app/styles/main.less

@@ -187,11 +187,12 @@ h2 {
 }
 
 .footer {
+  padding: 5px;
   position: absolute;
-  bottom: 16px;
-  right: 48px;
-  z-index: 20;
+  bottom: 11px;
+  right: 43px;
   color: @text-tertiary-color;
+  background-color: fade(@background-average-color, 90%);
   font-size: 0.7rem;
   display: flex;
 
@@ -243,6 +244,11 @@ h2 {
   &-icon &-label {
     margin-right: 0.5em;
   }
+
+  .tooltip {
+    // above everything
+    z-index: 20000;
+  }
 }
 
 .topologies {
@@ -1161,6 +1167,10 @@ h2 {
     margin-right: 0.25em;
   }
 
+  &-plugin {
+    cursor: default;
+  }
+
   &-plugin + &-plugin:before {
     content: ', ';
   }

client/package.json

@@ -24,6 +24,7 @@
     "react-dom": "~15.4.1",
     "react-motion": "~0.4.5",
     "react-redux": "~4.4.6",
+    "react-tooltip": "~3.2.1",
     "redux": "~3.6.0",
     "redux-immutable": "~3.0.8",
     "redux-logger": "~2.7.4",