react-hint - npm Package Compare versions

Comparing version 3.2.0 to 3.2.1

CHANGELOG.md

@@ -0,1 +1,4 @@
+## 3.2.1 (April 2, 2021)
+* #49: Fix ininite re-renders during tooltip positioning
+
 ## 3.2.0 (December 5, 2018)
@@ -2,0 +5,0 @@ * #29: Allow setting different show & hide delay

lib/index.js

@@ -1,232 +0,280 @@
-'use strict';
+"use strict";
 
 exports.__esModule = true;
+exports["default"] = void 0;
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
-exports.default = function (_ref) {
-	var _class, _temp2;
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-	var Component = _ref.Component,
-	    createElement = _ref.createElement;
-	return _temp2 = _class = function (_Component) {
-		_inherits(ReactHint, _Component);
+var _default = function _default(_ref) {
+  var _class, _temp;
 
-		function ReactHint() {
-			var _temp, _this, _ret;
+  var Component = _ref.Component,
+      createElement = _ref.createElement,
+      createRef = _ref.createRef;
+  return _temp = _class = /*#__PURE__*/function (_Component) {
+    _inheritsLoose(ReactHint, _Component);
 
-			_classCallCheck(this, ReactHint);
+    function ReactHint() {
+      var _this;
 
-			for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-				args[_key] = arguments[_key];
-			}
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
 
-			return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = { target: null }, _this._containerStyle = { position: 'relative' }, _this.toggleEvents = function (_ref2, flag) {
-				var events = _ref2.events,
-				    _ref2$events = _ref2.events,
-				    click = _ref2$events.click,
-				    focus = _ref2$events.focus,
-				    hover = _ref2$events.hover;
+      _this = _Component.call.apply(_Component, [this].concat(args)) || this;
 
-				var action = flag ? 'addEventListener' : 'removeEventListener';
-				var hasEvents = events === true;(click || hasEvents) && document[action]('click', _this.toggleHint);(focus || hasEvents) && document[action]('focusin', _this.toggleHint);(hover || hasEvents) && document[action]('mouseover', _this.toggleHint);(click || hover || hasEvents) && document[action]('touchend', _this.toggleHint);
-			}, _this.toggleHint = function () {
-				var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-				    _ref3$target = _ref3.target,
-				    target = _ref3$target === undefined ? null : _ref3$target;
+      _defineProperty(_assertThisInitialized(_this), "_hint", createRef());
 
-				target = _this.getHint(target);
-				clearTimeout(_this._timeout);
-				_this._timeout = setTimeout(function () {
-					return _this.setState(function () {
-						return { target: target };
-					});
-				}, target === null ? _this.props.delay.hide === undefined ? _this.props.delay : _this.props.delay.hide : _this.props.delay.show === undefined ? _this.props.delay : _this.props.delay.show);
-			}, _this.getHint = function (el) {
-				var _this$props = _this.props,
-				    attribute = _this$props.attribute,
-				    persist = _this$props.persist;
-				var target = _this.state.target;
+      _defineProperty(_assertThisInitialized(_this), "_container", createRef());
 
+      _defineProperty(_assertThisInitialized(_this), "state", {
+        target: null,
+        hidden: true
+      });
 
-				while (el) {
-					if (el === document) break;
-					if (persist && el === _this._hint) return target;
-					if (el.hasAttribute(attribute)) return el;
-					el = el.parentNode;
-				}return null;
-			}, _this.shallowEqual = function (a, b) {
-				var keys = Object.keys(a);
-				return keys.length === Object.keys(b).length && keys.reduce(function (result, key) {
-					return result && (typeof a[key] === 'function' && typeof b[key] === 'function' || a[key] === b[key]);
-				}, true);
-			}, _this.getHintData = function (_ref4, _ref5) {
-				var target = _ref4.target;
-				var attribute = _ref5.attribute,
-				    autoPosition = _ref5.autoPosition,
-				    position = _ref5.position;
+      _defineProperty(_assertThisInitialized(_this), "target", null);
 
-				var content = target.getAttribute(attribute) || '';
-				var at = target.getAttribute(attribute + '-at') || position;
+      _defineProperty(_assertThisInitialized(_this), "placement", null);
 
-				var _this$_container$getB = _this._container.getBoundingClientRect(),
-				    containerTop = _this$_container$getB.top,
-				    containerLeft = _this$_container$getB.left;
+      _defineProperty(_assertThisInitialized(_this), "_containerStyle", {
+        position: 'relative'
+      });
 
-				var _this$_hint$getBoundi = _this._hint.getBoundingClientRect(),
-				    hintWidth = _this$_hint$getBoundi.width,
-				    hintHeight = _this$_hint$getBoundi.height;
+      _defineProperty(_assertThisInitialized(_this), "toggleEvents", function (_ref2, flag) {
+        var events = _ref2.events,
+            _ref2$events = _ref2.events,
+            click = _ref2$events.click,
+            focus = _ref2$events.focus,
+            hover = _ref2$events.hover;
+        var action = flag ? 'addEventListener' : 'removeEventListener';
+        var hasEvents = events === true;
+        (click || hasEvents) && document[action]('click', _this.toggleHint);
+        (focus || hasEvents) && document[action]('focusin', _this.toggleHint);
+        (hover || hasEvents) && document[action]('mouseover', _this.toggleHint);
+        (click || hover || hasEvents) && document[action]('touchend', _this.toggleHint);
+      });
 
-				var _target$getBoundingCl = target.getBoundingClientRect(),
-				    targetTop = _target$getBoundingCl.top,
-				    targetLeft = _target$getBoundingCl.left,
-				    targetWidth = _target$getBoundingCl.width,
-				    targetHeight = _target$getBoundingCl.height;
+      _defineProperty(_assertThisInitialized(_this), "toggleHint", function (_temp2) {
+        var _ref3 = _temp2 === void 0 ? {} : _temp2,
+            _ref3$target = _ref3.target,
+            target = _ref3$target === void 0 ? null : _ref3$target;
 
-				if (autoPosition) {
-					var isHoriz = ['left', 'right'].includes(at);
+        target = _this.getHint(target);
+        clearTimeout(_this._timeout);
+        _this._timeout = setTimeout(function () {
+          _this.target = target;
 
-					var _document$documentEle = document.documentElement,
-					    clientHeight = _document$documentEle.clientHeight,
-					    clientWidth = _document$documentEle.clientWidth;
+          if (_this.target) {
+            _this.placement = null;
+          }
 
+          _this.getHintData();
+        }, target === null ? _this.props.delay.hide === undefined ? _this.props.delay : _this.props.delay.hide : _this.props.delay.show === undefined ? _this.props.delay : _this.props.delay.show);
+      });
 
-					var directions = {
-						left: (isHoriz ? targetLeft - hintWidth : targetLeft + (targetWidth - hintWidth >> 1)) > 0,
-						right: (isHoriz ? targetLeft + targetWidth + hintWidth : targetLeft + (targetWidth + hintWidth >> 1)) < clientWidth,
-						bottom: (isHoriz ? targetTop + (targetHeight + hintHeight >> 1) : targetTop + targetHeight + hintHeight) < clientHeight,
-						top: (isHoriz ? targetTop - (hintHeight >> 1) : targetTop - hintHeight) > 0
-					};
+      _defineProperty(_assertThisInitialized(_this), "getHint", function (el) {
+        var _this$props = _this.props,
+            attribute = _this$props.attribute,
+            persist = _this$props.persist;
+        var target = _this.target;
 
-					switch (at) {
-						case 'left':
-							if (!directions.left) at = 'right';
-							if (!directions.top) at = 'bottom';
-							if (!directions.bottom) at = 'top';
-							break;
+        while (el) {
+          if (el === document) break;
+          if (persist && el === _this._hint.current) return target;
+          if (el.hasAttribute(attribute)) return el;
+          el = el.parentNode;
+        }
 
-						case 'right':
-							if (!directions.right) at = 'left';
-							if (!directions.top) at = 'bottom';
-							if (!directions.bottom) at = 'top';
-							break;
+        return null;
+      });
 
-						case 'bottom':
-							if (!directions.bottom) at = 'top';
-							if (!directions.left) at = 'right';
-							if (!directions.right) at = 'left';
-							break;
+      _defineProperty(_assertThisInitialized(_this), "shallowEqual", function (a, b) {
+        var keys = Object.keys(a);
+        return keys.length === Object.keys(b).length && keys.reduce(function (result, key) {
+          return result && (typeof a[key] === 'function' && typeof b[key] === 'function' || a[key] === b[key]);
+        }, true);
+      });
 
-						case 'top':
-						default:
-							if (!directions.top) at = 'bottom';
-							if (!directions.left) at = 'right';
-							if (!directions.right) at = 'left';
-							break;
-					}
-				}
+      _defineProperty(_assertThisInitialized(_this), "getHintData", function () {
+        if (!_this.target) {
+          _this.setState({
+            hidden: true
+          });
 
-				var top = void 0,
-				    left = void 0;
-				switch (at) {
-					case 'left':
-						top = targetHeight - hintHeight >> 1;
-						left = -hintWidth;
-						break;
+          return;
+        }
 
-					case 'right':
-						top = targetHeight - hintHeight >> 1;
-						left = targetWidth;
-						break;
+        var _this$props2 = _this.props,
+            attribute = _this$props2.attribute,
+            autoPosition = _this$props2.autoPosition,
+            position = _this$props2.position;
+        var content = _this.target.getAttribute(attribute) || '';
+        var at = _this.placement || _this.target.getAttribute(attribute + "-at") || position;
 
-					case 'bottom':
-						top = targetHeight;
-						left = targetWidth - hintWidth >> 1;
-						break;
+        var _this$_container$curr = _this._container.current.getBoundingClientRect(),
+            containerTop = _this$_container$curr.top,
+            containerLeft = _this$_container$curr.left;
 
-					case 'top':
-					default:
-						top = -hintHeight;
-						left = targetWidth - hintWidth >> 1;
-				}
+        var _this$_hint$current$g = _this._hint.current.getBoundingClientRect(),
+            hintWidth = _this$_hint$current$g.width,
+            hintHeight = _this$_hint$current$g.height;
 
-				return {
-					content: content, at: at,
-					top: top + targetTop - containerTop | 0,
-					left: left + targetLeft - containerLeft | 0
-				};
-			}, _temp), _possibleConstructorReturn(_this, _ret);
-		}
+        var _this$target$getBound = _this.target.getBoundingClientRect(),
+            targetTop = _this$target$getBound.top,
+            targetLeft = _this$target$getBound.left,
+            targetWidth = _this$target$getBound.width,
+            targetHeight = _this$target$getBound.height;
 
-		ReactHint.prototype.componentDidMount = function componentDidMount() {
-			this.toggleEvents(this.props, true);
-		};
+        if (autoPosition && !_this.placement) {
+          var isHoriz = ['left', 'right'].includes(at);
+          var _document$documentEle = document.documentElement,
+              clientHeight = _document$documentEle.clientHeight,
+              clientWidth = _document$documentEle.clientWidth;
+          var directions = {
+            left: (isHoriz ? targetLeft - hintWidth : targetLeft + (targetWidth - hintWidth >> 1)) > 0,
+            right: (isHoriz ? targetLeft + targetWidth + hintWidth : targetLeft + (targetWidth + hintWidth >> 1)) < clientWidth,
+            bottom: (isHoriz ? targetTop + (targetHeight + hintHeight >> 1) : targetTop + targetHeight + hintHeight) < clientHeight,
+            top: (isHoriz ? targetTop - (hintHeight >> 1) : targetTop - hintHeight) > 0
+          };
 
-		ReactHint.prototype.componentWillUnmount = function componentWillUnmount() {
-			this.toggleEvents(this.props, false);
-			clearTimeout(this._timeout);
-		};
+          if (!at || !directions[at]) {
+            switch (at) {
+              case 'left':
+                if (!directions.left) at = 'right';
+                if (!directions.top) at = 'bottom';
+                if (!directions.bottom) at = 'top';
+                break;
 
-		ReactHint.prototype.shouldComponentUpdate = function shouldComponentUpdate(props, state) {
-			return !this.shallowEqual(state, this.state) || !this.shallowEqual(props, this.props);
-		};
+              case 'right':
+                if (!directions.right) at = 'left';
+                if (!directions.top) at = 'bottom';
+                if (!directions.bottom) at = 'top';
+                break;
 
-		ReactHint.prototype.componentDidUpdate = function componentDidUpdate() {
-			if (this.state.target) this.setState(this.getHintData);
-		};
+              case 'bottom':
+                if (!directions.bottom) at = 'top';
+                if (!directions.left) at = 'right';
+                if (!directions.right) at = 'left';
+                break;
 
-		ReactHint.prototype.render = function render() {
-			var _this2 = this;
+              case 'top':
+              default:
+                if (!directions.top) at = 'bottom';
+                if (!directions.left) at = 'right';
+                if (!directions.right) at = 'left';
+                break;
+            }
+          }
+        }
 
-			var _props = this.props,
-			    className = _props.className,
-			    onRenderContent = _props.onRenderContent;
-			var _state = this.state,
-			    target = _state.target,
-			    content = _state.content,
-			    at = _state.at,
-			    top = _state.top,
-			    left = _state.left;
+        var top, left;
 
+        switch (at) {
+          case 'left':
+            top = targetHeight - hintHeight >> 1;
+            left = -hintWidth;
+            break;
 
-			return createElement(
-				'div',
-				{ ref: function ref(_ref7) {
-						return _this2._container = _ref7;
-					},
-					style: this._containerStyle },
-				target && createElement(
-					'div',
-					{ className: className + ' ' + className + '--' + at,
-						ref: function ref(_ref6) {
-							return _this2._hint = _ref6;
-						},
-						role: 'tooltip',
-						style: { top: top, left: left } },
-					onRenderContent ? onRenderContent(target, content) : createElement(
-						'div',
-						{ className: className + '__content' },
-						content
-					)
-				)
-			);
-		};
+          case 'right':
+            top = targetHeight - hintHeight >> 1;
+            left = targetWidth;
+            break;
 
-		return ReactHint;
-	}(Component), _class.defaultProps = {
-		attribute: 'data-rh',
-		autoPosition: false,
-		className: 'react-hint',
-		delay: 0,
-		events: false,
-		onRenderContent: null,
-		persist: false,
-		position: 'top'
-	}, _temp2;
+          case 'bottom':
+            top = targetHeight;
+            left = targetWidth - hintWidth >> 1;
+            break;
+
+          case 'top':
+          default:
+            top = -hintHeight;
+            left = targetWidth - hintWidth >> 1;
+        }
+
+        if (hintHeight > 0 || hintWidth > 0) {
+          // This prevents react-hint from rotating the placements 
+          _this.placement = at;
+        }
+
+        var newState = {
+          content: content,
+          at: at,
+          top: top + targetTop - containerTop | 0,
+          left: left + targetLeft - containerLeft | 0,
+          hidden: false
+        };
+
+        _this.setState(newState);
+      });
+
+      return _this;
+    }
+
+    var _proto = ReactHint.prototype;
+
+    _proto.componentDidMount = function componentDidMount() {
+      this.toggleEvents(this.props, true);
+    };
+
+    _proto.componentWillUnmount = function componentWillUnmount() {
+      this.toggleEvents(this.props, false);
+      clearTimeout(this._timeout);
+    };
+
+    _proto.componentDidUpdate = function componentDidUpdate() {
+      if (this.target && !this.state.hidden) {
+        this.getHintData();
+      }
+    };
+
+    _proto.shouldComponentUpdate = function shouldComponentUpdate(props, state) {
+      return !this.shallowEqual(state, this.state) || !this.shallowEqual(props, this.props);
+    };
+
+    _proto.render = function render() {
+      var _this$props3 = this.props,
+          className = _this$props3.className,
+          onRenderContent = _this$props3.onRenderContent;
+      var _this$state = this.state,
+          content = _this$state.content,
+          at = _this$state.at,
+          top = _this$state.top,
+          left = _this$state.left;
+      return createElement("div", {
+        ref: this._container,
+        style: this._containerStyle
+      }, createElement("div", {
+        className: className + " " + className + "--" + at,
+        ref: this._hint,
+        role: "tooltip",
+        style: {
+          top: top,
+          left: left,
+          display: this.target ? undefined : 'none'
+        }
+      }, this.target && (onRenderContent ? onRenderContent(this.target, content) : createElement("div", {
+        className: className + "__content"
+      }, content))));
+    };
+
+    return ReactHint;
+  }(Component), _defineProperty(_class, "defaultProps", {
+    attribute: 'data-rh',
+    autoPosition: false,
+    className: 'react-hint',
+    delay: 0,
+    events: false,
+    onRenderContent: null,
+    persist: false,
+    position: 'top'
+  }), _temp;
 };
 
