@zohodesk/components
Version:
Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development
599 lines (518 loc) • 28.7 kB
JavaScript
;
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 _ResizeObserver = _interopRequireDefault(require("../Responsive/ResizeObserver"));
var _selectn = _interopRequireDefault(require("selectn"));
var _cssUtils = require("../utils/cssUtils");
var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
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');
var isInputElementType = element.type === 'text';
var elementText = isInputElementType ? element.value : element.innerText;
if (element.nodeName !== 'I' && elementText && elementText.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 {
var offWidth = (0, _selectn["default"])('parentElement.offsetWidth', element) || 0;
var scrollWidth = (0, _selectn["default"])('parentElement.scrollWidth', element) || 0;
isContentDotted = offWidth < scrollWidth;
}
var originText = elementText.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') || 'normal'; // values: normal, pre, pre-wrap, pre-line, nowrap, break-spaces
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 tooltipWhiteSpaceModification = dataTooltipWrap;
if (dataTooltipWrap == 'pre') {
tooltipWhiteSpaceModification = 'pre-wrap';
} else if (dataTooltipWrap == 'nowrap') {
tooltipWhiteSpaceModification = 'normal';
}
var tooltipCss = "".concat(_TooltipModule["default"].tooltipcont, " ").concat(_cssUtils.whiteSpaceClassMapping[tooltipWhiteSpaceModification]);
return title ? /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(_TooltipModule["default"].tooltiptext, " ").concat(customClass),
style: {
left: left,
top: top,
width: width
},
ref: this.getToolTipDOM,
"data-id": dataId,
"data-test-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 (__DOCS__) {
// Tooltip.docs = {
// componentGroup: 'Atom',
// folderName: 'Style Guide',
// description: ' ',
// external: true
// };
// }