diff --git a/__tests__/components/Tooltip.test.jsx b/__tests__/components/Tooltip.test.jsx
index 0189080bf7..7f09c5eaec 100644
--- a/__tests__/components/Tooltip.test.jsx
+++ b/__tests__/components/Tooltip.test.jsx
@@ -3,10 +3,53 @@ import { mount } from 'enzyme';
import Tooltip from '../../src/components/Tooltip';
describe('', () => {
- let wrapper;
+ let elem;
+ let content;
+ let mouseOverHandler;
+ let mouseOutHandler;
test('initially renders without crashing', () => {
- wrapper = mount();
- expect(wrapper.length).toBe(1);
+ elem = mount();
+ expect(elem.length).toBe(1);
+ });
+
+ test('shows/hides with mouse over and leave', () => {
+ elem = mount();
+ mouseOverHandler = elem.find('.mouseOverHandler');
+ mouseOutHandler = elem.find('.mouseOutHandler');
+ expect(elem.state().isDisplayed).toBe(false);
+ elem.update();
+ content = elem.find('.pf-c-tooltip__content');
+ expect(content.length).toBe(0);
+ mouseOverHandler.props().onMouseOver();
+ expect(elem.state().isDisplayed).toBe(true);
+ elem.update();
+ content = elem.find('.pf-c-tooltip__content');
+ expect(content.length).toBe(1);
+ mouseOutHandler.props().onMouseLeave();
+ expect(elem.state().isDisplayed).toBe(false);
+ elem.update();
+ content = elem.find('.pf-c-tooltip__content');
+ expect(content.length).toBe(0);
+ });
+
+ test('shows/hides with focus and blur', () => {
+ elem = mount();
+ mouseOverHandler = elem.find('.mouseOverHandler');
+ mouseOutHandler = elem.find('.mouseOutHandler');
+ expect(elem.state().isDisplayed).toBe(false);
+ elem.update();
+ content = elem.find('.pf-c-tooltip__content');
+ expect(content.length).toBe(0);
+ mouseOverHandler.props().onFocus();
+ expect(elem.state().isDisplayed).toBe(true);
+ elem.update();
+ content = elem.find('.pf-c-tooltip__content');
+ expect(content.length).toBe(1);
+ mouseOutHandler.props().onBlur();
+ expect(elem.state().isDisplayed).toBe(false);
+ elem.update();
+ content = elem.find('.pf-c-tooltip__content');
+ expect(content.length).toBe(0);
});
});
diff --git a/src/components/Tooltip/Tooltip.jsx b/src/components/Tooltip/Tooltip.jsx
index cc3c1c71c9..107ee0674e 100644
--- a/src/components/Tooltip/Tooltip.jsx
+++ b/src/components/Tooltip/Tooltip.jsx
@@ -45,7 +45,9 @@ class Tooltip extends React.Component {
return (
this.setState({ isDisplayed: false })}
+ onBlur={() => this.setState({ isDisplayed: false })}
>
{ isDisplayed
&& (
@@ -61,6 +63,7 @@ class Tooltip extends React.Component {
)
}
this.setState({ isDisplayed: true })}
onFocus={() => this.setState({ isDisplayed: true })}
>