feat(Tooltip): 8pt Tooltips: Hover behavior

8pt Tooltips: Hover now has the option to be sticky as to offer a wider
hover area for the user.

[Finishes #138673781]

Signed-off-by: Anushka Makhija <amakhija@pivotal.io>

Author: sjolicoeur

library/spec/pivotal-ui-react/tooltip/tooltip_spec.js

@@ -1,9 +1,10 @@
 import '../spec_helper'
-;
+  ;
 import {Tooltip} from 'pui-react-tooltip';
 
 describe('Tooltip Component', () => {
-  const renderComponent = props => ReactTestUtils.renderIntoDocument(<Tooltip {...props}>Some default tooltip</Tooltip>);
+  const renderComponent = props => ReactTestUtils.renderIntoDocument(<Tooltip {...props}>Some default
+    tooltip</Tooltip>);
 
   it('renders', () => {
     const result = renderComponent();
@@ -70,4 +71,36 @@ describe('Tooltip Component', () => {
       expect(content).toHaveClass('tooltip-lg');
     });
   });
-});
+
+  describe('sticky', () => {
+    let renderComponent;
+    beforeEach(() => {
+      renderComponent = props => ReactTestUtils.renderIntoDocument(<Tooltip {...props}>Some default tooltip</Tooltip>);
+    });
+
+    describe('is not set', () => {
+      it('does not render with the hoverable class', () => {
+        const result = renderComponent({isSticky: false});
+        const content = ReactTestUtils.findRenderedDOMComponentWithClass(result, 'tooltip-container');
+        expect(content).not.toHaveClass('tooltip-hoverable');
+      });
+    });
+
+    describe('is set to false', () => {
+      it('does not render with the hoverable class', () => {
+        const result = renderComponent({isSticky: false});
+        const content = ReactTestUtils.findRenderedDOMComponentWithClass(result, 'tooltip-container');
+        expect(content).not.toHaveClass('tooltip-hoverable');
+      });
+    });
+
+    describe('is set to true', () => {
+      it('renders with the hoverable class', () => {
+        const result = renderComponent({isSticky: true});
+        const content = ReactTestUtils.findRenderedDOMComponentWithClass(result, 'tooltip-container');
+        expect(content).toHaveClass('tooltip-hoverable');
+      });
+    });
+  });
+})
+;

library/spec/pivotal-ui-react/tooltip/tooltip_trigger_spec.js

@@ -164,4 +164,12 @@ describe('TooltipTrigger Component', () => {
       expect(tooltip).toHaveClass('tooltip-container-hidden');
     });
   });
+
+  describe('isSticky', () => {
+    it('renders the tooltip with the "isSticky" prop', () => {
+      const result = renderComponent({isSticky: true, tooltip: 'Some tooltip content'});
+      const content = ReactTestUtils.findRenderedDOMComponentWithClass(result, 'tooltip-container');
+      expect(content).toHaveClass('tooltip-hoverable');
+    });
+  });
 });

library/src/pivotal-ui-react/tooltip/tooltip.js

