diff --git a/components/tooltip/Tooltip.js b/components/tooltip/Tooltip.js
index 64d3ff36..5f0102ba 100644
--- a/components/tooltip/Tooltip.js
+++ b/components/tooltip/Tooltip.js
@@ -19,6 +19,7 @@ const defaults = {
className: '',
delay: 0,
hideOnClick: true,
+ showOnClick: false,
position: POSITION.VERTICAL,
theme: {}
};
@@ -28,6 +29,7 @@ const tooltipFactory = (options = {}) => {
className: defaultClassName,
delay: defaultDelay,
hideOnClick: defaultHideOnClick,
+ showOnClick: defaultShowOnClick,
position: defaultPosition,
theme: defaultTheme
} = {...defaults, ...options};
@@ -51,14 +53,16 @@ const tooltipFactory = (options = {}) => {
]),
tooltipDelay: PropTypes.number,
tooltipHideOnClick: PropTypes.bool,
- tooltipPosition: PropTypes.oneOf(Object.keys(POSITION).map(key => POSITION[key]))
+ tooltipPosition: PropTypes.oneOf(Object.keys(POSITION).map(key => POSITION[key])),
+ tooltipShowOnClick: PropTypes.bool
};
static defaultProps = {
className: defaultClassName,
tooltipDelay: defaultDelay,
tooltipHideOnClick: defaultHideOnClick,
- tooltipPosition: defaultPosition
+ tooltipPosition: defaultPosition,
+ tooltipShowOnClick: defaultShowOnClick
};
state = {
@@ -158,7 +162,14 @@ const tooltipFactory = (options = {}) => {
};
handleClick = (event) => {
- if (this.props.tooltipHideOnClick) this.deactivate();
+ if (this.props.tooltipHideOnClick && this.state.active) {
+ this.deactivate();
+ }
+
+ if (this.props.tooltipShowOnClick && !this.state.active) {
+ this.activate(this.calculatePosition(event.target));
+ }
+
if (this.props.onClick) this.props.onClick(event);
};
@@ -173,6 +184,7 @@ const tooltipFactory = (options = {}) => {
tooltipDelay, //eslint-disable-line no-unused-vars
tooltipHideOnClick, //eslint-disable-line no-unused-vars
tooltipPosition, //eslint-disable-line no-unused-vars
+ tooltipShowOnClick, //eslint-disable-line no-unused-vars
...other
} = this.props;
diff --git a/components/tooltip/readme.md b/components/tooltip/readme.md
index 54f7fefc..98c4e3a3 100644
--- a/components/tooltip/readme.md
+++ b/components/tooltip/readme.md
@@ -38,6 +38,7 @@ In any component you decorate with the Tooltip you'd get some additional props:
| `tooltipDelay` | `Number` | | Amount of time in miliseconds spent before the tooltip is visible.|
| `tooltipHideOnClick` | `Boolean` | `true` | If true, the Tooltip hides after a click in the host component.|
| `tooltipPosition` | `String` | `vertical` | Determines the position of the tooltip. It can be automatic with `vertical` and `horizontal` values or forced with `bottom`, `top`, `left` or `right`.|
+| `tooltipShowOnClick` | `Boolean` | `false` | Determines the tooltip should be toggled when clicked. This is useful for mobile where there is no mouse enter.|
## Theming
diff --git a/spec/components/tooltip.js b/spec/components/tooltip.js
index 8e87a296..54ef43b4 100644
--- a/spec/components/tooltip.js
+++ b/spec/components/tooltip.js
@@ -24,6 +24,14 @@ const TooltipTest = () => (
/>
Lorem ipsum dolor sit amet,
+ Click this next word to show and hide on click:
+ {' '}
+