From ccb8b58a6762f3393f7d71c157c64ae24a81674c Mon Sep 17 00:00:00 2001 From: vlad Date: Mon, 15 Jul 2019 13:58:39 +0800 Subject: [PATCH] feat(overridePosition): Add "overridePosition" property to handle border cases and customize position --- README.md | 1 + src/index.js | 10 +++++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 0022254b..619ce4bf 100644 --- a/README.md +++ b/README.md @@ -73,6 +73,7 @@ className | data-class | String | | extra custom class, can use !importan getContent | null | Func or Array | (dataTip) => {}, [(dataTip) => {}, Interval] | Generate the tip content dynamically afterShow | null | Func | (evt) => {} | Function that will be called after tooltip show, with event that triggered show afterHide | null | Func | (evt) => {} | Function that will be called after tooltip hide, with event that triggered hide + overridePosition | null | Func | ({left:number, top: number}, currentEvent, currentTarget, node, place, desiredPlace, effect, offset) => ({left: number, top: number}) | Function that will replace tooltip position with custom one disable | data-tip-disable | Bool | true, false | Disable the tooltip behaviour, default is false scrollHide | data-scroll-hide | Bool | true, false | Hide the tooltip when scrolling, default is true resizeHide | null | Bool | true, false | Hide the tooltip when resizing the window, default is true diff --git a/src/index.js b/src/index.js index 746ae487..95257f24 100644 --- a/src/index.js +++ b/src/index.js @@ -53,6 +53,7 @@ class ReactTooltip extends React.Component { getContent: PropTypes.any, afterShow: PropTypes.func, afterHide: PropTypes.func, + overridePosition: PropTypes.func, disable: PropTypes.bool, scrollHide: PropTypes.bool, resizeHide: PropTypes.bool, @@ -309,6 +310,10 @@ class ReactTooltip extends React.Component { let effect = switchToSolid && 'solid' || this.getEffect(e.currentTarget) let offset = e.currentTarget.getAttribute('data-offset') || this.props.offset || {} let result = getPosition(e, e.currentTarget, this.tooltipRef, desiredPlace, desiredPlace, effect, offset) + if (result.position && this.props.overridePosition) { + result.position = this.props.overridePosition(result.position, e.currentTarget, this.tooltipRef, desiredPlace, desiredPlace, effect, offset) + } + let place = result.isNewState ? result.newState.place : desiredPlace // To prevent previously created timers from triggering @@ -480,7 +485,10 @@ class ReactTooltip extends React.Component { updatePosition () { const {currentEvent, currentTarget, place, desiredPlace, effect, offset} = this.state const node = this.tooltipRef - const result = getPosition(currentEvent, currentTarget, node, place, desiredPlace, effect, offset) + let result = getPosition(currentEvent, currentTarget, node, place, desiredPlace, effect, offset) + if (result.position && this.props.overridePosition) { + result.position = this.props.overridePosition(result.position, currentEvent, currentTarget, node, place, desiredPlace, effect, offset) + } if (result.isNewState) { // Switch to reverse placement