Merge pull request #502 from sonnenhaft/overridePosition-property

feat(overridePosition): Add "overridePosition" property to handle border cases and customize position

Author: aronhelser

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

example/src/index.js

@@ -427,6 +427,72 @@ class Test extends React.Component {
             </pre>
           </div>
 
+          <div className="section">
+            <h4 className='title'>Override position</h4>
+            <p className="sub-title">
+              Try to resize/zoom in window - tooltip in this sample will try to
+              magnet to window borders, top left border is priority here. Idea is following:
+              sometimes you have custom border cases, like custom scrolls, small windows,
+              iframes, react-tooltip itself can not cover everything, so up to you if you want to customize
+              default behavior, or may be just limit it like in this example.
+            </p>
+            <div className="example-jsx">
+              <div className="side" style={{display: 'flex', width: '100%'}}>
+                <a data-tip data-for='overridePosition'>( •̀д•́) override</a>
+                <ReactTooltip id='overridePosition' overridePosition={ ({ left, top },
+                                                                        currentEvent, currentTarget, node) => {
+                  const d = document.documentElement;
+
+                  left = Math.min(d.clientWidth - node.clientWidth, left);
+                  top = Math.min(d.clientHeight - node.clientHeight, top);
+
+                  left = Math.max(0, left);
+                  top = Math.max(0, top);
+
+                  return { top, left }
+                } }>
+                  <div>header</div>
+                  <img src="http://lorempixel.com/100/1500" alt="lorem image 100x1500" />
+                  <div>footer</div>
+                </ReactTooltip>
+                <a data-tip data-for='noOverridePosition'>( •̀д•́) noOverride</a>
+                <ReactTooltip id='noOverridePosition'>
+                  <div>header</div>
+                  <img src="http://lorempixel.com/100/1500" alt="lorem image 100x1500" />
+                  <div>footer</div>
+                </ReactTooltip>
+              </div>
+            </div>
+            <br />
+            <pre className='example-pre'>
+              <div>
+                <p>{ `
+<a data-tip data-for='overridePosition'>( •̀д•́) override</a>
+<ReactTooltip id='overridePosition' overridePosition={ ({ left, top },
+                                                        currentEvent, currentTarget, node) => {
+  const d = document.documentElement;
+
+  left = Math.min(d.clientWidth - node.clientWidth, left);
+  top = Math.min(d.clientHeight - node.clientHeight, top);
+
+  left = Math.max(0, left);
+  top = Math.max(0, top);
+
+  return { top, left }
+} }>
+  <div>header</div>
+  <img src="http://lorempixel.com/100/1500" alt="lorem image 100x1500" />
+  <div>footer</div>
+</ReactTooltip>
+<a data-tip data-for='noOverridePosition'>( •̀д•́) noOverride</a>
+<ReactTooltip id='noOverridePosition'>
+  <div>header</div>
+  <img src="http://lorempixel.com/100/1500" alt="lorem image 100x1500" />
+  <div>footer</div>
+</ReactTooltip>` }</p>
+              </div>
+            </pre>
+          </div>
         </section>
       </div>
     )

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,
@@ -312,6 +313,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
@@ -483,7 +488,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