@zohodesk/components 1.0.0-alpha-249 → 1.0.0-alpha-250

package/lib/Tooltip/Tooltip.js

@@ -0,0 +1,583 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
+
+var _Config = require("../Provider/Config");
+
+var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
+
+var _ResizeObserver = _interopRequireDefault(require("../Responsive/ResizeObserver"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var Tooltip = /*#__PURE__*/function (_React$Component) {
+  _inherits(Tooltip, _React$Component);
+
+  var _super = _createSuper(Tooltip);
+
+  function Tooltip(props) {
+    var _this;
+
+    _classCallCheck(this, Tooltip);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      title: null,
+      left: 0,
+      top: 0,
+      arrowLeft: 0,
+      isArrowRight: null,
+      isHtml: false
+    };
+    _this.handleOver = _this.handleOver.bind(_assertThisInitialized(_this));
+    _this.getToolTipDOM = _this.getToolTipDOM.bind(_assertThisInitialized(_this));
+    _this.reset = _this.reset.bind(_assertThisInitialized(_this));
+    _this.getDirection = document.getElementsByTagName('html')[0];
+    _this.leftRightScreenEdge = _this.leftRightScreenEdge.bind(_assertThisInitialized(_this));
+    _this.topBottomScreenEdge = _this.topBottomScreenEdge.bind(_assertThisInitialized(_this));
+    _this.observer = new _ResizeObserver["default"](_this.onResize);
+    _this.isResized = true;
+    _this.tooltipContainerClientRect = {};
+    _this.tooltipContainerEl = {};
+    return _this;
+  }
+
+  _createClass(Tooltip, [{
+    key: "onResize",
+    value: function onResize(sizeOfObservedEl, observedEl) {
+      this.isResized = true;
+    }
+  }, {
+    key: "observeElement",
+    value: function observeElement() {
+      this.tooltipContainerEl = this.getToolTipContainerEl();
+      this.observer.observe(this.tooltipContainerEl);
+    }
+  }, {
+    key: "unObserveElement",
+    value: function unObserveElement() {
+      this.observer.disconnect();
+    }
+  }, {
+    key: "getClientRectOfContEl",
+    value: function getClientRectOfContEl(el) {
+      if (this.isResized) {
+        return this.setClientRectOfContEl(el);
+      }
+
+      return this.tooltipContainerClientRect;
+    }
+  }, {
+    key: "setClientRectOfContEl",
+    value: function setClientRectOfContEl(containerEl) {
+      this.isResized = false;
+      this.tooltipContainerClientRect = containerEl.getBoundingClientRect();
+      return this.tooltipContainerClientRect;
+    }
+  }, {
+    key: "getToolTipContainerEl",
+    value: function getToolTipContainerEl() {
+      var getTooltipContainer = (0, _Config.getLibraryConfig)('getTooltipContainer');
+      var tooltipContainer = typeof getTooltipContainer === 'function' ? getTooltipContainer() : null;
+      return tooltipContainer ? tooltipContainer : document.body;
+    }
+  }, {
+    key: "getToolTipDOM",
+    value: function getToolTipDOM(el) {
+      this.toolTip = el;
+    }
+  }, {
+    key: "reset",
+    value: function reset() {
+      var title = this.state.title;
+
+      if (title !== null) {
+        this.setState({
+          title: null,
+          top: 0,
+          left: 0
+        });
+      }
+    }
+    /* left and right screen edge check for top and bottom tooltip position */
+
+  }, {
+    key: "leftRightScreenEdge",
+    value: function leftRightScreenEdge(tLeft, toolTipArrowLeft, thisLeft, thisWidth, tooltipoffsetWidth, bodyWidth, rightEdge, bodyLeft) {
+      if (tLeft - bodyLeft <= 1) {
+        // top & bottom position left side screen edge case
+        tLeft = bodyLeft + 2;
+        toolTipArrowLeft = parseInt(thisLeft - bodyLeft + thisWidth / 2 - 6);
+      } else if (tLeft - bodyLeft + tooltipoffsetWidth > bodyWidth) {
+        // top & bottom position right side screen edge case
+        rightEdge = tLeft + tooltipoffsetWidth - bodyWidth + 2;
+        tLeft = tLeft + bodyLeft - rightEdge;
+        toolTipArrowLeft = toolTipArrowLeft - bodyLeft + rightEdge;
+      } else if (tLeft + tooltipoffsetWidth + tooltipoffsetWidth >= bodyWidth - 2) {
+        // top & bottom center screen tooltip collide with right edge screen
+        tLeft = parseInt(thisLeft - (tooltipoffsetWidth - thisWidth) / 2);
+        toolTipArrowLeft = parseInt(tooltipoffsetWidth / 2 - 4);
+      }
+
+      return {
+        tLeft: tLeft,
+        toolTipArrowLeft: toolTipArrowLeft,
+        thisLeft: thisLeft,
+        thisWidth: thisWidth,
+        tooltipoffsetWidth: tooltipoffsetWidth,
+        bodyWidth: bodyWidth,
+        rightEdge: rightEdge
+      };
+    }
+    /* top and bottom screen edge check for left and right tooltip position */
+
+  }, {
+    key: "topBottomScreenEdge",
+    value: function topBottomScreenEdge(tTop, toolTipArrowTop, thisTop, thisHeight, tooltipoffsetHeight, bodyHeight, bottomEdge) {
+      if (tTop <= 1) {
+        tTop = 2;
+        toolTipArrowTop = parseInt(thisTop + thisHeight / 2);
+      } else if (tTop + tooltipoffsetHeight > bodyHeight) {
+        bottomEdge = tTop + tooltipoffsetHeight - bodyHeight + 2;
+        tTop -= bottomEdge;
+        toolTipArrowTop += bottomEdge;
+      }
+
+      return {
+        tTop: tTop,
+        toolTipArrowTop: toolTipArrowTop,
+        thisTop: thisTop,
+        thisHeight: thisHeight,
+        tooltipoffsetHeight: tooltipoffsetHeight,
+        bodyHeight: bodyHeight,
+        bottomEdge: bottomEdge
+      };
+    }
+  }, {
+    key: "handleOver",
+    value: function handleOver(e, targetElement) {
+      var _this2 = this;
+
+      var containerElement = this.tooltipContainerEl;
+      var element = e.target;
+      var titleDiv = element.hasAttribute('data-title') || element.hasAttribute('title') ? element : element.closest('[data-title]') || element.closest('[title]');
+
+      if (titleDiv) {
+        var title = titleDiv.getAttribute('data-title') || titleDiv.getAttribute('title');
+        /* if data-title-position is left or right change right and left in rtl case */
+
+        var isPosition = titleDiv.getAttribute('data-title-position');
+        var elem = this.getDirection;
+
+        if (elem.getAttribute('dir') == 'rtl') {
+          if (isPosition == 'left') {
+            isPosition = 'right';
+          } else if (isPosition == 'right') {
+            isPosition = 'left';
+          }
+        }
+
+        if (title !== '' && title) {
+          titleDiv.setAttribute('data-title', title);
+          titleDiv.removeAttribute('title');
+
+          if (element.nodeName !== 'I' && element.innerText && element.innerText.trim() !== '') {
+            var isContentDotted = '';
+
+            if (element.scrollWidth !== 0) {
+              isContentDotted = element.offsetWidth < element.scrollWidth;
+
+              if (!isContentDotted) {
+                isContentDotted = element.offsetHeight < element.scrollHeight;
+              } // if (!isContentDotted) {Need to check the code Sivanesh
+              //   isContentDotted = element.offsetHeight < element.scrollHeight;
+              // }
+
+            } else {
+              isContentDotted = element.parentElement.offsetWidth < element.parentElement.scrollWidth;
+            }
+
+            var originText = element.innerText.replace(/\s/g, '').toLowerCase();
+            var tooltipText = title.replace(/\s/g, '').toLowerCase();
+            var isDefaultTooltip = element.hasAttribute('data-istitle') || element.hasAttribute('istitle') ? element.getAttribute('data-istitle') || element.getAttribute('istitle') : 'false';
+            isDefaultTooltip = isDefaultTooltip === 'true';
+            var isSameText = originText.indexOf(tooltipText) !== -1 ? true : false;
+
+            if (!isContentDotted && isSameText && !isDefaultTooltip) {
+              return false;
+            }
+
+            if (isContentDotted && titleDiv.getAttribute('data-dottedTitle')) {
+              title = titleDiv.getAttribute('data-dottedTitle');
+            }
+          }
+
+          var isHtml = titleDiv.getAttribute('data-ishtml');
+          var dataTooltipnoArrow = titleDiv.getAttribute('data-tooltip-noarrow') === 'true' ? true : false;
+          var dataTooltipWrap = titleDiv.getAttribute('data-title-wrap') === 'true' ? true : false;
+          var clientRect = titleDiv.getBoundingClientRect();
+          var boxLayout = this.getClientRectOfContEl(containerElement);
+          this.setState({
+            title: title,
+            isHtml: isHtml,
+            dataTooltipnoArrow: dataTooltipnoArrow,
+            dataTooltipWrap: dataTooltipWrap
+          }, function () {
+            var tooltip = _this2.toolTip;
+
+            if (tooltip) {
+              /* element top, left, height, width */
+              var thisTop = clientRect.top;
+              var thisLeft = clientRect.left;
+              var thisHeight = clientRect.height;
+              var thisWidth = clientRect.width;
+              /* box layout left spacing */
+
+              var bodyLeft = boxLayout.left; // let checkTop = thisTop + thisHeight;
+
+              /* element left plus element width */
+
+              var checkLeft = thisLeft + thisWidth;
+              var tTop;
+              var tLeft;
+              var toolTipArrowTop;
+              var toolTipArrowLeft;
+              var rightEdge;
+              var bottomEdge;
+              var tooltipLeft;
+              /* offset width, height of body */
+
+              var bodyWidth = containerElement.offsetWidth;
+              var bodyHeight = containerElement.offsetHeight;
+              var isArrowHorizontal = false;
+              var isArrowDown = false;
+              var isArrowRight = false;
+              var tWidth = '';
+              /* overall body height minus element top + element height */
+
+              var thisBottom = bodyHeight - (thisTop + thisHeight);
+              /* overall body width minus element left + element width */
+
+              var thisRight = bodyWidth - (thisLeft + thisWidth);
+              /* tooltip width and height */
+
+              var tooltipoffsetWidth = tooltip.offsetWidth;
+              var tooltipoffsetHeight = tooltip.offsetHeight;
+
+              if (isPosition) {
+                if (isPosition == 'top') {
+                  /* if top does not have enough space show tooltip in bottom area */
+                  if (thisTop <= tooltipoffsetHeight + 5) {
+                    /* if top space is larger than bottom space show tooltip in top area */
+                    if (thisTop > thisBottom) {
+                      tTop = parseInt(thisTop - (tooltipoffsetHeight + 10));
+                      tLeft = parseInt(thisLeft - (tooltipoffsetWidth - thisWidth) / 2 + 2);
+                      toolTipArrowTop = parseInt(tooltipoffsetHeight - 4);
+                      toolTipArrowLeft = parseInt(tooltipoffsetWidth / 2 - 6);
+                      isArrowDown = true;
+                    } else {
+                      /* bottom position */
+                      tTop = parseInt(thisTop + (thisHeight + 10));
+                      tLeft = parseInt(thisLeft - (tooltipoffsetWidth - thisWidth) / 2 + 2);
+                      toolTipArrowTop = -4;
+                      toolTipArrowLeft = parseInt(tooltipoffsetWidth / 2 - 6);
+                      isArrowDown = false;
+                    }
+                  } else {
+                    /* if top have enough space show tooltip in top area */
+                    tTop = parseInt(thisTop - (tooltipoffsetHeight + 10));
+                    tLeft = parseInt(thisLeft - (tooltipoffsetWidth - thisWidth) / 2 + 2);
+                    toolTipArrowTop = parseInt(tooltipoffsetHeight - 4);
+                    toolTipArrowLeft = parseInt(tooltipoffsetWidth / 2 - 6);
+                    isArrowDown = true;
+                  }
+                  /* top tooltip left and right corner edge case */
+
+
+                  var values = _this2.leftRightScreenEdge(tLeft, toolTipArrowLeft, thisLeft, thisWidth, tooltipoffsetWidth, bodyWidth, rightEdge, bodyLeft);
+
+                  tLeft = values.tLeft, toolTipArrowLeft = values.toolTipArrowLeft, thisLeft = values.thisLeft, thisWidth = values.thisWidth, tooltipoffsetWidth = values.tooltipoffsetWidth, bodyWidth = values.bodyWidth, rightEdge = values.rightEdge;
+                } else if (isPosition == 'bottom') {
+                  /* if bottom does not have enough space show tooltip in top area */
+                  if (thisBottom <= tooltipoffsetHeight + 5) {
+                    /* if bottom space is larger than top space show tooltip in bottom area */
+                    if (thisTop > thisBottom) {
+                      tTop = parseInt(thisTop - (tooltipoffsetHeight + 10));
+                      tLeft = parseInt(thisLeft - (tooltipoffsetWidth - thisWidth) / 2 + 2);
+                      toolTipArrowTop = parseInt(tooltipoffsetHeight - 4);
+                      toolTipArrowLeft = parseInt(tooltipoffsetWidth / 2 - 6);
+                      isArrowDown = true;
+                    } else {
+                      /* top position */
+                      tTop = parseInt(thisTop + (thisHeight + 10));
+                      tLeft = parseInt(thisLeft - (tooltipoffsetWidth - thisWidth) / 2 + 2);
+                      toolTipArrowTop = -4;
+                      toolTipArrowLeft = parseInt(tooltipoffsetWidth / 2 - 6);
+                      isArrowDown = false;
+                    }
+                  } else {
+                    /* if bottom have enough space show tooltip in bottom area */
+                    tTop = parseInt(thisTop + (thisHeight + 10));
+                    tLeft = parseInt(thisLeft - (tooltipoffsetWidth - thisWidth) / 2 + 2);
+                    toolTipArrowTop = -4;
+                    toolTipArrowLeft = parseInt(tooltipoffsetWidth / 2 - 6);
+                    isArrowDown = false;
+                  }
+                  /* bottom tooltip left and right corner edge case */
+
+
+                  var _values = _this2.leftRightScreenEdge(tLeft, toolTipArrowLeft, thisLeft, thisWidth, tooltipoffsetWidth, bodyWidth, rightEdge, bodyLeft);
+
+                  tLeft = _values.tLeft, toolTipArrowLeft = _values.toolTipArrowLeft, thisLeft = _values.thisLeft, thisWidth = _values.thisWidth, tooltipoffsetWidth = _values.tooltipoffsetWidth, bodyWidth = _values.bodyWidth, rightEdge = _values.rightEdge;
+                } else if (isPosition == 'left') {
+                  isArrowHorizontal = true;
+
+                  if (thisLeft - bodyLeft <= tooltipoffsetWidth) {
+                    if (thisLeft - bodyLeft <= thisRight) {
+                      /* if left does not have enough space show tooltip in right area */
+                      tTop = parseInt(thisTop + (thisHeight / 2 - tooltipoffsetHeight / 2));
+                      tLeft = parseInt(thisLeft + thisWidth + 10);
+                      toolTipArrowTop = parseInt(tooltipoffsetHeight / 2 - 1);
+                      toolTipArrowLeft = -1;
+                      isArrowRight = false;
+                    } else {
+                      /* if left space is larger than right space show tooltip in left (default) area */
+                      if (bodyLeft + tooltipoffsetWidth >= thisLeft) {
+                        /* if tooltip width is greater than left space, set left space width to tooltip  */
+                        tWidth = thisLeft;
+                        tTop = parseInt(thisTop + (thisHeight / 2 - tooltipoffsetHeight / 2));
+                        tLeft = parseInt(thisLeft - tWidth - 7);
+                        toolTipArrowTop = parseInt(tooltipoffsetHeight / 2 - 1);
+                        toolTipArrowLeft = parseInt(tWidth - 2);
+                        isArrowRight = true;
+                      }
+                    }
+                  } else {
+                    /* if left have enough space show tooltip in left area */
+                    tTop = parseInt(thisTop + (thisHeight / 2 - tooltipoffsetHeight / 2));
+                    tLeft = parseInt(thisLeft - tooltipoffsetWidth - 7);
+                    toolTipArrowTop = parseInt(tooltipoffsetHeight / 2 - 1);
+                    toolTipArrowLeft = parseInt(tooltipoffsetWidth - 2);
+                    isArrowRight = true;
+                  }
+                  /* left tooltip top and bottom corner edge case */
+
+
+                  var _values2 = _this2.topBottomScreenEdge(tTop, toolTipArrowTop, thisTop, thisHeight, tooltipoffsetHeight, bodyHeight, bottomEdge);
+
+                  tTop = _values2.tTop, toolTipArrowTop = _values2.toolTipArrowTop, thisTop = _values2.thisTop, thisHeight = _values2.thisHeight, tooltipoffsetHeight = _values2.tooltipoffsetHeight, bodyHeight = _values2.bodyHeight, bottomEdge = _values2.bottomEdge;
+                } else if (isPosition == 'right') {
+                  isArrowHorizontal = true;
+
+                  if (thisRight + bodyLeft <= tooltipoffsetWidth) {
+                    if (thisLeft + bodyLeft <= thisRight) {
+                      /* if right space is larger than left space show tooltip in right (default) area */
+                      tTop = parseInt(thisTop + (thisHeight / 2 - tooltipoffsetHeight / 2));
+                      tLeft = parseInt(thisLeft + thisWidth + 7);
+                      toolTipArrowTop = parseInt(tooltipoffsetHeight / 2 - 1);
+                      toolTipArrowLeft = -1;
+                      isArrowRight = false;
+                    } else {
+                      /* if right does not have enough space show tooltip in left area */
+                      if (tooltipoffsetWidth >= thisLeft) {
+                        /* if tooltip width is greater than left space, set left space width to tooltip  */
+                        tWidth = thisLeft;
+                        tTop = parseInt(thisTop + (thisHeight / 2 - tooltipoffsetHeight / 2));
+                        tLeft = parseInt(thisLeft - tWidth - 7);
+                        toolTipArrowTop = parseInt(tooltipoffsetHeight / 2 - 1);
+                        toolTipArrowLeft = parseInt(tWidth - 2);
+                        isArrowRight = true;
+                      } else {
+                        /* show tooltip in left area without setting left space width to tooltip */
+                        tTop = parseInt(thisTop + (thisHeight / 2 - tooltipoffsetHeight / 2));
+                        tLeft = parseInt(thisLeft - tooltipoffsetWidth - 7);
+                        toolTipArrowTop = parseInt(tooltipoffsetHeight / 2 - 1);
+                        toolTipArrowLeft = parseInt(tooltipoffsetWidth - 2);
+                        isArrowRight = true;
+                      }
+                    }
+                  } else {
+                    /* if right have enough space show tooltip in right area */
+                    tTop = parseInt(thisTop + (thisHeight / 2 - tooltipoffsetHeight / 2));
+                    tLeft = parseInt(thisLeft + thisWidth + 7);
+                    toolTipArrowTop = parseInt(tooltipoffsetHeight / 2 - 1);
+                    toolTipArrowLeft = -1;
+                    isArrowRight = false;
+                  }
+                  /* right tooltip left and right corner edge case */
+
+
+                  var _values3 = _this2.topBottomScreenEdge(tTop, toolTipArrowTop, thisTop, thisHeight, tooltipoffsetHeight, bodyHeight, bottomEdge);
+
+                  tTop = _values3.tTop, toolTipArrowTop = _values3.toolTipArrowTop, thisTop = _values3.thisTop, thisHeight = _values3.thisHeight, tooltipoffsetHeight = _values3.tooltipoffsetHeight, bodyHeight = _values3.bodyHeight, bottomEdge = _values3.bottomEdge;
+                }
+
+                _this2.setState({
+                  top: tTop,
+                  left: tLeft,
+                  arrowTop: toolTipArrowTop,
+                  arrowLeft: toolTipArrowLeft,
+                  isArrowHorizontal: isArrowHorizontal,
+                  isArrowDown: isArrowDown,
+                  isArrowRight: isArrowRight,
+                  width: tWidth
+                });
+              } else {
+                _this2.setState({
+                  isArrowRight: null
+                });
+
+                tTop = parseInt(thisTop + thisHeight + 10);
+                tLeft = parseInt(thisLeft - (tooltipoffsetWidth / 2 - thisWidth / 2) + 2);
+                tooltipLeft = parseInt(tooltipoffsetWidth / 2 - 6);
+
+                if (tLeft - bodyLeft <= 1) {
+                  // default left side screen edge case
+                  tooltipLeft = parseInt(thisLeft - bodyLeft + thisWidth / 2 - 6);
+                  tLeft = bodyLeft + 2;
+                } else if (tLeft - bodyLeft + tooltipoffsetWidth > bodyWidth) {
+                  checkLeft = tLeft + tooltipoffsetWidth - bodyWidth + 2;
+                  tooltipLeft = tooltipLeft - bodyLeft + checkLeft;
+                  tLeft = tLeft + bodyLeft - checkLeft;
+                } else if (tLeft + tooltipoffsetWidth >= bodyWidth - 2) {
+                  // default center screen tooltip collide with right edge screen
+                  tLeft = parseInt(thisLeft - (tooltipoffsetWidth - thisWidth) / 2);
+                  tooltipLeft = parseInt(tooltipoffsetWidth / 2 - 4);
+                }
+
+                isArrowDown = false;
+
+                if (tTop + tooltipoffsetHeight > bodyHeight) {
+                  /* if bottom does not have enough space show tooltip in top area */
+                  if (thisTop > thisBottom) {
+                    isArrowDown = true;
+                    tTop -= tooltipoffsetHeight + thisHeight + 20;
+                  }
+                }
+
+                if (isArrowDown) {
+                  var arrowTop = tooltipoffsetHeight - 4;
+
+                  _this2.setState({
+                    top: tTop,
+                    left: tLeft,
+                    arrowLeft: tooltipLeft,
+                    arrowTop: arrowTop,
+                    isArrowDown: true,
+                    isArrowHorizontal: isArrowHorizontal
+                  });
+                } else {
+                  _this2.setState({
+                    top: tTop,
+                    left: tLeft,
+                    arrowLeft: tooltipLeft,
+                    arrowTop: -4,
+                    isArrowDown: false,
+                    isArrowHorizontal: isArrowHorizontal
+                  });
+                }
+              }
+            }
+          });
+          titleDiv.addEventListener('click', this.reset);
+          titleDiv.addEventListener('mouseup', this.reset);
+          titleDiv.addEventListener('mouseleave', this.reset);
+        }
+      } else {
+        this.reset();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state = this.state,
+          title = _this$state.title,
+          left = _this$state.left,
+          top = _this$state.top,
+          arrowLeft = _this$state.arrowLeft,
+          arrowTop = _this$state.arrowTop,
+          isArrowDown = _this$state.isArrowDown,
+          isArrowRight = _this$state.isArrowRight,
+          isArrowHorizontal = _this$state.isArrowHorizontal,
+          width = _this$state.width,
+          isHtml = _this$state.isHtml,
+          dataTooltipnoArrow = _this$state.dataTooltipnoArrow,
+          dataTooltipWrap = _this$state.dataTooltipWrap;
+      var _this$props = this.props,
+          dataId = _this$props.dataId,
+          customClass = _this$props.customClass;
+      var arrowStyle = isArrowHorizontal ? isArrowRight ? _TooltipModule["default"].arrowRight : _TooltipModule["default"].arrowLeft : isArrowDown ? _TooltipModule["default"].arrowDown : _TooltipModule["default"].arrowUp;
+      title = title ? title.trim() : null;
+      var tooltipCss = "".concat(_TooltipModule["default"].tooltipcont, " ").concat(dataTooltipWrap ? _TooltipModule["default"].tooltipWrapCont : _TooltipModule["default"].tooltipNormalCont);
+      return title ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "".concat(customClass, " ").concat(_TooltipModule["default"].tooltiptext),
+        style: {
+          left: left,
+          top: top,
+          width: width
+        },
+        ref: this.getToolTipDOM,
+        "data-id": dataId
+      }, !dataTooltipnoArrow ? /*#__PURE__*/_react["default"].createElement("span", {
+        className: "".concat(_TooltipModule["default"].tooltiparrow, " ").concat(arrowStyle),
+        style: {
+          left: arrowLeft,
+          top: arrowTop
+        }
+      }) : null, isHtml ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: tooltipCss,
+        dangerouslySetInnerHTML: {
+          __html: title
+        }
+      }) : /*#__PURE__*/_react["default"].createElement("div", {
+        className: tooltipCss
+      }, title)) : null;
+    }
+  }]);
+
+  return Tooltip;
+}(_react["default"].Component);
+
+exports["default"] = Tooltip;
+Tooltip.propTypes = _propTypes.propTypes;
+Tooltip.defaultProps = _defaultProps.defaultProps;
+
+if (false) {
+  Tooltip.docs = {
+    componentGroup: 'Atom',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/lib/Tooltip/Tooltip.module.css

@@ -0,0 +1,109 @@
+.tooltiptext {
+  position: fixed;
+  z-index: 9999999; /*Hook for editor alert*/
+  pointer-events: none;
+  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
+  border-radius: var(--zd_size4);
+}[dir=ltr] .tooltiptext {
+  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
+}[dir=rtl] .tooltiptext {
+  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
+}
+.tooltipcont {
+  color: var(--zdt_tooltip_default_text);
+  font-size: var(--zd_font_size13);
+  font-family: var(--zd_semibold);
+  word-break: break-word;
+  max-width: 420px;
+  line-height: var(--zd_size20);
+  min-height: var(--zd_size24);
+  overflow: hidden;
+  background-color: var(--zdt_tooltip_default_bg);
+  padding: 0 var(--zd_size10);
+  border-style: solid;
+  border-color: transparent;
+  border-radius: var(--zd_size4);
+}
+.tooltipWrapCont {
+  white-space: pre-wrap;
+}
+.tooltipNormalCont {
+  white-space: normal;
+}
+.tooltiparrow {
+  content: '';
+  position: absolute;
+  top: 0;
+  border-top-left-radius: 3px;
+}
+.arrowUp,
+.arrowDown {
+  width: 11px;
+  height: 11px;
+  border-top: solid 6px var(--zdt_tooltip_default_bg);
+  border-left: solid 6px var(--zdt_tooltip_default_bg);
+  border-right: solid 6px transparent;
+  border-bottom: solid 6px transparent;
+}
+.arrowDown {
+  margin-top: -4px !important; /* put important because of '.wms-mainui *' have margin: 0; */
+}
+.arrowLeft,
+.arrowRight {
+  width: 11px;
+  height: 11px;
+  border-top: solid 6px var(--zdt_tooltip_default_bg);
+  border-left: solid 6px var(--zdt_tooltip_default_bg);
+  border-right: solid 6px transparent;
+  border-bottom: solid 6px transparent;
+}
+.arrowRight {
+  margin-left: -2px;
+}
+.arrowLeft {
+  margin-left: 1px;
+}
+.arrowUp {
+  transform: rotate(45deg);
+}
+.arrowDown {
+  transform: rotate(225deg);
+}
+.arrowLeft {
+  transform: rotate(315deg) translateY(-50%);
+}
+.arrowRight {
+  transform: rotate(135deg) translateY(50%);
+}
+@keyframes tooltip-grow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes tooltip-grow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-moz-keyframes tooltip-grow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-ms-keyframes tooltip-grow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}