Internal Scrolling (#76)

This supports internal scrollbars and numbers for padding

example/index.css

@@ -145,4 +145,14 @@ a {
 
 .controlled-example_close-button:hover {
   color: grey;
-}
+}
+
+.internal-scroll-container {
+  height: 200px;
+  overflow: auto;
+}
+
+.internal-scroll-container > div {
+  padding-top: 100px;
+  height: 400px;
+}

example/index.jsx

@@ -47,7 +47,7 @@ class App extends React.Component {
           <h3>Basic:</h3>
 
           <div className="flex-spread">
-            <Tooltip content="By default the text is above the element" className="target" tipContentClassName="foo">
+            <Tooltip padding={20} content="By default the text is above the element" className="target" tipContentClassName="foo">
               Target
             </Tooltip>
 
@@ -59,7 +59,7 @@ class App extends React.Component {
               t
             </Tooltip>
 
-            <Tooltip onToggle={(isOpen) => { alert(`Is tooltip open ? \n Answer : ${isOpen ? 'Yes' : 'No'}`); }} content="alert shown" className="target" tipContentClassName="">
+            <Tooltip onToggle={(isOpen) => { console.log(`Is tooltip open ? \n Answer : ${isOpen ? 'Yes' : 'No'}`); }} content="alert shown" className="target" tipContentClassName="">
               Hover Me
             </Tooltip>
           </div>
@@ -358,6 +358,16 @@ class App extends React.Component {
             z-index example
           </Tooltip>
         </section>
+        <section>
+          <h3>Internal scrollbars</h3>
+          <div className="internal-scroll-container">
+            <div>
+              <Tooltip content="hello" tagName="span">
+                  Scroll on mobile tapping here
+              </Tooltip>
+            </div>
+          </div>
+        </section>
       </div>
     );
   }

src/functions.js

@@ -0,0 +1,48 @@
+/**
+ * a handful of shared functions and constants
+ */
+
+export const minArrowPadding = 5;
+export const bodyPadding = 10;
+export const noArrowDistance = 3;
+
+/**
+ * cross browser scroll positions
+ */
+export function getScrollTop() {
+  return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+}
+
+export function getScrollLeft() {
+  return window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
+}
+
+export function getArrowSpacing(props) {
+  const defaultArrowSpacing = props.arrow ? props.arrowSize : noArrowDistance;
+  return typeof props.distance === 'number' ? props.distance : defaultArrowSpacing;
+}
+
+/**
+ * get first ancestor that might scroll
+ */
+export function getScrollParent(element) {
+  const style = getComputedStyle(element);
+  let scrollParent = window;
+
+  if (style.position !== 'fixed') {
+    let parent = element.parentElement;
+
+    while (parent) {
+      const parentStyle = getComputedStyle(parent);
+
+      if (/(auto|scroll)/.test(parentStyle.overflow + parentStyle.overflowY + parentStyle.overflowX)) {
+        scrollParent = parent;
+        parent = undefined;
+      } else {
+        parent = parent.parentElement;
+      }
+    }
+  }
+
+  return scrollParent;
+}

src/getDirection.js

@@ -1,7 +1,7 @@
 /**
  * Checks the intended tip direction and falls back if not enough space
  */
-import { getScrollLeft, getArrowSpacing, minArrowPadding } from './position';
+import { getScrollLeft, getArrowSpacing, minArrowPadding } from './functions';
 
 function checkLeftRightWidthSufficient(tip, target, distance, bodyPadding) {
   const targetRect = target.getBoundingClientRect();

src/index.d.ts

@@ -18,7 +18,7 @@ declare module 'react-tooltip-lite' {
     hoverDelay?: number;
     isOpen?: boolean;
     mouseOutDelay?: number;
-    padding?: string;
+    padding?: string | number;
     styles?: object;
     tagName?: string;
     tipContentHover?: boolean;

src/index.jsx

@@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
 
 import Portal, { isBrowser } from './Portal';
 import positions from './position';
+import { getScrollParent } from './functions';
 
 // default colors
 const defaultColor = '#fff';
@@ -35,7 +36,10 @@ class Tooltip extends React.Component {
     hoverDelay: PropTypes.number,
     isOpen: PropTypes.bool,
     mouseOutDelay: PropTypes.number,
-    padding: PropTypes.string,
+    padding: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
     styles: PropTypes.object,
     tagName: PropTypes.string,
     tipContentHover: PropTypes.bool,
@@ -112,8 +116,10 @@ class Tooltip extends React.Component {
       this.setState({ isOpen: true });
     }
 
+    this.scrollParent = getScrollParent(this.target);
+
     window.addEventListener('resize', this.listenResizeScroll);
-    window.addEventListener('scroll', this.listenResizeScroll);
+    this.scrollParent.addEventListener('scroll', this.listenResizeScroll);
     window.addEventListener('touchstart', this.bodyTouchStart);
     window.addEventListener('touchEnd', this.bodyTouchEnd);
   }
@@ -136,7 +142,7 @@ class Tooltip extends React.Component {
 
   componentWillUnmount() {
     window.removeEventListener('resize', this.listenResizeScroll);
-    window.removeEventListener('scroll', this.listenResizeScroll);
+    this.scrollParent.removeEventListener('scroll', this.listenResizeScroll);
     window.removeEventListener('touchstart', this.bodyTouchStart);
     window.removeEventListener('touchEnd', this.bodyTouchEnd);
     clearTimeout(this.debounceTimeout);

src/position.js

@@ -4,21 +4,7 @@
  */
 
 import getDirection from './getDirection';
-
-export const minArrowPadding = 5;
-const bodyPadding = 10;
-const noArrowDistance = 3;
-
-/**
- * cross browser scroll positions
- */
-function getScrollTop() {
-  return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
-}
-
-export function getScrollLeft() {
-  return window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
-}
+import { minArrowPadding, bodyPadding, getArrowSpacing, getScrollTop, getScrollLeft } from './functions';
 
 /**
  * Sets tip max width safely for mobile
@@ -39,11 +25,6 @@ function parseAlignMode(direction) {
   return 'middle';
 }
 
-export function getArrowSpacing(props) {
-  const defaultArrowSpacing = props.arrow ? props.arrowSize : noArrowDistance;
-  return typeof props.distance === 'number' ? props.distance : defaultArrowSpacing;
-}
-
 /**
  * Gets wrapper's left position for top/bottom tooltips as well as needed width restriction
  */