make createPortal usage optional

Author: mohsinulhaq

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "dist/index.js": {
-    "bundled": 6280,
-    "minified": 6280,
-    "gzipped": 1974
+    "bundled": 6334,
+    "minified": 6334,
+    "gzipped": 1993
   },
   "lib/cjs/index.js": {
-    "bundled": 11982,
-    "minified": 6536,
-    "gzipped": 1904
+    "bundled": 12177,
+    "minified": 6590,
+    "gzipped": 1926
   },
   "lib/esm/index.js": {
-    "bundled": 11940,
-    "minified": 6518,
-    "gzipped": 1906,
+    "bundled": 12135,
+    "minified": 6572,
+    "gzipped": 1928,
     "treeshaked": {
       "rollup": {
-        "code": 6028,
+        "code": 6082,
         "import_statements": 361
       },
       "webpack": {
-        "code": 7329
+        "code": 7385
       }
     }
   }

package.json

@@ -113,22 +113,22 @@
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
     "babel-eslint": "^10.0.1",
-    "docz": "^0.11.2",
+    "docz": "^0.12.5",
     "docz-plugin-css": "^0.11.0",
     "eslint": "^5.6.1",
     "eslint-config-prettier": "^3.1.0",
-    "eslint-plugin-jsx-a11y": "^6.1.1",
-    "eslint-plugin-prettier": "^2.7.0",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-plugin-prettier": "^3.0.0",
     "eslint-plugin-react": "^7.11.1",
-    "gh-pages": "^2.0.0",
+    "gh-pages": "^2.0.1",
     "pre-commit": "^1.2.2",
     "prettier": "^1.14.3",
     "react": "^16.5.2",
     "react-dom": "^16.5.2",
     "rimraf": "^2.6.2",
-    "rollup": "^0.66.2",
+    "rollup": "^0.66.6",
     "rollup-plugin-babel": "^4.0.3",
-    "rollup-plugin-commonjs": "^9.1.8",
+    "rollup-plugin-commonjs": "^9.2.0",
     "rollup-plugin-node-resolve": "^3.4.0",
     "rollup-plugin-size-snapshot": "^0.7.0",
     "rollup-plugin-terser": "^3.0.0"

src/TooltipTrigger.js

@@ -65,6 +65,10 @@ export default class TooltipTrigger extends PureComponent {
      * whether to close the tooltip when it's trigger is out of the boundary
      */
     closeOnOutOfBoundaries: T.bool,
+    /**
+     * whether to React.createPortal for creating tooltip
+     */
+    usePortal: T.bool,
     /**
      * modifiers passed directly to the underlying popper.js instance
      * For more information, refer to Popper.js’ modifier docs:
@@ -80,7 +84,8 @@ export default class TooltipTrigger extends PureComponent {
     placement: 'right',
     trigger: 'hover',
     closeOnOutOfBoundaries: true,
-    onVisibilityChange: noop
+    onVisibilityChange: noop,
+    usePortal: true
   };
 
   state = {
@@ -166,9 +171,53 @@ export default class TooltipTrigger extends PureComponent {
       placement,
       trigger,
       modifiers,
-      closeOnOutOfBoundaries
+      closeOnOutOfBoundaries,
+      usePortal
     } = this.props;
 
+    const popper = (
+      <Popper
+        placement={placement}
+        modifiers={{ ...DEFAULT_MODIFIERS, ...modifiers }}
+      >
+        {({
+          ref,
+          style,
+          placement,
+          arrowProps,
+          outOfBoundaries,
+          scheduleUpdate
+        }) => (
+          <TooltipContext.Consumer>
+            {({
+              addParentOutsideClickHandler,
+              removeParentOutsideClickHandler,
+              parentOutsideClickHandler
+            }) => (
+              <Tooltip
+                {...{
+                  style,
+                  arrowProps,
+                  placement,
+                  trigger,
+                  closeOnOutOfBoundaries,
+                  tooltip,
+                  addParentOutsideClickHandler,
+                  removeParentOutsideClickHandler,
+                  parentOutsideClickHandler,
+                  outOfBoundaries,
+                  scheduleUpdate
+                }}
+                innerRef={ref}
+                hideTooltip={this._hideTooltip}
+                clearScheduled={this._clearScheduled}
+              />
+            )}
+          </TooltipContext.Consumer>
+        )}
+      </Popper>
+    );
+
     return (
       <Manager>
         <Reference>
@@ -177,49 +226,7 @@ export default class TooltipTrigger extends PureComponent {
           }
         </Reference>
         {this._getState() &&
-          createPortal(
-            <Popper
-              placement={placement}
-              modifiers={{ ...DEFAULT_MODIFIERS, ...modifiers }}
-            >
-              {({
-                ref,
-                style,
-                placement,
-                arrowProps,
-                outOfBoundaries,
-                scheduleUpdate
-              }) => (
-                <TooltipContext.Consumer>
-                  {({
-                    addParentOutsideClickHandler,
-                    removeParentOutsideClickHandler,
-                    parentOutsideClickHandler
-                  }) => (
-                    <Tooltip
-                      {...{
-                        style,
-                        arrowProps,
-                        placement,
-                        trigger,
-                        closeOnOutOfBoundaries,
-                        tooltip,
-                        addParentOutsideClickHandler,
-                        removeParentOutsideClickHandler,
-                        parentOutsideClickHandler,
-                        outOfBoundaries,
-                        scheduleUpdate
-                      }}
-                      innerRef={ref}
-                      hideTooltip={this._hideTooltip}
-                      clearScheduled={this._clearScheduled}
-                    />
-                  )}
-                </TooltipContext.Consumer>
-              )}
-            </Popper>,
-            document.body
-          )}
+          (usePortal ? createPortal(popper, document.body) : popper)}
       </Manager>
     );
   }