add follow cursor functionality

Author: mohsinulhaq

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "dist/index.js": {
-    "bundled": 6537,
-    "minified": 6537,
-    "gzipped": 2070
+    "bundled": 7445,
+    "minified": 7445,
+    "gzipped": 2208
   },
   "lib/cjs/index.js": {
-    "bundled": 12566,
-    "minified": 6825,
-    "gzipped": 2015
+    "bundled": 14012,
+    "minified": 7765,
+    "gzipped": 2141
   },
   "lib/esm/index.js": {
-    "bundled": 12524,
-    "minified": 6807,
-    "gzipped": 2017,
+    "bundled": 13960,
+    "minified": 7732,
+    "gzipped": 2138,
     "treeshaked": {
       "rollup": {
-        "code": 6285,
-        "import_statements": 361
+        "code": 7171,
+        "import_statements": 331
       },
       "webpack": {
-        "code": 7592
+        "code": 8405
       }
     }
   }

README.md

@@ -94,7 +94,7 @@ import React from 'react';
 import TooltipTrigger from 'react-popper-tooltip';
 import 'react-popper-tooltip/dist/styles.css';
 
-const Tooltip = ({ tooltip, children, ...props }) => (
+const Tooltip = ({ tooltip, children, hideArrow ...props }) => (
   <TooltipTrigger
     {...props}
     tooltip={({
@@ -110,13 +110,13 @@ const Tooltip = ({ tooltip, children, ...props }) => (
           className: 'tooltip-container'
         })}
       >
-        <div
+        {!hideArrow && <div
           {...getArrowProps({
             ref: arrowRef,
             'data-placement': placement,
             className: 'tooltip-arrow'
           })}
-        />
+        />}
         {tooltip}
       </div>
     )}
@@ -247,6 +247,14 @@ Whether to use `React.createPortal` for creating tooltip.
 
 Element to be used as portal container
 
+### followCursor
+
+> `boolean` | defaults to `false`
+
+Whether to spawn the tooltip at the cursor position.
+
+Recommended usage with hover trigger and no arrow element
+
 ### modifiers
 
 > `object` 

babel.config.js

@@ -9,5 +9,8 @@ module.exports = {
     ],
     '@babel/react'
   ],
-  plugins: [['@babel/proposal-class-properties', { loose: true }]]
+  plugins: [
+    ['@babel/proposal-class-properties', { loose: true }],
+    ['transform-react-remove-prop-types', { removeImport: true }]
+  ]
 };

docs/examples/BasicTooltipTrigger.js

@@ -1,44 +1,48 @@
-import React from 'react';
+import React, { memo } from 'react';
 import TooltipTrigger from '../../src';
 import '../../src/styles.css';
 
