Add arrowPointAtCenter to Tooltip Popover Popconfirm

修正默认对齐方式为边缘对齐，增加属性用于箭头指向中心的行为

components/popconfirm/demo/placement.md

@@ -3,7 +3,7 @@ order: 1
 title: 位置
 ---
 
-位置有十二个方向。
+位置有十二个方向。如需箭头指向目标元素中心，可以设置 `arrowPointAtCenter`。
 
 ````jsx
 import { Popconfirm, message, Button } from 'antd';

components/popconfirm/index.jsx

@@ -4,16 +4,14 @@ import Icon from '../icon';
 import Button from '../button';
 import getPlacements from '../popover/placements';
 
-const placements = getPlacements();
-const prefixCls = 'ant-popover';
 const noop = () => {};
 
 export default class Popconfirm extends React.Component {
   static defaultProps = {
+    prefixCls: 'ant-popover',
     transitionName: 'zoom-big',
     placement: 'top',
     trigger: 'click',
-    overlayStyle: {},
     onConfirm: noop,
     onCancel: noop,
     onVisibleChange: noop,
@@ -58,7 +56,7 @@ export default class Popconfirm extends React.Component {
   }
 
   render() {
-    const { title, placement, overlayStyle, trigger, ...restProps } = this.props;
+    const { prefixCls, title, placement, arrowPointAtCenter, ...restProps } = this.props;
     let { okText, cancelText } = this.props;
     if (this.context.antLocale && this.context.antLocale.Popconfirm) {
       okText = okText || this.context.antLocale.Popconfirm.okText;
@@ -80,19 +78,15 @@ export default class Popconfirm extends React.Component {
     );
 
     return (
-      <Tooltip {...restProps}
-        placement={placement}
-        builtinPlacements={placements}
-        overlayStyle={overlayStyle}
+      <Tooltip
+        {...restProps}
+        builtinPlacements={getPlacements({ arrowPointAtCenter })}
         prefixCls={prefixCls}
+        placement={placement}
         onVisibleChange={this.onVisibleChange}
-        transitionName={this.props.transitionName}
         visible={this.state.visible}
-        trigger={trigger}
         overlay={overlay}
-      >
-        {this.props.children}
-      </Tooltip>
+      />
     );
   }
 }

components/popconfirm/index.md

@@ -26,3 +26,4 @@ english: Popconfirm
 | okText    | 确认按钮文字                              | String        | 确定   |
 | cancelText| 取消按钮文字                              | String        | 取消   |
 | openClassName | 气泡框展现时触发器添加的类名，可用于打开浮层时高亮触发器 | string | ant-popover-open |
+| arrowPointAtCenter | 箭头是否指向目标元素中心，`antd@1.11+` 支持 | Boolean | `false` |

components/popover/demo/arrow-point-at-center.md

@@ -0,0 +1,29 @@
+---
+order: 4
+title: 箭头指向
+---
+
+设置了 `arrowPointAtCenter` 后，箭头将指向目标元素的中心。
+
+````jsx
+import { Popover, Button } from 'antd';
+
+const text = <span>标题</span>;
+const content = (
+  <div>
+    <p>内容</p>
+    <p>内容</p>
+  </div>
+);
+
+ReactDOM.render(
+  <div>
+    <Popover placement="topLeft" title={text} content={content}>
+      <Button>默认对齐元素边缘</Button>
+    </Popover>
+    <Popover placement="topLeft" title={text} content={content} arrowPointAtCenter>
+      <Button>箭头指向目标元素的中心</Button>
+    </Popover>
+  </div>
+, mountNode);
+````

components/popover/index.jsx

@@ -3,8 +3,6 @@ import Tooltip from '../tooltip';
 import getPlacements from './placements';
 import warning from 'warning';
 
-const placements = getPlacements();
-
 export default class Popover extends React.Component {
   static defaultProps = {
     prefixCls: 'ant-popover',
@@ -13,19 +11,18 @@ export default class Popover extends React.Component {
     trigger: 'hover',
     mouseEnterDelay: 0.1,
     mouseLeaveDelay: 0.1,
-    overlayStyle: {},
+    arrowPointAtCenter: false,
   }
 
   render() {
+    const { arrowPointAtCenter } = this.props;
     return (
-      <Tooltip transitionName={this.props.transitionName}
-        builtinPlacements={placements}
+      <Tooltip
+        builtinPlacements={getPlacements({ arrowPointAtCenter })}
         ref="tooltip"
         {...this.props}
         overlay={this.getOverlay()}
-      >
-        {this.props.children}
-      </Tooltip>
+      />
     );
   }
 

components/popover/index.md

@@ -27,3 +27,4 @@ english: Popover
 | onVisibleChange | 显示隐藏改变的回调                 | function      | 无     |
 | getTooltipContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body |
 | openClassName | 气泡框展现时触发器添加的类名，可用于打开浮层时高亮触发器 | string | ant-popover-open |
+| arrowPointAtCenter | 箭头是否指向目标元素中心，`antd@1.11+` 支持 | Boolean | `false` |

components/popover/placements.js

@@ -1,3 +1,5 @@
+import { placements } from 'rc-tooltip/lib/placements';
+
 const autoAdjustOverflow = {
   adjustX: 1,
   adjustY: 1,
@@ -6,6 +8,9 @@ const autoAdjustOverflow = {
 const targetOffset = [0, 0];
 
 export default function getPlacements(config = {}) {
+  if (!config.arrowPointAtCenter) {
+    return placements;
+  }
   const { arrowWidth = 5, horizontalArrowShift = 16, verticalArrowShift = 12 } = config;
   return {
     left: {

components/tooltip/demo/arrow-point-at-center.md

@@ -0,0 +1,28 @@
+---
+order: 2
+title: 箭头指向
+---
+
+设置了 `arrowPointAtCenter` 后，箭头将指向目标元素的中心。
+
+````jsx
+import { Tooltip, Button } from 'antd';
+
+ReactDOM.render(
+  <div>
+    <Tooltip placement="topLeft" title="提示文字 提示文字">
+      <Button>默认对齐元素边缘</Button>
+    </Tooltip>
+    <Tooltip placement="topLeft" title="提示文字 提示文字" arrowPointAtCenter>
+      <Button>箭头指向目标元素的中心</Button>
+    </Tooltip>
+  </div>
+, mountNode);
+````
+
+<style>
+.code-box-demo .ant-btn {
+  margin-right: 1em;
+  margin-bottom: 1em;
+}
+</style>

components/tooltip/index.jsx

@@ -2,10 +2,6 @@ import React, { cloneElement } from 'react';
 import RcTooltip from 'rc-tooltip';
 import getPlacements from '../popover/placements';
 
-const placements = getPlacements({
-  verticalArrowShift: 8,
-});
-
 export default class Tooltip extends React.Component {
   static defaultProps = {
     prefixCls: 'ant-tooltip',
@@ -14,6 +10,7 @@ export default class Tooltip extends React.Component {
     mouseEnterDelay: 0.1,
     mouseLeaveDelay: 0.1,
     onVisibleChange() {},
+    arrowPointAtCenter: false,
   }
 
   constructor(props) {
@@ -32,8 +29,17 @@ export default class Tooltip extends React.Component {
     return this.refs.tooltip.getPopupDomNode();
   }
 
+  getPlacements() {
+    const { builtinPlacements, arrowPointAtCenter } = this.props;
+    return builtinPlacements || getPlacements({
+      arrowPointAtCenter,
+      verticalArrowShift: 8,
+    });
+  }
+
   // 动态设置动画点
   onPopupAlign = (domNode, align) => {
+    const placements = this.getPlacements();
     // 当前返回的位置
     const placement = Object.keys(placements).filter(
       key => (
@@ -64,7 +70,7 @@ export default class Tooltip extends React.Component {
   }
 
   render() {
-    const { prefixCls, title, overlay, children, transitionName } = this.props;
+    const { prefixCls, title, overlay, children } = this.props;
     // Hide tooltip when there is no title
     let visible = this.state.visible;
     if (!title && !overlay) {
@@ -76,10 +82,10 @@ export default class Tooltip extends React.Component {
     const openClassName = this.props.openClassName || `${prefixCls}-open`;
     const childrenCls = (children && children.props && children.props.className)
       ? `${children.props.className} ${openClassName}` : openClassName;
+
     return (
       <RcTooltip
-        transitionName={transitionName}
-        builtinPlacements={placements}
+        builtinPlacements={this.getPlacements()}
         overlay={title}
         visible={visible}
         onPopupAlign={this.onPopupAlign}

components/tooltip/index.md

@@ -20,5 +20,6 @@ english: Tooltip
 | placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string     | top    |
 | title     | 提示文字                                 | string/React.Element | 无     |
 | getTooltipContainer | 浮层渲染父节点。默认渲染到 body 上 | Function(triggerNode) | () => document.body |
+| arrowPointAtCenter | 箭头是否指向目标元素中心，`antd@1.11+` 支持 | Boolean | `false` |
 
 更多 API 可参考：https://github.com/react-component/tooltip