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;