@@ -6,23 +6,26 @@ import classnames from 'classnames';
 export class Tooltip extends React.Component {
   static propTypes = {
     visible: PropTypes.bool,
-    size: PropTypes.oneOf(['auto','sm', 'md', 'lg'])
+    size: PropTypes.oneOf(['auto','sm', 'md', 'lg']),
+    isSticky: PropTypes.bool
   }
 
   static defaultProps = {
     visible: true,
-    size: 'auto'
+    size: 'auto',
+    isSticky: false
   }
 
   constructor(props) {
     super(props);
   }
 
   render() {
-    let {visible, size, className, children, ...others} = this.props;
+    let {isSticky, visible, size, className, children, ...others} = this.props;
 
     const newClasses = classnames('tooltip-container', visible ? 'tooltip-container-visible' : 'tooltip-container-hidden',
                                   size === 'auto' ? null : `tooltip-${size}`,
+                                  isSticky? 'tooltip-hoverable': null,
                                   className);
 
     return (
@@ -42,7 +45,8 @@ export class TooltipTrigger extends React.Component {
     onEntered: PropTypes.func,
     onExited: PropTypes.func,
     theme: PropTypes.oneOf(['dark', 'light']),
-    size: PropTypes.oneOf(['auto', 'sm', 'md', 'lg'])
+    size: PropTypes.oneOf(['auto', 'sm', 'md', 'lg']),
+    isSticky: PropTypes.bool
   }
 
   static defaultProps = {
@@ -52,7 +56,8 @@ export class TooltipTrigger extends React.Component {
     onEntered: () => {},
     onExited: () => {},
     theme: 'dark',
-    size: 'auto'
+    size: 'auto',
+    isSticky: false
   }
 
   constructor(props) {
@@ -80,7 +85,7 @@ export class TooltipTrigger extends React.Component {
   }
 
   render() {
-    const {placement, tooltip, trigger, className, clickHideDelay, onEntered, onExited, theme, size, ...others} = this.props;
+    const {isSticky, placement, tooltip, trigger, className, clickHideDelay, onEntered, onExited, theme, size, ...others} = this.props;
     const {visible} = this.state;
 
     let placementClass;
@@ -108,7 +113,7 @@ export class TooltipTrigger extends React.Component {
     return (
       <div {...newProps}>
         {this.props.children}
-        <Tooltip size={this.props.size} visible={visible}>{tooltip}</Tooltip>
+        <Tooltip {...{isSticky, size: this.props.size, visible}}>{tooltip}</Tooltip>
       </div>
     );
   }

library/src/pivotal-ui/components/tooltips/tooltips.scss

@@ -9,11 +9,6 @@
 
 .tooltip-container {
   //Hover Effect for HTML & CSS ONLY
-
-  &.tooltip-container-visible {
-    visibility: visible;
-  }
-
   visibility: hidden;
   transition: opacity $tooltip-opacity-transition;
   z-index: $tooltip-container-z;
@@ -24,6 +19,22 @@
   margin: 0 0 $tooltip-margin 0; //space for the triangle indicator
   text-align: left;
 
+  &.tooltip-container-visible {
+    visibility: visible;
+  }
+
+  &.tooltip-hoverable {
+    &:after {
+      content:"";
+      position: absolute;
+      width:calc(100% + 16px);
+      height:calc(100% + 16px);
+      top:50%;
+      left:50%;
+      transform: translateX(-50%) translateY(-50%);
+    }
+  }
+
   .tooltip-content {
     white-space: nowrap;
     padding: $tooltip-padding;

styleguide/docs/react/tooltip.js

@@ -25,6 +25,7 @@ Property       | Required | Type                                      | Default
 ---------------|----------|-------------------------------------------|----------|----------------------------------
 visible        | no       | Boolean                                   | true     | Whether the tooltip contents are visible
 size           | no       | oneOf(['auto', 'sm', 'md', 'lg'])         | auto     | Size of the tooltip
+isSticky       | no       | Boolean                                   | false    | Whether the tooltip hover is sticky or not
 
 * See [React proptype definitions here](https://facebook.github.io/react/docs/typechecking-with-proptypes.html)
 
@@ -67,6 +68,7 @@ pin          | no       | Boolean                                    | true    |
 placement    | no       | oneOf('top', 'bottom', 'left', 'right')    | 'right' | Placement of overlay in relation to target
 theme        | no       | oneOf(['light', 'dark'])                   | dark    | Theme of tooltip background and text
 trigger      | no       | oneOf('hover', 'click', 'focus', 'manual') | 'hover' | Action to trigger showing overlay
+isSticky     | no       | Boolean                                    | false   | Whether the tooltip hover is sticky or not
 
 ## Basic usage
 
@@ -143,6 +145,8 @@ onEntered      | no       | Func                                      | () => {}
 onExited       | no       | Func                                      | () => {} | Callback that is called after the tooltip is hidden
 theme          | no       | oneOf(['light', 'dark'])                  | dark     | Theme of tooltip background and text
 size           | no       | oneOf(['auto', 'sm', 'md', 'lg'])         | auto     | Size of the tooltip
+isSticky       | no       | Boolean                                   | false    | Whether the tooltip hover is sticky or not
+
 
 * See [React proptype definitions here](https://facebook.github.io/react/docs/typechecking-with-proptypes.html)
 
@@ -170,6 +174,11 @@ the TooltipTrigger will add a lot of markup to the DOM if you are using it in a
       <button className="btn btn-default">Click me</button>
     </TooltipTrigger>
   </div>
+  <div className="form-group form-inline">
+    <TooltipTrigger tooltip="Some tooltip" isSticky={true} placement="right">
+      <button className="btn btn-default">Hover over me too!</button>
+    </TooltipTrigger>
+  </div>
 </div>
 ```