react-tooltip-controller - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/index.es.js

@@ -1028,17 +1028,11 @@ import React from 'react';
 
-var ToolTipMenu = function (_React$PureComponent) {
-  inherits(ToolTipMenu, _React$PureComponent);
+var ToolTipController = function (_React$PureComponent) {
+  inherits(ToolTipController, _React$PureComponent);
 
-  function ToolTipMenu() {
-    var _ref;
+  function ToolTipController(props) {
+    classCallCheck(this, ToolTipController);
 
-    var _temp, _this, _ret;
+    var _this = possibleConstructorReturn(this, (ToolTipController.__proto__ || Object.getPrototypeOf(ToolTipController)).call(this, props));
 
-    classCallCheck(this, ToolTipMenu);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = ToolTipMenu.__proto__ || Object.getPrototypeOf(ToolTipMenu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+    _this.state = {
       divStyle: {
@@ -1055,9 +1049,12 @@ position: "absolute",
       timeOutID: null,
+      tooltipWidth: 0,
       trigger: _this.props.triggerClose
-    }, _this.openMenu = function (e) {
+    };
+
+    _this.openMenu = function (e) {
       e.preventDefault();
       if (!_this.state.animate) {
 
-        //Set timeout for menu to clos automatically
-        if (_this.props.timeOut !== null && _this.props.detect !== "hover-interactable") {
+        //Set timeout for menu to close automatically
+        if (_this.props.timeOut !== null && _this.props.detect !== "hover-interact") {
           var timeOutID = setTimeout(function () {
@@ -1084,11 +1081,11 @@ return _this.closeMenu();
             //Add the pointer events from all the active DIVs
-            var element = document.querySelector('.react-tooltip-' + _this.props.id);
-            element.style.pointerEvents = "auto";
+            _this.tooltip.current.style.pointerEvents = "auto";
           }, 0);
         }
       }
-    }, _this.closeMenu = function (e) {
+    };
 
+    _this.closeMenu = function () {
       // Clear time out
-      if (_this.props.timeOut !== null && _this.props.detect !== "hover-interactable") {
+      if (_this.props.timeOut !== null && _this.props.detect !== "hover-interact") {
         clearTimeout(_this.state.timeOutID);
@@ -1108,4 +1105,3 @@ }
           //Remove pointer events from all the active DIVs
-          var element = document.querySelector('.react-tooltip-' + _this.props.id);
-          element.style.pointerEvents = "none";
+          _this.tooltip.current.style.pointerEvents = "none";
         } else {
@@ -1121,83 +1117,39 @@ if (_this.props.returnState !== null) {
       }
-    }, _this.getElementBounding = function () {
-      var element = document.querySelector('.' + _this.props.select);
-      var rect = element.getBoundingClientRect();
-      var elementHeight = element.clientHeight;
-      var elemnetWidth = element.clientWidth;
-      return { left: rect.left, top: rect.top, height: elementHeight, width: elemnetWidth };
-    }, _this.resize = function () {
-      //this.forceUpdate()
+    };
+
+    _this.timeOutFunc = function () {
+      var timeOutID = setTimeout(function () {
+        return _this.closeMenu();
+      }, _this.props.timeOut);
+      _this.setState({ timeOutID: timeOutID });
+    };
+
+    _this.clearTimeoutFunc = function () {
+      clearTimeout(_this.state.timeOutID);
+    };
+
+    _this.resize = function (getElementBounding, selector) {
       var _this$props = _this.props,
           offsetX = _this$props.offsetX,
-          offsetY = _this$props.offsetY,
-          width = _this$props.width;
+          offsetY = _this$props.offsetY;
 
 
-      var element = document.querySelector('.' + _this.props.select);
-
       if (offsetX === "center" || offsetX === "centre") {
         _this.setState(produce(function (draft) {
-          draft.divStyle.left = _this.getElementBounding().left + (element.offsetWidth - width) / 2;
-          draft.divStyle.top = _this.getElementBounding().top + _this.getElementBounding().height + offsetY + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
+          draft.divStyle.left = getElementBounding.left + (getElementBounding.width - _this.state.tooltipWidth) / 2;
+          draft.divStyle.top = getElementBounding.top + getElementBounding.height + offsetY + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
         }));
       } else {
         _this.setState(produce(function (draft) {
-          draft.divStyle.left = _this.getElementBounding().left + offsetX;
-          draft.divStyle.top = _this.getElementBounding().top + _this.getElementBounding().height + offsetY + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
+          draft.divStyle.left = getElementBounding.left + offsetX;
+          draft.divStyle.top = getElementBounding.top + getElementBounding.height + offsetY + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
         }));
       }
-    }, _this.attachEvents = function () {
-      //Listen to page resize
-      window.addEventListener('resize', _this.resize);
+    };
 
-      var element = document.querySelector('.' + _this.props.select);
-
-      //Add eventlistener to triggering DOM element in accordance with the selected action
-      if (_this.props.detect === "click") {
-        element.addEventListener('click', _this.openMenu);
-        element.addEventListener('touchstart', _this.openMenu);
-      } else if (_this.props.detect === "hover") {
-        element.addEventListener('mouseenter', _this.openMenu);
-        element.addEventListener('mouseleave', _this.closeMenu);
-      } else if (_this.props.detect === "hover-hold") {
-        element.addEventListener('mouseenter', _this.openMenu);
-      } else if (_this.props.detect === "hover-interactable") {
-        element.addEventListener('mouseenter', _this.openMenu);
-        element.addEventListener('mouseleave', function () {
-          return _this.timeOutFunc();
-        });
-      }
-
-      //Position the menu
-      _this.resize();
-    }, _this.timeOutFunc = function () {
-      var timeOutID = setTimeout(function () {
-        return _this.closeMenu();
-      }, _this.props.timeOut);
-      _this.setState({ timeOutID: timeOutID });
-
-      if (_this.props.detect === "hover-interactable") {
-        var tooltip = document.querySelector('.react-tooltip-' + _this.props.id);
-        if (tooltip) {
-          tooltip.addEventListener('mouseenter', function () {
-            return clearTimeout(_this.state.timeOutID);
-          });
-          tooltip.addEventListener('mouseleave', _this.closeMenu);
-        }
-      }
-    }, _temp), possibleConstructorReturn(_this, _ret);
+    _this.tooltip = React.createRef();
+    return _this;
   }
 
-  // Returns the position and size data of the triggering DOM element
-
-
-  //Change the position of the menu dynamically when the page is resized
-
-
-  createClass(ToolTipMenu, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this.attachEvents();
-    }
-  }, {
+  createClass(ToolTipController, [{
     key: 'componentDidUpdate',
@@ -1207,3 +1159,5 @@ value: function componentDidUpdate(prevProp, prevState) {
 
-      this.resize();
+      if (this.state.isOpen) {
+        this.setState({ tooltipWidth: this.tooltip.current.getBoundingClientRect().width });
+      }
 
@@ -1216,16 +1170,16 @@ if (prevProp.triggerClose !== this.props.triggerClose) {
         if (_this2.props.animation !== "") {
-          if (_this2.state.animate && _this2.props.detect !== "hover") {
+          if (_this2.state.animate) {
             window.addEventListener('click', _this2.closeMenu);
-            window.addEventListener('touchstart', _this2.closeMenu);
+            window.addEventListener('touchend', _this2.closeMenu);
           } else {
             window.removeEventListener('click', _this2.closeMenu);
-            window.removeEventListener('touchstart', _this2.closeMenu);
+            window.removeEventListener('touchend', _this2.closeMenu);
           }
         } else {
-          if (_this2.state.isOpen && _this2.props.detect !== "hover") {
+          if (_this2.state.isOpen) {
             window.addEventListener('click', _this2.closeMenu);
-            window.addEventListener('touchstart', _this2.closeMenu);
+            window.addEventListener('touchend', _this2.closeMenu);
           } else {
             window.removeEventListener('click', _this2.closeMenu);
-            window.removeEventListener('touchstart', _this2.closeMenu);
+            window.removeEventListener('touchend', _this2.closeMenu);
           }
@@ -1238,14 +1192,4 @@ }
     value: function componentWillUnmount() {
-
-      var element = document.querySelector('.' + this.props.select);
-      window.removeEventListener('resize', this.resize);
-      if (this.props.detect === "click") {
-        element.removeEventListener('click', this.openMenu);
-        element.removeEventListener('touchstart', this.openMenu);
-      } else if (this.props.detect === "hover") {
-        element.removeEventListener('mouseenter', this.openMenu);
-        element.removeEventListener('mouseleave', this.closeMenu);
-      } else if (this.props.detect === "hover-hold") {
-        element.removeEventListener('mouseenter', this.openMenu);
-      }
+      window.removeEventListener('click', this.closeMenu);
+      window.removeEventListener('touchstart', this.closeMenu);
     }
@@ -1255,2 +1199,4 @@ }, {
     value: function render() {
+      var _this3 = this;
+
       var _props = this.props,
@@ -1260,3 +1206,4 @@ id = _props.id,
           animation = _props.animation,
-          closeOnClick = _props.closeOnClick;
+          closeOnClick = _props.closeOnClick,
+          detect = _props.detect;
       var _state = this.state,
@@ -1266,19 +1213,34 @@ isOpen = _state.isOpen,
 
-      return React.createElement(
-        React.Fragment,
-        null,
-        isOpen && React.createElement(
-          Portal$3,
-          null,
-          React.createElement(
-            'span',
-            { className: animate ? 'react-tooltip-absolute-container react-tooltip-' + id + ' ' + animation : 'react-tooltip-absolute-container react-tooltip-' + id, style: this.state.divStyle, onClick: closeOnClick ? null : function (e) {
-                return e.stopPropagation();
-              }, onTouchStart: function onTouchStart(e) {
-                return e.stopPropagation();
-              } },
-            children
-          )
-        )
-      );
+
+      var inputChildren = React.Children.map(children, function (child, index) {
+        if (child.type.name === "Select") {
+          return React.cloneElement(child, { detect: detect, openMenu: _this3.openMenu, closeMenu: _this3.closeMenu, timeOutFunc: _this3.timeOutFunc, resize: _this3.resize });
+        } else {
+          return React.createElement(
+            React.Fragment,
+            null,
+            isOpen && React.createElement(
+              Portal$3,
+              null,
+              React.createElement(
+                'span',
+                {
+                  ref: _this3.tooltip,
+                  className: animate ? 'react-tooltip-absolute-container react-tooltip-' + id + ' ' + animation : 'react-tooltip-absolute-container react-tooltip-' + id,
+                  style: _this3.state.divStyle,
+                  onClick: closeOnClick ? null : function (e) {
+                    return e.stopPropagation();
+                  },
+                  onTouchEnd: function onTouchEnd(e) {
+                    return e.stopPropagation();
+                  },
+                  onMouseEnter: detect === "hover-interact" ? _this3.clearTimeoutFunc : undefined,
+                  onMouseLeave: detect === "hover-interact" ? _this3.closeMenu : undefined },
+                React.cloneElement(child)
+              )
+            )
+          );
+        }
+      });
+      return inputChildren;
     }
@@ -1295,6 +1257,6 @@ }], [{
   }]);
-  return ToolTipMenu;
+  return ToolTipController;
 }(React.PureComponent);
 
-ToolTipMenu.defaultProps = {
+ToolTipController.defaultProps = {
   offsetX: 0,
@@ -1314,3 +1276,80 @@ offsetY: 0,
 
-export default ToolTipMenu;
+var Select = function (_React$Component) {
+  inherits(Select, _React$Component);
+
+  function Select(props) {
+    classCallCheck(this, Select);
+
+    var _this = possibleConstructorReturn(this, (Select.__proto__ || Object.getPrototypeOf(Select)).call(this, props));
+
+    _this.resize = function () {
+      _this.props.resize(_this.getElementBounding(), _this.refs.selector);
+    };
+
+    _this.getElementBounding = function () {
+      var rect = ReactDOM.findDOMNode(_this.selector.current).getBoundingClientRect();
+      return { left: rect.left, top: rect.top, height: rect.height, width: rect.width };
+    };
+
+    _this.selector = React.createRef();
+    return _this;
+  }
+
+  createClass(Select, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.resize();
+      window.addEventListener('resize', this.resize);
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      window.removeEventListener('resize', this.resize);
+    }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      this.resize();
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          detect = _props.detect,
+          openMenu = _props.openMenu,
+          closeMenu = _props.closeMenu,
+          timeOutFunc = _props.timeOutFunc;
+
+      if (detect === "click") {
+        return React.createElement(
+          React.Fragment,
+          null,
+          React.cloneElement(this.props.children, { ref: this.selector, onClick: openMenu, onTouchEnd: openMenu })
+        );
+      } else if (detect === 'hover') {
+        return React.createElement(
+          React.Fragment,
+          null,
+          React.cloneElement(this.props.children, { ref: this.selector, onMouseEnter: openMenu, onMouseLeave: closeMenu, onTouchEnd: openMenu })
+        );
+      } else if (detect === 'hover-hold') {
+        return React.createElement(
+          React.Fragment,
+          null,
+          React.cloneElement(this.props.children, { ref: this.selector, onMouseEnter: openMenu, onTouchEnd: openMenu })
+        );
+      } else if (detect === 'hover-interact') {
+        return React.createElement(
+          React.Fragment,
+          null,
+          React.cloneElement(this.props.children, { ref: this.selector, onMouseEnter: openMenu, onMouseLeave: timeOutFunc, onTouchEnd: openMenu })
+        );
+      }
+      return null;
+    }
+  }]);
+  return Select;
+}(React.Component);
+
+export { ToolTipController, Select };
 //# sourceMappingURL=index.es.js.map

dist/index.js

 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
@@ -1032,17 +1034,11 @@
 
-var ToolTipMenu = function (_React$PureComponent) {
-  inherits(ToolTipMenu, _React$PureComponent);
+var ToolTipController = function (_React$PureComponent) {
+  inherits(ToolTipController, _React$PureComponent);
 
-  function ToolTipMenu() {
-    var _ref;
+  function ToolTipController(props) {
+    classCallCheck(this, ToolTipController);
 
-    var _temp, _this, _ret;
+    var _this = possibleConstructorReturn(this, (ToolTipController.__proto__ || Object.getPrototypeOf(ToolTipController)).call(this, props));
 
-    classCallCheck(this, ToolTipMenu);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = ToolTipMenu.__proto__ || Object.getPrototypeOf(ToolTipMenu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+    _this.state = {
       divStyle: {
@@ -1059,9 +1055,12 @@ position: "absolute",
       timeOutID: null,
+      tooltipWidth: 0,
       trigger: _this.props.triggerClose
-    }, _this.openMenu = function (e) {
+    };
+
+    _this.openMenu = function (e) {
       e.preventDefault();
       if (!_this.state.animate) {
 
-        //Set timeout for menu to clos automatically
-        if (_this.props.timeOut !== null && _this.props.detect !== "hover-interactable") {
+        //Set timeout for menu to close automatically
+        if (_this.props.timeOut !== null && _this.props.detect !== "hover-interact") {
           var timeOutID = setTimeout(function () {
@@ -1088,11 +1087,11 @@ return _this.closeMenu();
             //Add the pointer events from all the active DIVs
-            var element = document.querySelector('.react-tooltip-' + _this.props.id);
-            element.style.pointerEvents = "auto";
+            _this.tooltip.current.style.pointerEvents = "auto";
           }, 0);
         }
       }
-    }, _this.closeMenu = function (e) {
+    };
 
+    _this.closeMenu = function () {
       // Clear time out
-      if (_this.props.timeOut !== null && _this.props.detect !== "hover-interactable") {
+      if (_this.props.timeOut !== null && _this.props.detect !== "hover-interact") {
         clearTimeout(_this.state.timeOutID);
@@ -1112,4 +1111,3 @@ }
           //Remove pointer events from all the active DIVs
-          var element = document.querySelector('.react-tooltip-' + _this.props.id);
-          element.style.pointerEvents = "none";
+          _this.tooltip.current.style.pointerEvents = "none";
         } else {
@@ -1125,83 +1123,39 @@ if (_this.props.returnState !== null) {
       }
-    }, _this.getElementBounding = function () {
-      var element = document.querySelector('.' + _this.props.select);
-      var rect = element.getBoundingClientRect();
-      var elementHeight = element.clientHeight;
-      var elemnetWidth = element.clientWidth;
-      return { left: rect.left, top: rect.top, height: elementHeight, width: elemnetWidth };
-    }, _this.resize = function () {
-      //this.forceUpdate()
+    };
+
+    _this.timeOutFunc = function () {
+      var timeOutID = setTimeout(function () {
+        return _this.closeMenu();
+      }, _this.props.timeOut);
+      _this.setState({ timeOutID: timeOutID });
+    };
+
+    _this.clearTimeoutFunc = function () {
+      clearTimeout(_this.state.timeOutID);
+    };
+
+    _this.resize = function (getElementBounding, selector) {
       var _this$props = _this.props,
           offsetX = _this$props.offsetX,
-          offsetY = _this$props.offsetY,
-          width = _this$props.width;
+          offsetY = _this$props.offsetY;
 
 
-      var element = document.querySelector('.' + _this.props.select);
-
       if (offsetX === "center" || offsetX === "centre") {
         _this.setState(produce(function (draft) {
-          draft.divStyle.left = _this.getElementBounding().left + (element.offsetWidth - width) / 2;
-          draft.divStyle.top = _this.getElementBounding().top + _this.getElementBounding().height + offsetY + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
+          draft.divStyle.left = getElementBounding.left + (getElementBounding.width - _this.state.tooltipWidth) / 2;
+          draft.divStyle.top = getElementBounding.top + getElementBounding.height + offsetY + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
         }));
       } else {
         _this.setState(produce(function (draft) {
-          draft.divStyle.left = _this.getElementBounding().left + offsetX;
-          draft.divStyle.top = _this.getElementBounding().top + _this.getElementBounding().height + offsetY + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
+          draft.divStyle.left = getElementBounding.left + offsetX;
+          draft.divStyle.top = getElementBounding.top + getElementBounding.height + offsetY + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
         }));
       }
-    }, _this.attachEvents = function () {
-      //Listen to page resize
-      window.addEventListener('resize', _this.resize);
+    };
 
-      var element = document.querySelector('.' + _this.props.select);
-
-      //Add eventlistener to triggering DOM element in accordance with the selected action
-      if (_this.props.detect === "click") {
-        element.addEventListener('click', _this.openMenu);
-        element.addEventListener('touchstart', _this.openMenu);
-      } else if (_this.props.detect === "hover") {
-        element.addEventListener('mouseenter', _this.openMenu);
-        element.addEventListener('mouseleave', _this.closeMenu);
-      } else if (_this.props.detect === "hover-hold") {
-        element.addEventListener('mouseenter', _this.openMenu);
-      } else if (_this.props.detect === "hover-interactable") {
-        element.addEventListener('mouseenter', _this.openMenu);
-        element.addEventListener('mouseleave', function () {
-          return _this.timeOutFunc();
-        });
-      }
-
-      //Position the menu
-      _this.resize();
-    }, _this.timeOutFunc = function () {
-      var timeOutID = setTimeout(function () {
-        return _this.closeMenu();
-      }, _this.props.timeOut);
-      _this.setState({ timeOutID: timeOutID });
-
-      if (_this.props.detect === "hover-interactable") {
-        var tooltip = document.querySelector('.react-tooltip-' + _this.props.id);
-        if (tooltip) {
-          tooltip.addEventListener('mouseenter', function () {
-            return clearTimeout(_this.state.timeOutID);
-          });
-          tooltip.addEventListener('mouseleave', _this.closeMenu);
-        }
-      }
-    }, _temp), possibleConstructorReturn(_this, _ret);
+    _this.tooltip = React.createRef();
+    return _this;
   }
 
-  // Returns the position and size data of the triggering DOM element
-
-
-  //Change the position of the menu dynamically when the page is resized
-
-
-  createClass(ToolTipMenu, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this.attachEvents();
-    }
-  }, {
+  createClass(ToolTipController, [{
     key: 'componentDidUpdate',
@@ -1211,3 +1165,5 @@ value: function componentDidUpdate(prevProp, prevState) {
 
-      this.resize();
+      if (this.state.isOpen) {
+        this.setState({ tooltipWidth: this.tooltip.current.getBoundingClientRect().width });
+      }
 
@@ -1220,16 +1176,16 @@ if (prevProp.triggerClose !== this.props.triggerClose) {
         if (_this2.props.animation !== "") {
-          if (_this2.state.animate && _this2.props.detect !== "hover") {
+          if (_this2.state.animate) {
             window.addEventListener('click', _this2.closeMenu);
-            window.addEventListener('touchstart', _this2.closeMenu);
+            window.addEventListener('touchend', _this2.closeMenu);
           } else {
             window.removeEventListener('click', _this2.closeMenu);
-            window.removeEventListener('touchstart', _this2.closeMenu);
+            window.removeEventListener('touchend', _this2.closeMenu);
           }
         } else {
-          if (_this2.state.isOpen && _this2.props.detect !== "hover") {
+          if (_this2.state.isOpen) {
             window.addEventListener('click', _this2.closeMenu);
-            window.addEventListener('touchstart', _this2.closeMenu);
+            window.addEventListener('touchend', _this2.closeMenu);
           } else {
             window.removeEventListener('click', _this2.closeMenu);
-            window.removeEventListener('touchstart', _this2.closeMenu);
+            window.removeEventListener('touchend', _this2.closeMenu);
           }
@@ -1242,14 +1198,4 @@ }
     value: function componentWillUnmount() {
-
-      var element = document.querySelector('.' + this.props.select);
-      window.removeEventListener('resize', this.resize);
-      if (this.props.detect === "click") {
-        element.removeEventListener('click', this.openMenu);
-        element.removeEventListener('touchstart', this.openMenu);
-      } else if (this.props.detect === "hover") {
-        element.removeEventListener('mouseenter', this.openMenu);
-        element.removeEventListener('mouseleave', this.closeMenu);
-      } else if (this.props.detect === "hover-hold") {
-        element.removeEventListener('mouseenter', this.openMenu);
-      }
+      window.removeEventListener('click', this.closeMenu);
+      window.removeEventListener('touchstart', this.closeMenu);
     }
@@ -1259,2 +1205,4 @@ }, {
     value: function render() {
+      var _this3 = this;
+
       var _props = this.props,
@@ -1264,3 +1212,4 @@ id = _props.id,
           animation = _props.animation,
-          closeOnClick = _props.closeOnClick;
+          closeOnClick = _props.closeOnClick,
+          detect = _props.detect;
       var _state = this.state,
@@ -1270,19 +1219,34 @@ isOpen = _state.isOpen,
 
-      return React.createElement(
-        React.Fragment,
-        null,
-        isOpen && React.createElement(
-          Portal$3,
-          null,
-          React.createElement(
-            'span',
-            { className: animate ? 'react-tooltip-absolute-container react-tooltip-' + id + ' ' + animation : 'react-tooltip-absolute-container react-tooltip-' + id, style: this.state.divStyle, onClick: closeOnClick ? null : function (e) {
-                return e.stopPropagation();
-              }, onTouchStart: function onTouchStart(e) {
-                return e.stopPropagation();
-              } },
-            children
-          )
-        )
-      );
+
+      var inputChildren = React.Children.map(children, function (child, index) {
+        if (child.type.name === "Select") {
+          return React.cloneElement(child, { detect: detect, openMenu: _this3.openMenu, closeMenu: _this3.closeMenu, timeOutFunc: _this3.timeOutFunc, resize: _this3.resize });
+        } else {
+          return React.createElement(
+            React.Fragment,
+            null,
+            isOpen && React.createElement(
+              Portal$3,
+              null,
+              React.createElement(
+                'span',
+                {
+                  ref: _this3.tooltip,
+                  className: animate ? 'react-tooltip-absolute-container react-tooltip-' + id + ' ' + animation : 'react-tooltip-absolute-container react-tooltip-' + id,
+                  style: _this3.state.divStyle,
+                  onClick: closeOnClick ? null : function (e) {
+                    return e.stopPropagation();
+                  },
+                  onTouchEnd: function onTouchEnd(e) {
+                    return e.stopPropagation();
+                  },
+                  onMouseEnter: detect === "hover-interact" ? _this3.clearTimeoutFunc : undefined,
+                  onMouseLeave: detect === "hover-interact" ? _this3.closeMenu : undefined },
+                React.cloneElement(child)
+              )
+            )
+          );
+        }
+      });
+      return inputChildren;
     }
@@ -1299,6 +1263,6 @@ }], [{
   }]);
-  return ToolTipMenu;
+  return ToolTipController;
 }(React.PureComponent);
 
-ToolTipMenu.defaultProps = {
+ToolTipController.defaultProps = {
   offsetX: 0,
@@ -1318,3 +1282,81 @@ offsetY: 0,
 
-module.exports = ToolTipMenu;
+var Select = function (_React$Component) {
+  inherits(Select, _React$Component);
+
+  function Select(props) {
+    classCallCheck(this, Select);
+
+    var _this = possibleConstructorReturn(this, (Select.__proto__ || Object.getPrototypeOf(Select)).call(this, props));
+
+    _this.resize = function () {
+      _this.props.resize(_this.getElementBounding(), _this.refs.selector);
+    };
+
+    _this.getElementBounding = function () {
+      var rect = ReactDOM.findDOMNode(_this.selector.current).getBoundingClientRect();
+      return { left: rect.left, top: rect.top, height: rect.height, width: rect.width };
+    };
+
+    _this.selector = React.createRef();
+    return _this;
+  }
+
+  createClass(Select, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.resize();
+      window.addEventListener('resize', this.resize);
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      window.removeEventListener('resize', this.resize);
+    }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      this.resize();
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          detect = _props.detect,
+          openMenu = _props.openMenu,
+          closeMenu = _props.closeMenu,
+          timeOutFunc = _props.timeOutFunc;
+
+      if (detect === "click") {
+        return React.createElement(
+          React.Fragment,
+          null,
+          React.cloneElement(this.props.children, { ref: this.selector, onClick: openMenu, onTouchEnd: openMenu })
+        );
+      } else if (detect === 'hover') {
+        return React.createElement(
+          React.Fragment,
+          null,
+          React.cloneElement(this.props.children, { ref: this.selector, onMouseEnter: openMenu, onMouseLeave: closeMenu, onTouchEnd: openMenu })
+        );
+      } else if (detect === 'hover-hold') {
+        return React.createElement(
+          React.Fragment,
+          null,
+          React.cloneElement(this.props.children, { ref: this.selector, onMouseEnter: openMenu, onTouchEnd: openMenu })
+        );
+      } else if (detect === 'hover-interact') {
+        return React.createElement(
+          React.Fragment,
+          null,
+          React.cloneElement(this.props.children, { ref: this.selector, onMouseEnter: openMenu, onMouseLeave: timeOutFunc, onTouchEnd: openMenu })
+        );
+      }
+      return null;
+    }
+  }]);
+  return Select;
+}(React.Component);
+
+exports.ToolTipController = ToolTipController;
+exports.Select = Select;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-tooltip-controller",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A feature-rich React component for controlling tooltips",
@@ -5,0 +5,0 @@ "author": "Dogacan Bilgili",

README.md

@@ -5,5 +5,7 @@ # React-Tooltip-Controller
 
- Visit the [examples page](https://dbilgili.github.io/React-Tooltip-Controller/) to discover all the functionalities.
+ It seamlessly integrates into your markup without breaking it.
 
+ Visit the [examples page](https://dbilgili.github.io/React-Tooltip-Controller/) to discover the functionalities.
 
+
  | Basic Tooltip | Animated Tooltip | Advanced Tooltip |
@@ -15,10 +17,10 @@ |---|---|---|
 #### Highlights
-- Supports `click`, `hover`, `hover-hold` and `hover-interactable` detection.
-- You can individually animate each tooltip.
-- You can set whether the tooltip closes when clicked on it.
-- You can assign a variable to close the tooltip manually.
-- You can retrieve the state of the tooltip (whether open or not).
-- You can set a timeout to automatically close the tooltip.
-- You can position the tooltip relative to the triggering element.
-- You can automatically center the tooltip along the X axis for dynamically sized elements.
+- Supports `click`, `hover`, `hover-hold` and `hover-interact` detections.
+- Each tooltip can be animated individually.
+- Set whether the tooltip closes when clicked on it.
+- Close the tooltip manually by assigning a variable.
+- Retrieve the state of the tooltip (whether open or not).
+- Set a timeout to automatically close the tooltip.
+- Position the tooltip relative to the triggering element.
+- Automatically center the tooltip along the X axis for dynamically sized elements.
 
@@ -29,6 +31,6 @@ ## Installing
 
-After installing the module, import it:
+After installing the module, import the following components:
 
 ```javascript
-import ToolTipController from 'react-tooltip-controller'
+import {ToolTipController, Select} from 'react-tooltip-controller'
 ```
@@ -39,9 +41,13 @@
 ```html
-<button className="random-classname">Click me</button>
-
 <ToolTipController
-  select="random-classname"
   detect="click"
+  offsetY="center"
   offsetY={20}>
 
+  // Selects the element controlling the tooltip
+  <Select>
+    <button>Click me</button>
+  </Select>
+
+  // Custom tooltip component
   <TooltipComponent/>
@@ -52,7 +58,7 @@
 
-Anything wrapped by `<ToolTipController>` is portalled to the bottom of the `<body>` tag in the DOM.
+Anything, but `<Select>` component, wrapped by `<ToolTipController>` is portalled to the bottom of the `<body>` tag in the DOM.
 
 You can either wrap a component or JSX Markup with `<ToolTipController>`.
 
-By referring to the `className` property of the `<button>`, `<TooltipComponent/>` is attached to `<button>` and set to be triggered by a `click` action.
+By wrapping the `<button>` with `<Select>` component, `<TooltipComponent/>` is attached to `<button>` and set to be triggered by a `click` event.
 
@@ -65,12 +71,10 @@ By default, the tooltip wrapped is positioned relative to the left-bottom of the selected element.
 |------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------|---------|-----------------|
-| id         | Assigns an ID number to the tooltip container class to be able to distinguish between multiple tooltips                                                                                                | E.g. `"1"`, `"2"`                          | null    | String          |
-| select     | `className` of the element that will control the tooltip                                                                                                                     | -                                      | -       | String          |
-| detect     | Determines how to trigger the tooltip. Note that `timeOut` and `id` props should be defined in order to use the `"hover-interactable”` option                                                                                                                                      | `"click"`,<br/>`"hover"`,<br/>`"hover-hold"`,<br/>`"hover-interactable”`         | `"click"` | String          |
+| id         | Assigns an ID number to the tooltip container class to be able to distinguish between multiple tooltips. Required for CSS animations on tooltip                                                                                                | E.g. `"1"`, `"2"`                          | null    | String          |
+| detect     | Determines how to trigger the tooltip. Note that `timeOut` prop should be defined in order to use the `"hover-interact”` option                                                                                                                                      | `"click"`,<br/>`"hover"`,<br/>`"hover-hold"`,<br/>`"hover-interact”`         | `"click"` | String          |
 | closeOnClick | Determines whether the tooltip closes when clicked on it                                                                                                                     | `true`, `false`                            | `true`    | Boolean         |
 | triggerClose | A Boolean value of `true` closes the tooltip manually                                                                                                                      | Boolean variable                            |-    | Boolean         |
 | returnState | Returns the state of the tooltip - If it’s open or not | Function | - | Function
-| timeOut    | Determines if the tooltip closes automatically after a certain amount of time in milliseconds.                                                                              | positive integers                      | null    | Integer         |
+| timeOut    | Determines if the tooltip closes automatically after a certain amount of time in milliseconds                                                                              | positive integers                      | null    | Integer         |
 | offsetX    | Determines the offset along the X axis relative to left bottom of the element                                                                                              | positive/negative integers             | 0       | Integer         |
-| offsetY    | Determines the offset along the Y axis relative to left bottom of the element. If set to `"center"` along with `width` prop, automatically aligns to middle of the triggering element | positive/negative integers or `"center"` | 0       | Integer, String |
-| width      | Width value of the __tooltip__<br/>Required for `offsetX = "center"`                                                                                                                               | positive integers                      | null    | Integer         |
+| offsetY    | Determines the offset along the Y axis relative to left bottom of the element. If set to `"center"`, automatically aligns to middle of the triggering element | positive/negative integers or `"center"` | 0       | Integer, String |
 | animation  | Determines the name of the animation class                                                                                                                                 | -                                      | null    | String          |
@@ -81,2 +85,4 @@ | duration   | Determines the duration of the animation in units of milliseconds(ms) or seconds(s)                                                                                     | E.g. `"500ms"` or `"0.5s"`                 | null    | String          |
 
+_Note: Hover events act as a click event on touch devices._
+
 ## Examples
@@ -88,4 +94,3 @@
 import React, { Component } from 'react'
-import ToolTipController from 'react-tooltip-controller'
-import './styles/main.css'
+import {ToolTipController, Select} from 'react-tooltip-controller'
 
@@ -102,8 +107,12 @@ const ToolTip = () =>
       <div className="App">
-        <button className="btn">Hello There</button>
 
         <ToolTipController
-          select="btn"
           detect="hover">
+
+          <Select>
+            <button>Hello There</button>
+          </Select>
+
           <ToolTip/>
+
         </ToolTipController>
@@ -136,4 +145,4 @@
 import React, { Component } from 'react'
-import ToolTipController from 'react-tooltip-controller'
-import './styles/main.css'
+import {ToolTipController, Select} from 'react-tooltip-controller'
+import './styles/animation.css'
 
@@ -150,7 +159,5 @@ const ToolTip = () =>
       <div className="App">
-        <button className="btn">Hello There</button>
 
         <ToolTipController
           id="1"
-          select="btn"
           detect="hover"
@@ -161,3 +168,9 @@ animation="fadeIn"
           properties={["opacity", "transform"]}>
+
+          <Select>
+            <button>Hello There</button>
+          </Select>
+
           <ToolTip/>
+
         </ToolTipController>
@@ -174,7 +187,7 @@
 
-Note that `react-tooltip` is a built-in class name and since the `id` prop is set to `"1"`, we refer to this tooltip with the specific class name of `react-tooltip-1`.
+Note that `react-tooltip` is a built-in class name and since the `id` prop is set to `"1"`, it is referred with the specific class name of `react-tooltip-1`.
 
 Always set the `id` prop for the animated tooltips in order to prevent any class name conflicts.
 
-__Side note:__ _If you don't set the `properties` prop, all the properties for the tooltip animates. This is prominent when you resize the browser window as the tooltip is open._
+__Side note:__ _If you don't set the `properties` prop, all the properties for the tooltip animates. This results in position animations when the browser is resized._
 
@@ -185,4 +198,3 @@ ### Use of `triggerClose` prop
 import React, { Component } from 'react'
-import ToolTipController from 'react-tooltip-controller'
-import './styles/main.css'
+import {ToolTipController, Select} from 'react-tooltip-controller'
 
@@ -209,10 +221,14 @@ const ToolTip = (props) =>
       <div className="App">
-        <button className="btn">Hello There</button>
 
         <ToolTipController
-          select="btn"
           detect="click"
           closeOnClick={false}
           triggerClose={this.state.trigger}>
+
+          <Select>
+            <button>Hello There</button>
+          </Select>
+
           <ToolTip closeTriggerFunction={this.close}/>
+
         </ToolTipController>
@@ -231,3 +247,3 @@
 
-This example demonstrates how to close the tooltip by setting the state of the triggering variable to `true`. To prevent the other click actions on the tooltip from closing it, `closeOnClick` is set to `false`. Note that clicking outside of the tooltip closes it independent of the `triggerClose` prop.
+This example demonstrates how to close the tooltip by setting the state of the triggering variable to `true`. To prevent the other click events on the tooltip from closing it, `closeOnClick` is set to `false`. Note that clicking outside of the tooltip closes it independent of the `triggerClose` prop.
 
@@ -238,4 +254,3 @@ ### Use of `returnState` prop
 import React, { Component } from 'react'
-import ToolTipController from 'react-tooltip-controller'
-import './styles/main.css'
+import {ToolTipController, Select} from 'react-tooltip-controller'
 
@@ -260,3 +275,2 @@ const ToolTip = (props) =>
       <div className="App">
-        <button className="btn">Hello There</button>
 
@@ -267,3 +281,9 @@ <ToolTipController
           returnState={this.getTooltipState}>
+
+          <Select>
+            <button>Hello There</button>
+          </Select>
+
           <ToolTip/>
+
         </ToolTipController>
@@ -270,0 +290,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

287289

increased by0.79%

Lines of code

2348

increased by3.25%

Number of lines in readme file

286

increased by7.52%

No dependency changes