-module.exports = exports['default'];
+exports["default"] = _default;
+module.exports = exports.default;

package.json

 {
 	"name": "react-hint",
-	"version": "3.2.0",
+	"version": "3.2.1",
 	"license": "MIT",
@@ -16,5 +16,5 @@ "description": "Tooltip component for React, Preact, Inferno",
 	"devDependencies": {
-		"nwb": "0.23.x",
-		"react": "16.x",
-		"react-dom": "16.x"
+		"nwb": "^0.25.0",
+		"react": "^17.0.0",
+		"react-dom": "^17.0.0"
 	},
@@ -21,0 +21,0 @@ "files": [

README.md

@@ -17,4 +17,4 @@ React-hint
 
-How to use
-----------
+How to import
+-------------
 
@@ -41,2 +41,93 @@ ```jsx
 
+You don't need to include ReactHint in every component which uses tooltips, just include it once in the topmost container component.
+
+Use
+---
+
+ReactHint is (in 99% of cases) a singleton-component which is used to render tooltips which appear on multiple elements :
+ 
+```jsx
+<ReactHint autoPosition events />
+<button data-rh="tooltip 1">Hover me 1 !</button>
+<button data-rh="tooltip 2">Hover me 2 !</button>
+<button data-rh="tooltip 3">Hover me 3 !</button>
+<button data-rh="tooltip 4">Hover me 4 !</button>
+```
+
+The text content which appears inside the tooltip is set by `data-rh` attribute.
+
+Tooltip will appear on hover on every element with `data-rh` attribute.
+
+*Note : tooltip can also be toggled by calling `toggleHint()` on the ref of a the component:*
+ 
+```jsx
+<ReactHint autoPosition events ref={(ref) => { this.tooltip = ref; }} />
+<div data-rh="tooltip">Element with tooltip</div>
+<button onClick={() => { this.tooltip.toggleHint(); }}>Click me to toggle React Hint on element !</button>
+```
+
+### custom content
+
+In case you need to define custom content (HTML), you must use the `onRenderContent` prop of ReactHint:
+
+```jsx
+<ReactHint
+	autoPosition
+	events
+	onRenderContent={(target) => (<div><p>`tooltip ${target.number}`</p></div>)}
+/>
+<button data-rh data-number="1">Hover me 1 !</button>
+<button data-rh data-number="2">Hover me 2 !</button>
+<button data-rh data-number="3">Hover me 3 !</button>
+<button data-rh data-number="4">Hover me 4 !</button>
+```
+
+Use `data-abcdef` attribute on component which uses tooltip to pass data which can be accessed via `target.abcdef` in `onRenderContent()`.
+
+*ReactHint is not your regular wrapping tooltip component library, e.g. this is **incorrect**:*
+
+```jsx
+<ReactHint>
+	<div>Content of the tooltip</div>
+</ReactHint>
+```
+
+### multiple instances
+
+In case you need to define multiple instances of `ReactHint` (ex to show tooltips with different content layout), you can customize the attribute name per instance.
+ReactHint also supports custom tooltip content with attached event handlers by overriding the content renderer and returning a react node.
+
+```jsx
+
+// default tooltip
+<ReactHint autoPosition events />
+
+// custom tooltip 1
+<ReactHint
+	persist
+	attribute="data-custom-1"
+	events={{click: true}}
+	onRenderContent={(target) => (<div><p>`tooltip ${target.number}`</p></div>)}
+/>
+
+// custom tooltip 2
+<ReactHint
+	persist
+	attribute="data-custom-2"
+	events={{click: true}}
+	onRenderContent={(target) => (<h1>`tooltip ${target.title}`</h1>)}
+/>
+
+<button data-rh="default tooltip 1">Hover me 1 to show default tooltip !</button>
+<button data-rh="default tooltip 2">Hover me 2 to show default tooltip !</button>
+
+<button data-custom-1	data-custom-1-number="123">Hover me to show custom tooltip 1 !</button>
+<button data-custom-1	data-custom-1-number="456">Hover me to show custom tooltip 1 !</button>
+
+<button data-custom-2	data-custom-2-title="Hello">Hover me to show custom tooltip 2 !</button>
+<button data-custom-2	data-custom-2-title="World">Hover me to show custom tooltip 2 !</button>
+```
+
+*Note : when using custom attribute name, data should be passed prefixed with attribute name as shown above.*
+
 Options
@@ -50,5 +141,5 @@ -------
 | className          | String                                                      | "react-hint"  | You can override the tooltip style by passing the `className` property.
-| delay              | Number or {show: Number, hide: Number}                      | 0             | The default delay before showing/hiding the tooltip.
+| delay              | Number or {show: Number, hide: Number}                      | 0             | The default delay (in milliseconds) before showing/hiding the tooltip.
 | events             | Boolean or {click: Boolean, focus: Boolean, hover: Boolean} | false         | Enables/disables all events or a subset of events.
-| onRenderContent    | Function                                                    |               | Passing a function which returns a react node allows rendering custom content with attached event handlers.
+| onRenderContent    | Function                                                    |               | Allows rendering of custom HTML content (with attached event handlers). Pass a function which returns a react node.
 | persist            | Boolean                                                     | false         | Hide the tooltip only on outside click, hover, etc.
@@ -60,8 +151,7 @@ | position           | "top", "left", "right", "bottom"                            | "top"         | Allows setting the default tooltip placement.
 | :-------------------- | :------------------------------- | :------------ | :----------
-| data-rh               | String                           |               | Sets the tooltip's content.
+| data-rh               | String                           |               | Sets the tooltip's text content (if `onRenderContent` is not used to set custom HTML content).
 | data-rh-at            | "top", "left", "right", "bottom" | "top"         | Allows overriding the default tooltip placement.
 
-Example
--------
-You don't need to include ReactHint in every component which uses tooltips, just include it once in the topmost container component. In case you need to define multiple instances of ReactHint, you can customise the attribute name per instance. ReactHint also supports custom tooltip content with attached event handlers by overriding the content renderer and returning a react node.
+Full Example
+------------
 
@@ -68,0 +158,0 @@ ```jsx

src/index.js

@@ -1,2 +0,2 @@
-export default ({Component, createElement}) =>
+export default ({Component, createElement, createRef}) =>
 	class ReactHint extends Component {
@@ -13,4 +13,8 @@ static defaultProps = {
 		}
+		_hint = createRef();
+		_container = createRef();
 
-		state = {target: null}
+		state = {target: null, hidden: true}
+		target = null;
+		placement = null;
 		_containerStyle = {position: 'relative'}
@@ -38,6 +42,11 @@
 		toggleHint = ({target = null} = {}) => {
-			target = this.getHint(target)
-			clearTimeout(this._timeout)
-			this._timeout = setTimeout(() => this.setState(() =>
-				({target})), target === null
+			target = this.getHint(target);
+			clearTimeout(this._timeout);
+			this._timeout = setTimeout(() => {
+				this.target = target;
+				if (this.target) {
+					this.placement = null;
+				}
+				this.getHintData();
+			}, target === null
 					? this.props.delay.hide === undefined
@@ -53,7 +62,7 @@ ? this.props.delay
 			const {attribute, persist} = this.props
-			const {target} = this.state
+			const target = this.target;
 
 			while (el) {
 				if (el === document) break
-				if (persist && el === this._hint) return target
+				if (persist && el === this._hint.current) return target
 				if (el.hasAttribute(attribute)) return el
@@ -64,7 +73,2 @@ el = el.parentNode
 
-		shouldComponentUpdate(props, state) {
-			return !this.shallowEqual(state, this.state) ||
-				!this.shallowEqual(props, this.props)
-		}
-
 		shallowEqual = (a, b) => {
@@ -80,13 +84,24 @@ const keys = Object.keys(a)
 		componentDidUpdate() {
-			if (this.state.target) this.setState(this.getHintData)
+			if (this.target && !this.state.hidden) {
+				this.getHintData();
+			}
 		}
 
-		getHintData = ({target}, {attribute, autoPosition, position}) => {
-			const content = target.getAttribute(attribute) || ''
-			let at = target.getAttribute(`${attribute}-at`) || position
+		shouldComponentUpdate(props, state) {
+			return !this.shallowEqual(state, this.state) || !this.shallowEqual(props, this.props)
+		}
 
+		getHintData = () => {
+			if (!this.target) {
+				this.setState({hidden: true});
+				return;
+			}
+			const {attribute, autoPosition, position} = this.props;
+			const content = this.target.getAttribute(attribute) || '';
+			let at = this.placement || this.target.getAttribute(`${attribute}-at`) || position;
+
 			const {
 				top: containerTop,
 				left: containerLeft
-			} = this._container.getBoundingClientRect()
+			} = this._container.current.getBoundingClientRect()
 
@@ -96,3 +111,3 @@ const {
 				height: hintHeight
-			} = this._hint.getBoundingClientRect()
+			} = this._hint.current.getBoundingClientRect()
 
@@ -104,5 +119,5 @@ const {
 				height: targetHeight
-			} = target.getBoundingClientRect()
+			} = this.target.getBoundingClientRect()
 
-			if (autoPosition) {
+			if (autoPosition && !this.placement) {
 				const isHoriz = ['left', 'right'].includes(at)
@@ -129,28 +144,29 @@
 				}
+				if (!at || !directions[at]) {
+					switch (at) {
+						case 'left':
+							if (!directions.left) at = 'right'
+							if (!directions.top) at = 'bottom'
+							if (!directions.bottom) at = 'top'
+							break
 
-				switch (at) {
-					case 'left':
-						if (!directions.left) at = 'right'
-						if (!directions.top) at = 'bottom'
-						if (!directions.bottom) at = 'top'
-						break
+						case 'right':
+							if (!directions.right) at = 'left'
+							if (!directions.top) at = 'bottom'
+							if (!directions.bottom) at = 'top'
+							break
 
-					case 'right':
-						if (!directions.right) at = 'left'
-						if (!directions.top) at = 'bottom'
-						if (!directions.bottom) at = 'top'
-						break
+						case 'bottom':
+							if (!directions.bottom) at = 'top'
+							if (!directions.left) at = 'right'
+							if (!directions.right) at = 'left'
+							break
 
-					case 'bottom':
-						if (!directions.bottom) at = 'top'
-						if (!directions.left) at = 'right'
-						if (!directions.right) at = 'left'
-						break
-
-					case 'top':
-					default:
-						if (!directions.top) at = 'bottom'
-						if (!directions.left) at = 'right'
-						if (!directions.right) at = 'left'
-						break
+						case 'top':
+						default:
+							if (!directions.top) at = 'bottom'
+							if (!directions.left) at = 'right'
+							if (!directions.right) at = 'left'
+							break
+					}
 				}
@@ -182,30 +198,32 @@ }
 
-			return {
+			if (hintHeight > 0 || hintWidth > 0) {
+				// This prevents react-hint from rotating the placements 
+				this.placement = at;
+			}
+			const newState = {
 				content, at,
 				top: (top + targetTop - containerTop)|0,
-				left: (left + targetLeft - containerLeft)|0
+				left: (left + targetLeft - containerLeft)|0,
+				hidden: false,
 			}
+			this.setState(newState);
 		}
 
 		render() {
-			const {className, onRenderContent} = this.props
-			const {target, content, at, top, left} = this.state
-
-			return <div ref={(ref) => this._container = ref}
-				style={this._containerStyle}>
-					{target &&
-						<div className={`${className} ${className}--${at}`}
-							ref={(ref) => this._hint = ref}
-							role="tooltip"
-							style={{top, left}}>
-								{onRenderContent
-									? onRenderContent(target, content)
-									: <div className={`${className}__content`}>
-										{content}
-									</div>
-								}
-						</div>
-					}
+			const {className, onRenderContent} = this.props;
+			const {content, at, top, left} = this.state;
+			return <div ref={this._container} style={this._containerStyle}>
+					<div className={`${className} ${className}--${at}`}
+						ref={this._hint}
+						role="tooltip"
+						style={{top, left, display: this.target ? undefined : 'none'}}>
+							{this.target && (onRenderContent
+								? onRenderContent(this.target, content)
+								: <div className={`${className}__content`}>
+									{content}
+								</div>
+							)}
+					</div>
 				</div>
 		}
 	}

umd/react-hint.js

 /*!
- * react-hint v3.2.0 - https://react-hint.js.org
+ * react-hint v3.2.1 - https://react-hint.js.org
  * MIT Licensed
@@ -114,227 +114,273 @@ */
 __webpack_require__.r(__webpack_exports__);
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 /* harmony default export */ __webpack_exports__["default"] = (function (_ref) {
-	var _class, _temp2;
+  var _class, _temp;
 
-	var Component = _ref.Component,
-	    createElement = _ref.createElement;
-	return _temp2 = _class = function (_Component) {
-		_inherits(ReactHint, _Component);
+  var Component = _ref.Component,
+      createElement = _ref.createElement,
+      createRef = _ref.createRef;
+  return _temp = _class = /*#__PURE__*/function (_Component) {
+    _inheritsLoose(ReactHint, _Component);
 
-		function ReactHint() {
-			var _temp, _this, _ret;
+    function ReactHint() {
+      var _this;
 
-			_classCallCheck(this, ReactHint);
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
 
-			for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-				args[_key] = arguments[_key];
-			}
+      _this = _Component.call.apply(_Component, [this].concat(args)) || this;
 
-			return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = { target: null }, _this._containerStyle = { position: 'relative' }, _this.toggleEvents = function (_ref2, flag) {
-				var events = _ref2.events,
-				    _ref2$events = _ref2.events,
-				    click = _ref2$events.click,
-				    focus = _ref2$events.focus,
-				    hover = _ref2$events.hover;
+      _defineProperty(_assertThisInitialized(_this), "_hint", createRef());
 
-				var action = flag ? 'addEventListener' : 'removeEventListener';
-				var hasEvents = events === true;(click || hasEvents) && document[action]('click', _this.toggleHint);(focus || hasEvents) && document[action]('focusin', _this.toggleHint);(hover || hasEvents) && document[action]('mouseover', _this.toggleHint);(click || hover || hasEvents) && document[action]('touchend', _this.toggleHint);
-			}, _this.toggleHint = function () {
-				var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-				    _ref3$target = _ref3.target,
-				    target = _ref3$target === undefined ? null : _ref3$target;
+      _defineProperty(_assertThisInitialized(_this), "_container", createRef());
 
-				target = _this.getHint(target);
-				clearTimeout(_this._timeout);
-				_this._timeout = setTimeout(function () {
-					return _this.setState(function () {
-						return { target: target };
-					});
-				}, target === null ? _this.props.delay.hide === undefined ? _this.props.delay : _this.props.delay.hide : _this.props.delay.show === undefined ? _this.props.delay : _this.props.delay.show);
-			}, _this.getHint = function (el) {
-				var _this$props = _this.props,
-				    attribute = _this$props.attribute,
-				    persist = _this$props.persist;
-				var target = _this.state.target;
+      _defineProperty(_assertThisInitialized(_this), "state", {
+        target: null,
+        hidden: true
+      });
 
+      _defineProperty(_assertThisInitialized(_this), "target", null);
 
-				while (el) {
-					if (el === document) break;
-					if (persist && el === _this._hint) return target;
-					if (el.hasAttribute(attribute)) return el;
-					el = el.parentNode;
-				}return null;
-			}, _this.shallowEqual = function (a, b) {
-				var keys = Object.keys(a);
-				return keys.length === Object.keys(b).length && keys.reduce(function (result, key) {
-					return result && (typeof a[key] === 'function' && typeof b[key] === 'function' || a[key] === b[key]);
-				}, true);
-			}, _this.getHintData = function (_ref4, _ref5) {
-				var target = _ref4.target;
-				var attribute = _ref5.attribute,
-				    autoPosition = _ref5.autoPosition,
-				    position = _ref5.position;
+      _defineProperty(_assertThisInitialized(_this), "placement", null);
 
-				var content = target.getAttribute(attribute) || '';
-				var at = target.getAttribute(attribute + '-at') || position;
+      _defineProperty(_assertThisInitialized(_this), "_containerStyle", {
+        position: 'relative'
+      });
 
-				var _this$_container$getB = _this._container.getBoundingClientRect(),
-				    containerTop = _this$_container$getB.top,
-				    containerLeft = _this$_container$getB.left;
+      _defineProperty(_assertThisInitialized(_this), "toggleEvents", function (_ref2, flag) {
+        var events = _ref2.events,
+            _ref2$events = _ref2.events,
+            click = _ref2$events.click,
+            focus = _ref2$events.focus,
+            hover = _ref2$events.hover;
+        var action = flag ? 'addEventListener' : 'removeEventListener';
+        var hasEvents = events === true;
+        (click || hasEvents) && document[action]('click', _this.toggleHint);
+        (focus || hasEvents) && document[action]('focusin', _this.toggleHint);
+        (hover || hasEvents) && document[action]('mouseover', _this.toggleHint);
+        (click || hover || hasEvents) && document[action]('touchend', _this.toggleHint);
+      });
 
-				var _this$_hint$getBoundi = _this._hint.getBoundingClientRect(),
-				    hintWidth = _this$_hint$getBoundi.width,
-				    hintHeight = _this$_hint$getBoundi.height;
+      _defineProperty(_assertThisInitialized(_this), "toggleHint", function (_temp2) {
+        var _ref3 = _temp2 === void 0 ? {} : _temp2,
+            _ref3$target = _ref3.target,
+            target = _ref3$target === void 0 ? null : _ref3$target;
 
-				var _target$getBoundingCl = target.getBoundingClientRect(),
-				    targetTop = _target$getBoundingCl.top,
-				    targetLeft = _target$getBoundingCl.left,
-				    targetWidth = _target$getBoundingCl.width,
-				    targetHeight = _target$getBoundingCl.height;
+        target = _this.getHint(target);
+        clearTimeout(_this._timeout);
+        _this._timeout = setTimeout(function () {
+          _this.target = target;
 
-				if (autoPosition) {
-					var isHoriz = ['left', 'right'].includes(at);
+          if (_this.target) {
+            _this.placement = null;
+          }
 
-					var _document$documentEle = document.documentElement,
-					    clientHeight = _document$documentEle.clientHeight,
-					    clientWidth = _document$documentEle.clientWidth;
+          _this.getHintData();
+        }, target === null ? _this.props.delay.hide === undefined ? _this.props.delay : _this.props.delay.hide : _this.props.delay.show === undefined ? _this.props.delay : _this.props.delay.show);
+      });
 
+      _defineProperty(_assertThisInitialized(_this), "getHint", function (el) {
+        var _this$props = _this.props,
+            attribute = _this$props.attribute,
+            persist = _this$props.persist;
+        var target = _this.target;
 
-					var directions = {
-						left: (isHoriz ? targetLeft - hintWidth : targetLeft + (targetWidth - hintWidth >> 1)) > 0,
-						right: (isHoriz ? targetLeft + targetWidth + hintWidth : targetLeft + (targetWidth + hintWidth >> 1)) < clientWidth,
-						bottom: (isHoriz ? targetTop + (targetHeight + hintHeight >> 1) : targetTop + targetHeight + hintHeight) < clientHeight,
-						top: (isHoriz ? targetTop - (hintHeight >> 1) : targetTop - hintHeight) > 0
-					};
+        while (el) {
+          if (el === document) break;
+          if (persist && el === _this._hint.current) return target;
+          if (el.hasAttribute(attribute)) return el;
+          el = el.parentNode;
+        }
 
-					switch (at) {
-						case 'left':
-							if (!directions.left) at = 'right';
-							if (!directions.top) at = 'bottom';
-							if (!directions.bottom) at = 'top';
-							break;
+        return null;
+      });
 
-						case 'right':
-							if (!directions.right) at = 'left';
-							if (!directions.top) at = 'bottom';
-							if (!directions.bottom) at = 'top';
-							break;
+      _defineProperty(_assertThisInitialized(_this), "shallowEqual", function (a, b) {
+        var keys = Object.keys(a);
+        return keys.length === Object.keys(b).length && keys.reduce(function (result, key) {
+          return result && (typeof a[key] === 'function' && typeof b[key] === 'function' || a[key] === b[key]);
+        }, true);
+      });
 
-						case 'bottom':
-							if (!directions.bottom) at = 'top';
-							if (!directions.left) at = 'right';
-							if (!directions.right) at = 'left';
-							break;
+      _defineProperty(_assertThisInitialized(_this), "getHintData", function () {
+        if (!_this.target) {
+          _this.setState({
+            hidden: true
+          });
 
-						case 'top':
-						default:
-							if (!directions.top) at = 'bottom';
-							if (!directions.left) at = 'right';
-							if (!directions.right) at = 'left';
-							break;
-					}
-				}
+          return;
+        }
 
-				var top = void 0,
-				    left = void 0;
-				switch (at) {
-					case 'left':
-						top = targetHeight - hintHeight >> 1;
-						left = -hintWidth;
-						break;
+        var _this$props2 = _this.props,
+            attribute = _this$props2.attribute,
+            autoPosition = _this$props2.autoPosition,
+            position = _this$props2.position;
+        var content = _this.target.getAttribute(attribute) || '';
+        var at = _this.placement || _this.target.getAttribute(attribute + "-at") || position;
 
-					case 'right':
-						top = targetHeight - hintHeight >> 1;
-						left = targetWidth;
-						break;
+        var _this$_container$curr = _this._container.current.getBoundingClientRect(),
+            containerTop = _this$_container$curr.top,
+            containerLeft = _this$_container$curr.left;
 
-					case 'bottom':
-						top = targetHeight;
-						left = targetWidth - hintWidth >> 1;
-						break;
+        var _this$_hint$current$g = _this._hint.current.getBoundingClientRect(),
+            hintWidth = _this$_hint$current$g.width,
+            hintHeight = _this$_hint$current$g.height;
 
-					case 'top':
-					default:
-						top = -hintHeight;
-						left = targetWidth - hintWidth >> 1;
-				}
+        var _this$target$getBound = _this.target.getBoundingClientRect(),
+            targetTop = _this$target$getBound.top,
+            targetLeft = _this$target$getBound.left,
+            targetWidth = _this$target$getBound.width,
+            targetHeight = _this$target$getBound.height;
 
-				return {
-					content: content, at: at,
-					top: top + targetTop - containerTop | 0,
-					left: left + targetLeft - containerLeft | 0
-				};
-			}, _temp), _possibleConstructorReturn(_this, _ret);
-		}
+        if (autoPosition && !_this.placement) {
+          var isHoriz = ['left', 'right'].includes(at);
+          var _document$documentEle = document.documentElement,
+              clientHeight = _document$documentEle.clientHeight,
+              clientWidth = _document$documentEle.clientWidth;
+          var directions = {
+            left: (isHoriz ? targetLeft - hintWidth : targetLeft + (targetWidth - hintWidth >> 1)) > 0,
+            right: (isHoriz ? targetLeft + targetWidth + hintWidth : targetLeft + (targetWidth + hintWidth >> 1)) < clientWidth,
+            bottom: (isHoriz ? targetTop + (targetHeight + hintHeight >> 1) : targetTop + targetHeight + hintHeight) < clientHeight,
+            top: (isHoriz ? targetTop - (hintHeight >> 1) : targetTop - hintHeight) > 0
+          };
 
-		ReactHint.prototype.componentDidMount = function componentDidMount() {
-			this.toggleEvents(this.props, true);
-		};
+          if (!at || !directions[at]) {
+            switch (at) {
+              case 'left':
+                if (!directions.left) at = 'right';
+                if (!directions.top) at = 'bottom';
+                if (!directions.bottom) at = 'top';
+                break;
 
-		ReactHint.prototype.componentWillUnmount = function componentWillUnmount() {
-			this.toggleEvents(this.props, false);
-			clearTimeout(this._timeout);
-		};
+              case 'right':
+                if (!directions.right) at = 'left';
+                if (!directions.top) at = 'bottom';
+                if (!directions.bottom) at = 'top';
+                break;
 
-		ReactHint.prototype.shouldComponentUpdate = function shouldComponentUpdate(props, state) {
-			return !this.shallowEqual(state, this.state) || !this.shallowEqual(props, this.props);
-		};
+              case 'bottom':
+                if (!directions.bottom) at = 'top';
+                if (!directions.left) at = 'right';
+                if (!directions.right) at = 'left';
+                break;
 
-		ReactHint.prototype.componentDidUpdate = function componentDidUpdate() {
-			if (this.state.target) this.setState(this.getHintData);
-		};
+              case 'top':
+              default:
+                if (!directions.top) at = 'bottom';
+                if (!directions.left) at = 'right';
+                if (!directions.right) at = 'left';
+                break;
+            }
+          }
+        }
 
-		ReactHint.prototype.render = function render() {
-			var _this2 = this;
+        var top, left;
 
-			var _props = this.props,
-			    className = _props.className,
-			    onRenderContent = _props.onRenderContent;
-			var _state = this.state,
-			    target = _state.target,
-			    content = _state.content,
-			    at = _state.at,
-			    top = _state.top,
-			    left = _state.left;
+        switch (at) {
+          case 'left':
+            top = targetHeight - hintHeight >> 1;
+            left = -hintWidth;
+            break;
 
+          case 'right':
+            top = targetHeight - hintHeight >> 1;
+            left = targetWidth;
+            break;
 
-			return createElement(
-				'div',
-				{ ref: function ref(_ref7) {
-						return _this2._container = _ref7;
-					},
-					style: this._containerStyle },
-				target && createElement(
-					'div',
-					{ className: className + ' ' + className + '--' + at,
-						ref: function ref(_ref6) {
-							return _this2._hint = _ref6;
-						},
-						role: 'tooltip',
-						style: { top: top, left: left } },
-					onRenderContent ? onRenderContent(target, content) : createElement(
-						'div',
-						{ className: className + '__content' },
-						content
-					)
-				)
-			);
-		};
+          case 'bottom':
+            top = targetHeight;
+            left = targetWidth - hintWidth >> 1;
+            break;
 
-		return ReactHint;
-	}(Component), _class.defaultProps = {
-		attribute: 'data-rh',
-		autoPosition: false,
-		className: 'react-hint',
-		delay: 0,
-		events: false,
-		onRenderContent: null,
-		persist: false,
-		position: 'top'
-	}, _temp2;
+          case 'top':
+          default:
+            top = -hintHeight;
+            left = targetWidth - hintWidth >> 1;
+        }
+
+        if (hintHeight > 0 || hintWidth > 0) {
+          // This prevents react-hint from rotating the placements 
+          _this.placement = at;
+        }
+
+        var newState = {
+          content: content,
+          at: at,
+          top: top + targetTop - containerTop | 0,
+          left: left + targetLeft - containerLeft | 0,
+          hidden: false
+        };
+
+        _this.setState(newState);
+      });
+
+      return _this;
+    }
+
+    var _proto = ReactHint.prototype;
+
+    _proto.componentDidMount = function componentDidMount() {
+      this.toggleEvents(this.props, true);
+    };
+
+    _proto.componentWillUnmount = function componentWillUnmount() {
+      this.toggleEvents(this.props, false);
+      clearTimeout(this._timeout);
+    };
+
+    _proto.componentDidUpdate = function componentDidUpdate() {
+      if (this.target && !this.state.hidden) {
+        this.getHintData();
+      }
+    };
+
+    _proto.shouldComponentUpdate = function shouldComponentUpdate(props, state) {
+      return !this.shallowEqual(state, this.state) || !this.shallowEqual(props, this.props);
+    };
+
+    _proto.render = function render() {
+      var _this$props3 = this.props,
+          className = _this$props3.className,
+          onRenderContent = _this$props3.onRenderContent;
+      var _this$state = this.state,
+          content = _this$state.content,
+          at = _this$state.at,
+          top = _this$state.top,
+          left = _this$state.left;
+      return createElement("div", {
+        ref: this._container,
+        style: this._containerStyle
+      }, createElement("div", {
+        className: className + " " + className + "--" + at,
+        ref: this._hint,
+        role: "tooltip",
+        style: {
+          top: top,
+          left: left,
+          display: this.target ? undefined : 'none'
+        }
+      }, this.target && (onRenderContent ? onRenderContent(this.target, content) : createElement("div", {
+        className: className + "__content"
+      }, content))));
+    };
+
+    return ReactHint;
+  }(Component), _defineProperty(_class, "defaultProps", {
+    attribute: 'data-rh',
+    autoPosition: false,
+    className: 'react-hint',
+    delay: 0,
+    events: false,
+    onRenderContent: null,
+    persist: false,
+    position: 'top'
+  }), _temp;
 });
@@ -341,0 +387,0 @@

umd/react-hint.min.js

 /*!
- * react-hint v3.2.0 - https://react-hint.js.org
+ * react-hint v3.2.1 - https://react-hint.js.org
  * MIT Licensed
  */
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ReactHintFactory=e():t.ReactHintFactory=e()}(window,function(){return function(t){var e={};function o(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=t,o.c=e,o.d=function(t,e,n){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(n,r,function(e){return t[e]}.bind(null,r));return n},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=0)}([function(t,e,o){t.exports=o(1)},function(t,e,o){"use strict";function n(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}o.r(e),e.default=function(t){var e,o,r=t.Component,i=t.createElement;return o=e=function(t){function e(){var o,r;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);for(var i=arguments.length,u=Array(i),a=0;a<i;a++)u[a]=arguments[a];return o=r=n(this,t.call.apply(t,[this].concat(u))),r.state={target:null},r._containerStyle={position:"relative"},r.toggleEvents=function(t,e){var o=t.events,n=t.events,i=n.click,u=n.focus,a=n.hover,c=e?"addEventListener":"removeEventListener",l=!0===o;(i||l)&&document[c]("click",r.toggleHint),(u||l)&&document[c]("focusin",r.toggleHint),(a||l)&&document[c]("mouseover",r.toggleHint),(i||a||l)&&document[c]("touchend",r.toggleHint)},r.toggleHint=function(){var t=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).target,e=void 0===t?null:t;e=r.getHint(e),clearTimeout(r._timeout),r._timeout=setTimeout(function(){return r.setState(function(){return{target:e}})},null===e?void 0===r.props.delay.hide?r.props.delay:r.props.delay.hide:void 0===r.props.delay.show?r.props.delay:r.props.delay.show)},r.getHint=function(t){for(var e=r.props,o=e.attribute,n=e.persist,i=r.state.target;t&&t!==document;){if(n&&t===r._hint)return i;if(t.hasAttribute(o))return t;t=t.parentNode}return null},r.shallowEqual=function(t,e){var o=Object.keys(t);return o.length===Object.keys(e).length&&o.reduce(function(o,n){return o&&("function"==typeof t[n]&&"function"==typeof e[n]||t[n]===e[n])},!0)},r.getHintData=function(t,e){var o=t.target,n=e.attribute,i=e.autoPosition,u=e.position,a=o.getAttribute(n)||"",c=o.getAttribute(n+"-at")||u,l=r._container.getBoundingClientRect(),s=l.top,f=l.left,p=r._hint.getBoundingClientRect(),d=p.width,h=p.height,g=o.getBoundingClientRect(),y=g.top,b=g.left,m=g.width,v=g.height;if(i){var _=["left","right"].includes(c),w=document.documentElement,j=w.clientHeight,O=w.clientWidth,E={left:(_?b-d:b+(m-d>>1))>0,right:(_?b+m+d:b+(m+d>>1))<O,bottom:(_?y+(v+h>>1):y+v+h)<j,top:(_?y-(h>>1):y-h)>0};switch(c){case"left":E.left||(c="right"),E.top||(c="bottom"),E.bottom||(c="top");break;case"right":E.right||(c="left"),E.top||(c="bottom"),E.bottom||(c="top");break;case"bottom":E.bottom||(c="top"),E.left||(c="right"),E.right||(c="left");break;case"top":default:E.top||(c="bottom"),E.left||(c="right"),E.right||(c="left")}}var H=void 0,x=void 0;switch(c){case"left":H=v-h>>1,x=-d;break;case"right":H=v-h>>1,x=m;break;case"bottom":H=v,x=m-d>>1;break;case"top":default:H=-h,x=m-d>>1}return{content:a,at:c,top:H+y-s|0,left:x+b-f|0}},n(r,o)}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),e.prototype.componentDidMount=function(){this.toggleEvents(this.props,!0)},e.prototype.componentWillUnmount=function(){this.toggleEvents(this.props,!1),clearTimeout(this._timeout)},e.prototype.shouldComponentUpdate=function(t,e){return!this.shallowEqual(e,this.state)||!this.shallowEqual(t,this.props)},e.prototype.componentDidUpdate=function(){this.state.target&&this.setState(this.getHintData)},e.prototype.render=function(){var t=this,e=this.props,o=e.className,n=e.onRenderContent,r=this.state,u=r.target,a=r.content,c=r.at,l=r.top,s=r.left;return i("div",{ref:function(e){return t._container=e},style:this._containerStyle},u&&i("div",{className:o+" "+o+"--"+c,ref:function(e){return t._hint=e},role:"tooltip",style:{top:l,left:s}},n?n(u,a):i("div",{className:o+"__content"},a)))},e}(r),e.defaultProps={attribute:"data-rh",autoPosition:!1,className:"react-hint",delay:0,events:!1,onRenderContent:null,persist:!1,position:"top"},o}}]).default});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ReactHintFactory=e():t.ReactHintFactory=e()}(window,(function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){t.exports=n(1)},function(t,e,n){"use strict";function o(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function r(t,e){return(r=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function i(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}n.r(e),e.default=function(t){var e,n,a=t.Component,u=t.createElement,l=t.createRef;return n=e=function(t){var e,n;function a(){for(var e,n=arguments.length,r=new Array(n),a=0;a<n;a++)r[a]=arguments[a];return i(o(e=t.call.apply(t,[this].concat(r))||this),"_hint",l()),i(o(e),"_container",l()),i(o(e),"state",{target:null,hidden:!0}),i(o(e),"target",null),i(o(e),"placement",null),i(o(e),"_containerStyle",{position:"relative"}),i(o(e),"toggleEvents",(function(t,n){var o=t.events,r=t.events,i=r.click,a=r.focus,u=r.hover,l=n?"addEventListener":"removeEventListener",c=!0===o;(i||c)&&document[l]("click",e.toggleHint),(a||c)&&document[l]("focusin",e.toggleHint),(u||c)&&document[l]("mouseover",e.toggleHint),(i||u||c)&&document[l]("touchend",e.toggleHint)})),i(o(e),"toggleHint",(function(t){var n=(void 0===t?{}:t).target,o=void 0===n?null:n;o=e.getHint(o),clearTimeout(e._timeout),e._timeout=setTimeout((function(){e.target=o,e.target&&(e.placement=null),e.getHintData()}),null===o?void 0===e.props.delay.hide?e.props.delay:e.props.delay.hide:void 0===e.props.delay.show?e.props.delay:e.props.delay.show)})),i(o(e),"getHint",(function(t){for(var n=e.props,o=n.attribute,r=n.persist,i=e.target;t&&t!==document;){if(r&&t===e._hint.current)return i;if(t.hasAttribute(o))return t;t=t.parentNode}return null})),i(o(e),"shallowEqual",(function(t,e){var n=Object.keys(t);return n.length===Object.keys(e).length&&n.reduce((function(n,o){return n&&("function"==typeof t[o]&&"function"==typeof e[o]||t[o]===e[o])}),!0)})),i(o(e),"getHintData",(function(){if(e.target){var t,n,o=e.props,r=o.attribute,i=o.autoPosition,a=o.position,u=e.target.getAttribute(r)||"",l=e.placement||e.target.getAttribute(r+"-at")||a,c=e._container.current.getBoundingClientRect(),s=c.top,p=c.left,f=e._hint.current.getBoundingClientRect(),d=f.width,h=f.height,g=e.target.getBoundingClientRect(),m=g.top,b=g.left,v=g.width,y=g.height;if(i&&!e.placement){var _=["left","right"].includes(l),w=document.documentElement,j=w.clientHeight,H={left:(_?b-d:b+(v-d>>1))>0,right:(_?b+v+d:b+(v+d>>1))<w.clientWidth,bottom:(_?m+(y+h>>1):m+y+h)<j,top:(_?m-(h>>1):m-h)>0};if(!l||!H[l])switch(l){case"left":H.left||(l="right"),H.top||(l="bottom"),H.bottom||(l="top");break;case"right":H.right||(l="left"),H.top||(l="bottom"),H.bottom||(l="top");break;case"bottom":H.bottom||(l="top"),H.left||(l="right"),H.right||(l="left");break;case"top":default:H.top||(l="bottom"),H.left||(l="right"),H.right||(l="left")}}switch(l){case"left":t=y-h>>1,n=-d;break;case"right":t=y-h>>1,n=v;break;case"bottom":t=y,n=v-d>>1;break;case"top":default:t=-h,n=v-d>>1}(h>0||d>0)&&(e.placement=l);var O={content:u,at:l,top:t+m-s|0,left:n+b-p|0,hidden:!1};e.setState(O)}else e.setState({hidden:!0})})),e}n=t,(e=a).prototype=Object.create(n.prototype),e.prototype.constructor=e,r(e,n);var c=a.prototype;return c.componentDidMount=function(){this.toggleEvents(this.props,!0)},c.componentWillUnmount=function(){this.toggleEvents(this.props,!1),clearTimeout(this._timeout)},c.componentDidUpdate=function(){this.target&&!this.state.hidden&&this.getHintData()},c.shouldComponentUpdate=function(t,e){return!this.shallowEqual(e,this.state)||!this.shallowEqual(t,this.props)},c.render=function(){var t=this.props,e=t.className,n=t.onRenderContent,o=this.state,r=o.content,i=o.at,a=o.top,l=o.left;return u("div",{ref:this._container,style:this._containerStyle},u("div",{className:e+" "+e+"--"+i,ref:this._hint,role:"tooltip",style:{top:a,left:l,display:this.target?void 0:"none"}},this.target&&(n?n(this.target,r):u("div",{className:e+"__content"},r))))},a}(a),i(e,"defaultProps",{attribute:"data-rh",autoPosition:!1,className:"react-hint",delay:0,events:!1,onRenderContent:null,persist:!1,position:"top"}),n}}]).default}));
 //# sourceMappingURL=react-hint.min.js.map

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

64895

increased by12.71%

Lines of code

831

increased by11.69%

Number of lines in readme file

211

increased by74.38%

No dependency changes