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/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, consectetur adipiscing elit.

+

+ Click this next word to show and hide on click: + {' '} + + oh hai + + {' '}. This is useful for mobile! +

);