-const BasicTooltipTrigger = ({ tooltip, children, ...props }) => (
-  <TooltipTrigger
-    {...props}
-    tooltip={({
-      getTooltipProps,
-      getArrowProps,
-      tooltipRef,
-      arrowRef,
-      placement
-    }) => (
-      <span
-        {...getTooltipProps({
-          ref: tooltipRef,
-          className: 'tooltip-container'
-        })}
-      >
+const BasicTooltipTrigger = memo(
+  ({ tooltip, children, hideArrow, ...props }) => (
+    <TooltipTrigger
+      {...props}
+      tooltip={({
+        getTooltipProps,
+        getArrowProps,
+        tooltipRef,
+        arrowRef,
+        placement
+      }) => (
         <span
-          {...getArrowProps({
-            ref: arrowRef,
-            'data-placement': placement,
-            className: 'tooltip-arrow'
+          {...getTooltipProps({
+            ref: tooltipRef,
+            className: 'tooltip-container'
           })}
-        />
-        {tooltip}
-      </span>
-    )}
-  >
-    {({ getTriggerProps, triggerRef }) => (
-      <span
-        {...getTriggerProps({
-          ref: triggerRef
-        })}
-      >
-        {children}
-      </span>
-    )}
-  </TooltipTrigger>
+        >
+          {!hideArrow && (
+            <span
+              {...getArrowProps({
+                ref: arrowRef,
+                'data-placement': placement,
+                className: 'tooltip-arrow'
+              })}
+            />
+          )}
+          {tooltip}
+        </span>
+      )}
+    >
+      {({ getTriggerProps, triggerRef }) => (
+        <span
+          {...getTriggerProps({
+            ref: triggerRef
+          })}
+        >
+          {children}
+        </span>
+      )}
+    </TooltipTrigger>
+  )
 );
 
 export default BasicTooltipTrigger;

docs/readme.mdx

@@ -111,3 +111,11 @@ Note: `StateContainer` is for demo purpose only and used for state management.
     One
   </BasicTooltipTrigger>
 </Playground>
+
+## Follow cursor example
+
+<Playground>
+  <BasicTooltipTrigger followCursor hideArrow tooltip="Hello, Cursor!">
+    <span style={{display: 'inline-block', padding: 10, width: 200, height:100, border: '1px solid silver'}}>Hover over here</span>
+  </BasicTooltipTrigger>
+</Playground>

package.json

@@ -100,12 +100,11 @@
     "docs"
   ],
   "peerDependencies": {
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0"
+    "react": "^16.6.0",
+    "react-dom": "^16.6.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.1.2",
-    "prop-types": "^15.6.2",
     "react-popper": "^1.0.2"
   },
   "devDependencies": {
@@ -116,18 +115,20 @@
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
     "babel-eslint": "^10.0.1",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.19",
     "docz": "^0.12.5",
     "docz-plugin-css": "^0.11.0",
-    "eslint": "^5.7.0",
+    "eslint": "^5.8.0",
     "eslint-config-prettier": "^3.1.0",
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-prettier": "^3.0.0",
     "eslint-plugin-react": "^7.11.1",
     "gh-pages": "^2.0.1",
     "pre-commit": "^1.2.2",
     "prettier": "^1.14.3",
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
+    "prop-types": "^15.6.2",
+    "react": "^16.6.0",
+    "react-dom": "^16.6.0",
     "rimraf": "^2.6.2",
     "rollup": "^0.66.6",
     "rollup-plugin-babel": "^4.0.3",

rollup.config.js

@@ -10,7 +10,6 @@ const name = 'TooltipTrigger';
 const globals = {
   react: 'React',
   'react-dom': 'ReactDOM',
-  'prop-types': 'PropTypes',
   'react-popper': 'ReactPopper'
 };
 const external = id => !id.startsWith('.') && !id.startsWith('/');

src/Tooltip.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-find-dom-node */
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import { findDOMNode } from 'react-dom';
 import T from 'prop-types';
 import { TooltipContext } from './utils';
@@ -13,7 +13,7 @@ const MUTATION_OBSERVER_CONFIG = {
 /**
  * @private
  */
-export default class Tooltip extends PureComponent {
+export default class Tooltip extends Component {
   static propTypes = {
     innerRef: T.func,
     style: T.object,
@@ -23,10 +23,13 @@ export default class Tooltip extends PureComponent {
     clearScheduled: T.func,
     tooltip: T.func,
     hideTooltip: T.func,
-    parentOutsideClickHandler: T.func,
     scheduleUpdate: T.func,
+    parentOutsideClickHandler: T.func,
     removeParentOutsideClickHandler: T.func,
     addParentOutsideClickHandler: T.func,
+    parentOutsideRightClickHandler: T.func,
+    removeParentOutsideRightClickHandler: T.func,
+    addParentOutsideRightClickHandler: T.func,
     closeOnOutOfBoundaries: T.bool,
     outOfBoundaries: T.bool
   };
@@ -45,12 +48,32 @@ export default class Tooltip extends PureComponent {
     }
   };
 
+  _handleOutsideRightClick = e => {
+    if (!findDOMNode(this).contains(e.target)) {
+      const {
+        hideTooltip,
+        clearScheduled,
+        parentOutsideRightClickHandler
+      } = this.props;
+
+      clearScheduled();
+      hideTooltip();
+      parentOutsideRightClickHandler && parentOutsideRightClickHandler(e);
+    }
+  };
+
   _addOutsideClickHandler = () =>
     document.addEventListener('click', this._handleOutsideClick);
 
   _removeOutsideClickHandler = () =>
     document.removeEventListener('click', this._handleOutsideClick);
 
+  _addOutsideRightClickHandler = () =>
+    document.addEventListener('contextmenu', this._handleOutsideRightClick);
+
+  _removeOutsideRightClickHandler = () =>
+    document.removeEventListener('contextmenu', this._handleOutsideRightClick);
+
   componentDidMount() {
     const { trigger } = this.props;
     const observer = (this.observer = new MutationObserver(() => {
@@ -59,9 +82,15 @@ export default class Tooltip extends PureComponent {
     observer.observe(findDOMNode(this), MUTATION_OBSERVER_CONFIG);
 
     if (trigger === 'click' || trigger === 'right-click') {
-      const { removeParentOutsideClickHandler } = this.props;
+      const {
+        removeParentOutsideClickHandler,
+        removeParentOutsideRightClickHandler
+      } = this.props;
       document.addEventListener('click', this._handleOutsideClick);
+      document.addEventListener('contextmenu', this._handleOutsideRightClick);
       removeParentOutsideClickHandler && removeParentOutsideClickHandler();
+      removeParentOutsideRightClickHandler &&
+        removeParentOutsideRightClickHandler();
     }
   }
 
@@ -70,10 +99,19 @@ export default class Tooltip extends PureComponent {
     this.observer.disconnect();
 
     if (trigger === 'click' || trigger === 'right-click') {
-      const { addParentOutsideClickHandler } = this.props;
+      const {
+        addParentOutsideClickHandler,
+        addParentOutsideRightClickHandler
+      } = this.props;
       document.removeEventListener('click', this._handleOutsideClick);
+      document.removeEventListener(
+        'contextmenu',
+        this._handleOutsideRightClick
+      );
       this._handleOutsideClick = undefined;
+      this._handleOutsideRightClick = undefined;
       addParentOutsideClickHandler && addParentOutsideClickHandler();
+      addParentOutsideRightClickHandler && addParentOutsideRightClickHandler();
     }
   }
 
@@ -111,9 +149,13 @@ export default class Tooltip extends PureComponent {
     return (
       <TooltipContext.Provider
         value={{
+          parentOutsideClickHandler: this._handleOutsideClick,
           addParentOutsideClickHandler: this._addOutsideClickHandler,
           removeParentOutsideClickHandler: this._removeOutsideClickHandler,
-          parentOutsideClickHandler: this._handleOutsideClick
+          parentOutsideRightClickHandler: this._handleOutsideRightClick,
+          addParentOutsideRightClickHandler: this._addOutsideRightClickHandler,
+          removeParentOutsideRightClickHandler: this
+            ._removeOutsideRightClickHandler
         }}
       >
         {tooltip({