Adds ability to specify offsetX and offsetY for a tooltip

README.md

@@ -152,6 +152,18 @@ online example: http://react-component.github.io/tooltip/examples/
           <td></td>
           <td>function returning html node which will act as tooltip contaier</td>
         </tr>
+        <tr>
+          <td>offsetX</td>
+          <td>number</td>
+          <td></td>
+          <td>Offset in the X direction by a number of pixels</td>
+        </tr>
+        <tr>
+          <td>offsetY</td>
+          <td>number</td>
+          <td></td>
+          <td>Offset in the Y direction by a number of pixels</td>
+        </tr>
     </tbody>
 </table>
 

examples/simple.js

@@ -11,7 +11,9 @@ var Test = React.createClass({
       placement: 'right',
       trigger: {
         hover: 1
-      }
+      },
+      offsetX: null,
+      offsetY: null
     };
   },
   onPlacementChange(e) {
@@ -38,6 +40,18 @@ var Test = React.createClass({
     });
   },
 
+  onOffsetXChange(e) {
+    this.setState({
+      offsetX: e.target.value
+    })
+  },
+
+  onOffsetYChange(e) {
+    this.setState({
+      offsetY: e.target.value
+    })
+  },
+
   preventDefault(e) {
     e.preventDefault();
   },
@@ -87,6 +101,15 @@ var Test = React.createClass({
           <input value='click' checked={trigger.click} type='checkbox' onChange={this.onTriggerChange}/>
           click
         </label>
+        <br/>
+        <label>
+          offsetX:
+          <input type='text' onChange={this.onOffsetXChange}/>
+        </label>
+        <label>
+          offsetY:
+          <input type='text' onChange={this.onOffsetYChange}/>
+        </label>
       </div>
       <div style={{margin: 100}}>
         <Tooltip placement={this.state.placement}
@@ -95,6 +118,8 @@ var Test = React.createClass({
                  trigger={Object.keys(this.state.trigger)}
                  onVisibleChange={this.onVisibleChange}
                  overlay={<span>i am a tooltip</span>}
+                 offsetX={this.state.offsetX}
+                 offsetY={this.state.offsetY}
                  transitionName={this.state.transitionName}>
           <a href='#' style={{margin: 20}} onClick={this.preventDefault}>trigger</a>
         </Tooltip>

src/Popup.jsx

@@ -57,7 +57,7 @@ const Popup = React.createClass({
 
   render() {
     const props = this.props;
-    const {prefixCls, placement, style} = props;
+    const {prefixCls, placement, style, offsetX, offsetY} = props;
     let className;
 
     if (props.visible || !this.rootNode) {
@@ -81,6 +81,12 @@ const Popup = React.createClass({
     } else {
       align = placementAlignMap[placement];
     }
+    if (offsetX) {
+      align.offset[0] = offsetX;
+    }
+    if (offsetY) {
+      align.offset[1] = offsetY;
+    }
 
     return (<Animate component=""
                      exclusive={true}

src/Tooltip.jsx

@@ -15,6 +15,8 @@ const Tooltip = React.createClass({
     mouseEnterDelay: React.PropTypes.number,
     mouseLeaveDelay: React.PropTypes.number,
     getTooltipContainer: React.PropTypes.func,
+    offsetX: React.PropTypes.number,
+    offsetY: React.PropTypes.number
   },
 
   getDefaultProps() {
@@ -204,6 +206,8 @@ const Tooltip = React.createClass({
                    trigger={props.trigger}
                    placement={props.placement}
                    animation={props.animation}
+                   offsetX={props.offsetX}
+                   offsetY={props.offsetY}
       {...mouseProps}
                    wrap={this}
                    style={props.overlayStyle}

tests/index.spec.js

@@ -250,6 +250,47 @@ describe('rc-tooltip', function () {
     });
   });
 
+  describe('offset', ()=> {
+    it('offsetX works', (done)=> {
+      let offsetX = 10;
+      var tooltip = React.render(<Tooltip trigger={['click']} offsetX={offsetX} placement="bottomRight" overlay={<strong>tooltip</strong>}>
+        <div className="target">click</div>
+      </Tooltip>, div);
+      var domNode = React.findDOMNode(tooltip).firstChild;
+      Simulate.click(domNode);
+      setTimeout(()=> {
+        var popupDomNode = tooltip.getPopupDomNode();
+        expect(popupDomNode).to.be.ok();
+        var targetOffset = $(domNode).offset();
+        var popupOffset = $(popupDomNode).offset();
+        console.log(popupOffset, targetOffset);
+        expect(popupOffset.left).to.be(targetOffset.left + offsetX);
+        Simulate.click(domNode);
+        done();
+      }, 20);
+    });
+
+    it('offsetY works', (done)=> {
+      let offsetY = 50;
+      var tooltip = React.render(<Tooltip trigger={['click']} offsetY={offsetY} placement="topRight" overlay={<strong>tooltip</strong>}>
+        <div className="target">click</div>
+      </Tooltip>, div);
+      var domNode = React.findDOMNode(tooltip).firstChild;
+      Simulate.click(domNode);
+      setTimeout(()=> {
+        var popupDomNode = tooltip.getPopupDomNode();
+        expect(popupDomNode).to.be.ok();
+        var targetOffset = $(domNode).offset();
+        var popupOffset = $(popupDomNode).offset();
+        console.log(popupOffset, targetOffset);
+        expect(popupOffset.top).to.be(targetOffset.top - $(popupDomNode).outerHeight() + offsetY);
+        Simulate.click(domNode);
+        done();
+      }, 20);
+    });
+
+  });
+
   if (window.TransitionEvent) {
     it('transitionName works', (done)=> {
       var tooltip = React.render(<Tooltip