diff --git a/src/components/ToolTip/ToolTip.js b/src/components/ToolTip/ToolTip.js index b0eee7aab..68126154a 100644 --- a/src/components/ToolTip/ToolTip.js +++ b/src/components/ToolTip/ToolTip.js @@ -3,7 +3,7 @@ import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import { translate } from 'react-i18next'; -import { isMac } from 'helpers/device'; +import { isMac, isIOS, isAndroid } from 'helpers/device'; import './ToolTip.scss'; @@ -68,16 +68,15 @@ class ToolTip extends React.PureComponent { } addEventListeners = DOMElement => { - if (!DOMElement) { - // we have this check just to make sure UI doesn't blow up when DOMElement is null - // although we haven't met this situation + try { + DOMElement.addEventListener('mouseenter', this.show); + DOMElement.addEventListener('mouseleave', this.hide); + DOMElement.addEventListener('click', this.hide); + } catch (e) { + // we have this catch block here just to make sure UI doesn't blow up when DOMElement is null + // although we haven't met this situation yet console.warn(`${this.props.children} is rendering null`); - return; } - - DOMElement.addEventListener('mouseenter', this.show); - DOMElement.addEventListener('mouseleave', this.hide); - DOMElement.addEventListener('click', this.hide); } setTopAndLeft = DOMElement => { @@ -117,7 +116,7 @@ class ToolTip extends React.PureComponent { show = () => { this.showTimer = setTimeout(() => { this.setState({ show: true }); - }, this.props.delayShow); + }, this.props.delayShow - this.opacityTimeout); } hide = () => { @@ -174,12 +173,13 @@ class ToolTip extends React.PureComponent { render() { const { location, content } = this.props; + const isUsingMobileDevices = isIOS || isAndroid; return ( {this.renderChildren()} { - this.state.show && content && + this.state.show && content && !isUsingMobileDevices && ReactDOM.createPortal(
{this.renderContent()}
diff --git a/src/helpers/device.js b/src/helpers/device.js index f8e48df70..41bd5637c 100644 --- a/src/helpers/device.js +++ b/src/helpers/device.js @@ -5,4 +5,5 @@ export const isIEEdge = navigator.userAgent.indexOf('Edge') > -1; export const isIE11 = navigator.userAgent.indexOf('Trident/7.0') > -1; export const isIE = navigator.userAgent.indexOf('Edge') > -1 || navigator.userAgent.indexOf('Trident/7.0') > -1; export const isIOS = window.navigator.userAgent.match(/(iPad|iPhone|iPod)/i); +export const isAndroid = window.navigator.userAgent.match(/Android/i); export const isMac = navigator.appVersion.indexOf('Mac') > -1; \ No newline at end of file