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}
Status: ${status}`; + const tip = (Description: {description}
Status: {status}
); // Inner span to hold styling so we don't effect the "before:content" return ( - - {error && } - {label || id} - - + + + {error && } + {label || id} + + ); }; 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 ( + +
{this.props.tip}
+ {this.props.children} +
+ ); + } +} 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; + } } } diff --git a/client/package.json b/client/package.json index 27690be6a..aee1066ce 100644 --- a/client/package.json +++ b/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", diff --git a/client/yarn.lock b/client/yarn.lock index 874cd1448..4f8e833d6 100644 --- a/client/yarn.lock +++ b/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"