diff --git a/client/app/scripts/components/plugins.js b/client/app/scripts/components/plugins.js
index 284c176c2..101f27e0f 100644
--- a/client/app/scripts/components/plugins.js
+++ b/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}
Status: ${status}`;
// Inner span to hold styling so we don't effect the "before:content"
return (
-
+
{error && }
{label || id}
+
);
}
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index f1612b1c5..56df62bd7 100644
--- a/client/app/styles/main.less
+++ b/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: ', ';
}
diff --git a/client/package.json b/client/package.json
index fa9c375c0..b335502a2 100644
--- a/client/package.json
+++ b/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",