diff --git a/client/app/scripts/components/plugins.js b/client/app/scripts/components/plugins.js index 284c176c29..101f27e0f4 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}<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> ); } diff --git a/client/app/styles/main.less b/client/app/styles/main.less index f1612b1c52..56df62bd76 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 fa9c375c0b..b335502a2b 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",