diff --git a/README.md b/README.md
index 18d5092..23110bf 100644
--- a/README.md
+++ b/README.md
@@ -170,6 +170,12 @@ Online examples: [http://react-component.github.io/tooltip/examples/](http://rea
false |
whether destroy tooltip when tooltip is hidden |
+
+ autoAdjustOverflow |
+ boolean |
+ true |
+ whether adjust source node placement automatically when source node is invisible |
+
@@ -201,3 +207,4 @@ npm run coverage
## License
`rc-tooltip` is released under the MIT license.
+
diff --git a/examples/autoAdjustOverflow.html b/examples/autoAdjustOverflow.html
new file mode 100644
index 0000000..e69de29
diff --git a/examples/autoAdjustOverflow.js b/examples/autoAdjustOverflow.js
new file mode 100644
index 0000000..a136921
--- /dev/null
+++ b/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 = 很多提示文字很多提示文字很多提示文字很多提示文字
;
+
+const Test = () => (
+
+);
+
+ReactDOM.render(, document.getElementById('__react-content'));
diff --git a/src/Tooltip.jsx b/src/Tooltip.jsx
index fc677e2..9ccca8f 100644
--- a/src/Tooltip.jsx
+++ b/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}
diff --git a/src/placements.js b/src/placements.js
index 47b30ab..8f6d35a 100644
--- a/src/placements.js
+++ b/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;