add tooltip anim origin

components/popconfirm/index.jsx

@@ -1,36 +1,24 @@
 import React from 'react';
-import Tooltip from 'rc-tooltip';
+import Tooltip from '../tooltip';
 import Icon from '../icon';
 import Button from '../button';
 import getPlacements from '../popover/placements';
 
 const placements = getPlacements();
 const prefixCls = 'ant-popover';
-const noop = function () {};
-const transitionNames = {
-  top: 'zoom-down',
-  bottom: 'zoom-up',
-  left: 'zoom-right',
-  right: 'zoom-left',
-  topLeft: 'zoom-down',
-  bottomLeft: 'zoom-up',
-  leftTop: 'zoom-right',
-  rightTop: 'zoom-left',
-  topRight: 'zoom-down',
-  bottomRight: 'zoom-up',
-  leftBottom: 'zoom-right',
-  rightBottom: 'zoom-left',
+const noop = function () {
 };
 
 export default class Popconfirm extends React.Component {
   static defaultProps = {
-    transitionName: '',
+    transitionName: 'zoom-big',
     placement: 'top',
     trigger: 'click',
     overlayStyle: {},
     onConfirm: noop,
     onCancel: noop,
-    onVisibleChange() {},
+    onVisibleChange() {
+    },
   }
 
   static contextTypes = {
@@ -93,8 +81,6 @@ export default class Popconfirm extends React.Component {
       </div>
     );
 
-    const transitionName = transitionNames[placement];
-
     return (
       <Tooltip {...restProps}
         placement={placement}
@@ -102,7 +88,7 @@ export default class Popconfirm extends React.Component {
         overlayStyle={overlayStyle}
         prefixCls={prefixCls}
         onVisibleChange={this.onVisibleChange}
-        transitionName={transitionName}
+        transitionName={this.props.transitionName}
         visible={this.state.visible}
         trigger={trigger}
         overlay={overlay}>

components/popover/demo/basic.md

@@ -16,7 +16,7 @@ const content = (
 );
 
 ReactDOM.render(
-  <Popover content={content} title="标题">
+  <Popover content={content}>
     <Button type="primary">弹出卡片</Button>
   </Popover>
 , mountNode);

components/popover/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Tooltip from 'rc-tooltip';
+import Tooltip from '../tooltip';
 import getPlacements from './placements';
 import warning from 'warning';
 
@@ -9,6 +9,7 @@ export default class Popover extends React.Component {
   static defaultProps = {
     prefixCls: 'ant-popover',
     placement: 'top',
+    transitionName: 'zoom-big',
     trigger: 'hover',
     mouseEnterDelay: 0.1,
     mouseLeaveDelay: 0.1,
@@ -16,23 +17,8 @@ export default class Popover extends React.Component {
   }
 
   render() {
-    const transitionName = ({
-      top: 'zoom-down',
-      bottom: 'zoom-up',
-      left: 'zoom-right',
-      right: 'zoom-left',
-      topLeft: 'zoom-down',
-      bottomLeft: 'zoom-up',
-      leftTop: 'zoom-right',
-      rightTop: 'zoom-left',
-      topRight: 'zoom-down',
-      bottomRight: 'zoom-up',
-      leftBottom: 'zoom-right',
-      rightBottom: 'zoom-left',
-    })[this.props.placement];
-
     return (
-      <Tooltip transitionName={transitionName}
+      <Tooltip transitionName={this.props.transitionName}
         builtinPlacements={placements}
         ref="tooltip"
         {...this.props}

components/tooltip/index.jsx

@@ -10,46 +10,61 @@ export default class Tooltip extends React.Component {
   static defaultProps = {
     prefixCls: 'ant-tooltip',
     placement: 'top',
+    transitionName: 'zoom-big',
     mouseEnterDelay: 0.1,
     mouseLeaveDelay: 0.1
   }
+
   constructor(props) {
     super(props);
     this.state = {
       visible: false
     };
   }
+
   onVisibleChange = (visible) => {
     this.setState({ visible });
   }
-  render() {
-    let transitionName = ({
-      top: 'zoom-down',
-      bottom: 'zoom-up',
-      left: 'zoom-right',
-      right: 'zoom-left',
-      topLeft: 'zoom-down',
-      bottomLeft: 'zoom-up',
-      leftTop: 'zoom-right',
-      rightTop: 'zoom-left',
-      topRight: 'zoom-down',
-      bottomRight: 'zoom-up',
-      leftBottom: 'zoom-right',
-      rightBottom: 'zoom-left',
-    })[this.props.placement];
 
+  onPopupAlign = (domNode, align) => {
+    // 当前返回的位置;
+    let placement;
+    Object.keys(placements).forEach(key => {
+      const item = placements[key];
+      if (item.points[0] === align.points[0] && item.points[1] === align.points[1]) {
+        placement = key;
+      }
+    });
+    // 当前坐标;
+    const rect = domNode.getBoundingClientRect();
+    let top = '50%';
+    let left = '50%';
+    if (placement.indexOf('top') >= 0 || placement.indexOf('Bottom') >= 0) {
+      top = `${rect.height - align.offset[1]}px`;
+    } else if (placement.indexOf('Top') >= 0 || placement.indexOf('bottom') >= 0) {
+      top = `${-align.offset[1]}px`;
+    }
+    if (placement.indexOf('left') >= 0 || placement.indexOf('Right') >= 0) {
+      left = `${rect.width - align.offset[0]}px`;
+    } else if (placement.indexOf('right') >= 0 || placement.indexOf('Left') >= 0) {
+      left = `${-align.offset[0]}px`;
+    }
+    domNode.style.transformOrigin = `${left} ${top}`;
+  };
+
+  render() {
     // Hide tooltip when there is no title
     let visible = this.state.visible;
-    if (!this.props.title) {
+    if (!this.props.title && !this.props.overlay) {
       visible = false;
     }
-
     return (
-      <RcTooltip transitionName={transitionName}
+      <RcTooltip transitionName={this.props.transitionName}
         builtinPlacements={placements}
         overlay={this.props.title}
         visible={visible}
         onVisibleChange={this.onVisibleChange}
+        onPopupAlign={this.onPopupAlign}
         {...this.props}>
         {this.props.children}
       </RcTooltip>

package.json

@@ -62,10 +62,10 @@
     "rc-table": "~4.0.0-beta.3",
     "rc-tabs": "~5.8.0",
     "rc-time-picker": "~1.1.0",
-    "rc-tooltip": "~3.3.1",
+    "rc-tooltip": "~3.3.2",
     "rc-tree": "~1.1.0",
     "rc-tree-select": "~1.5.0",
-    "rc-trigger": "~1.3.0",
+    "rc-trigger": "~1.4.0",
     "rc-upload": "~1.10.0",
     "rc-util": "~3.1.2",
     "react-slick": "~0.11.0",