fix(style): Make arrow point to target always

components/popconfirm/index.jsx

@@ -2,7 +2,9 @@ import React from 'react';
 import Tooltip from 'rc-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 = {
@@ -81,7 +83,9 @@ export default React.createClass({
     const transitionName = transitionNames[placement];
 
     return (
-      <Tooltip {...restProps} placement={placement}
+      <Tooltip {...restProps}
+        placement={placement}
+        builtinPlacements={placements}
         overlayStyle={overlayStyle}
         prefixCls={prefixCls}
         onVisibleChange={this.onVisibleChange}

components/popover/index.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import Tooltip from 'rc-tooltip';
+import getPlacements from './placements';
 
+const placements = getPlacements();
 const prefixCls = 'ant-popover';
 
 const Popover = React.createClass({
@@ -33,6 +35,7 @@ const Popover = React.createClass({
 
     return (
       <Tooltip transitionName={transitionName}
+        builtinPlacements={placements}
         ref="tooltip"
         {...this.props}
         overlay={this.getOverlay()}>

components/popover/placements.js

@@ -0,0 +1,84 @@
+const autoAdjustOverflow = {
+  adjustX: 1,
+  adjustY: 1,
+};
+
+const targetOffset = [0, 0];
+
+export default function getPlacements(config = {}) {
+  const { arrowWidth = 5, horizontalArrowShift = 16, verticalArrowShift = 12 } = config;
+  return {
+    left: {
+      points: ['cr', 'cl'],
+      overflow: autoAdjustOverflow,
+      offset: [-4, 0],
+      targetOffset,
+    },
+    right: {
+      points: ['cl', 'cr'],
+      overflow: autoAdjustOverflow,
+      offset: [4, 0],
+      targetOffset,
+    },
+    top: {
+      points: ['bc', 'tc'],
+      overflow: autoAdjustOverflow,
+      offset: [0, -4],
+      targetOffset,
+    },
+    bottom: {
+      points: ['tc', 'bc'],
+      overflow: autoAdjustOverflow,
+      offset: [0, 4],
+      targetOffset,
+    },
+    topLeft: {
+      points: ['bl', 'tc'],
+      overflow: autoAdjustOverflow,
+      offset: [-(horizontalArrowShift + arrowWidth), -4],
+      targetOffset,
+    },
+    leftTop: {
+      points: ['tr', 'cl'],
+      overflow: autoAdjustOverflow,
+      offset: [-4, -(verticalArrowShift + arrowWidth)],
+      targetOffset,
+    },
+    topRight: {
+      points: ['br', 'tc'],
+      overflow: autoAdjustOverflow,
+      offset: [horizontalArrowShift + arrowWidth, -4],
+      targetOffset,
+    },
+    rightTop: {
+      points: ['tl', 'cr'],
+      overflow: autoAdjustOverflow,
+      offset: [4, -(verticalArrowShift + arrowWidth)],
+      targetOffset,
+    },
+    bottomRight: {
+      points: ['tr', 'bc'],
+      overflow: autoAdjustOverflow,
+      offset: [horizontalArrowShift + arrowWidth, 4],
+      targetOffset,
+    },
+    rightBottom: {
+      points: ['bl', 'cr'],
+      overflow: autoAdjustOverflow,
+      offset: [4, verticalArrowShift + arrowWidth],
+      targetOffset,
+    },
+    bottomLeft: {
+      points: ['tl', 'bc'],
+      overflow: autoAdjustOverflow,
+      offset: [-(horizontalArrowShift + arrowWidth), 4],
+      targetOffset,
+    },
+    leftBottom: {
+      points: ['br', 'cl'],
+      overflow: autoAdjustOverflow,
+      offset: [-4, verticalArrowShift + arrowWidth],
+      targetOffset,
+    },
+  };
+}

components/tooltip/index.jsx

@@ -1,5 +1,10 @@
 import React from 'react';
 import Tooltip from 'rc-tooltip';
+import getPlacements from '../popover/placements';
+
+const placements = getPlacements({
+  verticalArrowShift: 8,
+});
 
 export default React.createClass({
   getDefaultProps() {
@@ -42,6 +47,7 @@ export default React.createClass({
 
     return (
       <Tooltip transitionName={transitionName}
+        builtinPlacements={placements}
         overlay={this.props.title}
         visible={visible}
         onVisibleChange={this.onVisibleChange}