support autoAdjustOverflow prop

README.md

@@ -170,6 +170,12 @@ Online examples: [http://react-component.github.io/tooltip/examples/](http://rea
           <td>false</td>
           <td>whether destroy tooltip when tooltip is hidden</td>
         </tr>
+        <tr>
+          <td>autoAdjustOverflow</td>
+          <td>boolean</td>
+          <td>true</td>
+          <td>whether adjust source node placement automatically when source node is invisible</td>
+        </tr>
     </tbody>
 </table>
 
@@ -201,3 +207,4 @@ npm run coverage
 ## License
 
 `rc-tooltip` is released under the MIT license.
+

examples/autoAdjustOverflow.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Tooltip from 'rc-tooltip';
+import 'rc-tooltip/assets/bootstrap.less';
+
+const styles = {
+  display: 'inline-block',
+  lineHeight: '40px',
+  height: '40px',
+  padding: '0 6px',
+  textAlign: 'center',
+  background: '#f6f6f6',
+  marginRight: '1em',
+  marginBottom: '1em',
+  borderRadius: '6px',
+};
+const popupStyles = {
+  width: '400px',
+  height: '400px',
+  lineHeight: '400px',
+  textAlign: 'center',
+};
+
+const text = <div style={popupStyles}>很多提示文字很多提示文字很多提示文字很多提示文字</div>;
+
+const Test = () => (
+  <div>
+    <Tooltip placement="left" overlay={text}>
+      <a href="#" style={styles}>自动调整位置</a>
+    </Tooltip>
+    <Tooltip placement="left" overlay={text} autoAdjustOverflow={false}>
+      <a href="#" style={styles}>不自动调整位置</a>
+    </Tooltip>
+    <br />
+    <Tooltip placement="left" overlay={text} autoAdjustOverflow={{ adjustX: 1 }}>
+      <a href="#" style={styles}>自定义需要调整位置方向</a>
+    </Tooltip>
+  </div>
+);
+
+ReactDOM.render(<Test />, document.getElementById('__react-content'));

src/Tooltip.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Trigger from 'rc-trigger';
-import { placements } from './placements';
+import { getPlacements } from './placements';
 
 class Tooltip extends Component {
   static propTypes = {
@@ -27,6 +27,13 @@ class Tooltip extends Component {
     destroyTooltipOnHide: PropTypes.bool,
     align: PropTypes.object,
     arrowContent: PropTypes.any,
+    autoAdjustOverflow: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.shape({
+        adjustX: PropTypes.oneOf([0, 1]),
+        adjustY: PropTypes.oneOf([0, 1]),
+      }),
+    ]),
   };
 
   static defaultProps = {
@@ -38,6 +45,7 @@ class Tooltip extends Component {
     placement: 'right',
     trigger: ['hover'],
     arrowContent: null,
+    autoAdjustOverflow: true,
   };
 
   getPopupElement = () => {
@@ -66,9 +74,11 @@ class Tooltip extends Component {
       placement, align,
       destroyTooltipOnHide,
       defaultVisible, getTooltipContainer,
+      autoAdjustOverflow,
       ...restProps,
     } = this.props;
     const extraProps = { ...restProps };
+    const builtinPlacements = getPlacements({ autoAdjustOverflow });
     if ('visible' in this.props) {
       extraProps.popupVisible = this.props.visible;
     }
@@ -78,7 +88,7 @@ class Tooltip extends Component {
       prefixCls={prefixCls}
       popup={this.getPopupElement}
       action={trigger}
-      builtinPlacements={placements}
+      builtinPlacements={builtinPlacements}
       popupPlacement={placement}
       popupAlign={align}
       getPopupContainer={getTooltipContainer}

src/placements.js

@@ -1,83 +1,101 @@
-const autoAdjustOverflow = {
+const autoAdjustOverflowEnabled = {
   adjustX: 1,
   adjustY: 1,
 };
 
+const autoAdjustOverflowDisabled = {
+  adjustX: 0,
+  adjustY: 0,
+};
+
 const targetOffset = [0, 0];
 
-export const placements = {
-  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', 'tl'],
-    overflow: autoAdjustOverflow,
-    offset: [0, -4],
-    targetOffset,
-  },
-  leftTop: {
-    points: ['tr', 'tl'],
-    overflow: autoAdjustOverflow,
-    offset: [-4, 0],
-    targetOffset,
-  },
-  topRight: {
-    points: ['br', 'tr'],
-    overflow: autoAdjustOverflow,
-    offset: [0, -4],
-    targetOffset,
-  },
-  rightTop: {
-    points: ['tl', 'tr'],
-    overflow: autoAdjustOverflow,
-    offset: [4, 0],
-    targetOffset,
-  },
-  bottomRight: {
-    points: ['tr', 'br'],
-    overflow: autoAdjustOverflow,
-    offset: [0, 4],
-    targetOffset,
-  },
-  rightBottom: {
-    points: ['bl', 'br'],
-    overflow: autoAdjustOverflow,
-    offset: [4, 0],
-    targetOffset,
-  },
-  bottomLeft: {
-    points: ['tl', 'bl'],
-    overflow: autoAdjustOverflow,
-    offset: [0, 4],
-    targetOffset,
-  },
-  leftBottom: {
-    points: ['br', 'bl'],
-    overflow: autoAdjustOverflow,
-    offset: [-4, 0],
-    targetOffset,
-  },
-};
+export function getOverflowOptions(autoAdjustOverflow) {
+  if (typeof autoAdjustOverflow === 'boolean') {
+    return autoAdjustOverflow ? autoAdjustOverflowEnabled : autoAdjustOverflowDisabled;
+  }
+  return {
+    ...autoAdjustOverflowDisabled,
+    ...autoAdjustOverflow,
+  };
+}
+
+export function getPlacements({ autoAdjustOverflow }) {
+  const overflowOptions = getOverflowOptions(autoAdjustOverflow);
+  return {
+    left: {
+      points: ['cr', 'cl'],
+      overflow: overflowOptions,
+      offset: [-4, 0],
+      targetOffset,
+    },
+    right: {
+      points: ['cl', 'cr'],
+      overflow: overflowOptions,
+      offset: [4, 0],
+      targetOffset,
+    },
+    top: {
+      points: ['bc', 'tc'],
+      overflow: overflowOptions,
+      offset: [0, -4],
+      targetOffset,
+    },
+    bottom: {
+      points: ['tc', 'bc'],
+      overflow: overflowOptions,
+      offset: [0, 4],
+      targetOffset,
+    },
+    topLeft: {
+      points: ['bl', 'tl'],
+      overflow: overflowOptions,
+      offset: [0, -4],
+      targetOffset,
+    },
+    leftTop: {
+      points: ['tr', 'tl'],
+      overflow: overflowOptions,
+      offset: [-4, 0],
+      targetOffset,
+    },
+    topRight: {
+      points: ['br', 'tr'],
+      overflow: overflowOptions,
+      offset: [0, -4],
+      targetOffset,
+    },
+    rightTop: {
+      points: ['tl', 'tr'],
+      overflow: overflowOptions,
+      offset: [4, 0],
+      targetOffset,
+    },
+    bottomRight: {
+      points: ['tr', 'br'],
+      overflow: overflowOptions,
+      offset: [0, 4],
+      targetOffset,
+    },
+    rightBottom: {
+      points: ['bl', 'br'],
+      overflow: overflowOptions,
+      offset: [4, 0],
+      targetOffset,
+    },
+    bottomLeft: {
+      points: ['tl', 'bl'],
+      overflow: overflowOptions,
+      offset: [0, 4],
+      targetOffset,
+    },
+    leftBottom: {
+      points: ['br', 'bl'],
+      overflow: overflowOptions,
+      offset: [-4, 0],
+      targetOffset,
+    },
+  };
+}
 
-export default placements;
+export default getPlacements;