diff --git a/README.md b/README.md
index 5354b49b5f..6b1e73cb26 100644
--- a/README.md
+++ b/README.md
@@ -25,6 +25,7 @@ import RadioButton from 'ffe-radio-button-react';
name={ string }
inline={ boolean }
checked={ boolean }
+ tooltip={ string }
onChange={ function }
/>
```
@@ -37,6 +38,14 @@ If you want to have a more complex label, you can use `children`:
```
+You can also add a helping text by using the tooltip property:
+```javascript
+
+```
+When the `tooltip` is truthy the `inline` capabilities will be ignored as the tooltip icon will be added to the end of the line.
+
### ``
However, the `RadioButton` becomes a bit more useful when combined with the
diff --git a/package.json b/package.json
index a64bfee110..c79c5b77e8 100644
--- a/package.json
+++ b/package.json
@@ -30,9 +30,7 @@
"mocha": "^2.4.5",
"mocha-tap13": "0.0.3",
"nsp": "^2.2.0",
- "react": "^15.0.1",
"react-addons-test-utils": "^15.0.1",
- "react-dom": "^15.0.1",
"sinon": "^1.17.3"
},
"publishConfig": {
@@ -48,10 +46,13 @@
"es2015"
],
"plugins": [
- "transform-object-rest-spread"
+ "transform-object-rest-spread"
]
},
"dependencies": {
- "nfe-hash": "^1.1.0"
+ "classnames": "^2.2.5",
+ "nfe-hash": "^1.1.0",
+ "react": "^15.0.1",
+ "react-dom": "^15.0.1"
}
}
diff --git a/src/radio-base.jsx b/src/radio-base.jsx
index 0ef3074a19..b631b7f5a2 100644
--- a/src/radio-base.jsx
+++ b/src/radio-base.jsx
@@ -1,5 +1,6 @@
import React, { Component, PropTypes } from 'react';
import hash from 'nfe-hash';
+import classnames from 'classnames';
const inlineStyles = {
display: 'inline-block'
@@ -34,55 +35,57 @@ class RadioBase extends Component {
...rest
} = this.props;
- let styles = style;
- if (inline) {
- styles = Object.assign({}, inlineStyles, style);
- }
- let labelClassNames = labelClasses;
- if (tooltip) {
- labelClassNames = `${labelClasses} ffe-radio-button--with-tooltip`;
- }
-
const domId = id || createId({ name, value, label, inline });
- const radioButton = (
-
-
-
- { tooltip &&
-
-
);
-
- if (tooltip) {
- return (
-
- { radioButton }
- { !this.state.closed &&
-
{tooltip}
- }
-
- );
- }
- return radioButton;
-
}
}