Fix tooltips not always showing up

Tooltip wouldn't show if is required in certain conditions. For example,
it wouldn't show if is inside Endpoint modal, especially difficult for
it to show up after changing tabs from 'Simple' to 'Advanced'.

package.json

@@ -97,7 +97,7 @@
     "react-motion": "^0.5.2",
     "react-notification-system": "^0.2.15",
     "react-router-dom": "^4.2.2",
-    "react-tooltip": "^3.4.0",
+    "react-tooltip": "^3.10.0",
     "require-without-cache": "^0.0.6",
     "rimraf": "^2.6.2",
     "styled-components": "2.2.0",

src/components/App.jsx

@@ -36,6 +36,7 @@ import UsersPage from './pages/UsersPage'
 import UserDetailsPage from './pages/UserDetailsPage'
 import ProjectsPage from './pages/ProjectsPage'
 import ProjectDetailsPage from './pages/ProjectDetailsPage'
+import Tooltip from './atoms/Tooltip/Tooltip'
 
 import { navigationMenu } from '../constants'
 import Palette from './styleUtils/Palette'
@@ -117,6 +118,7 @@ class App extends React.Component<{}, State> {
           <Route component={NotFoundPage} />
         </Switch>
         <Notifications />
+        <Tooltip />
       </Wrapper >
     )
   }

src/components/atoms/Tooltip/Tooltip.jsx

@@ -20,6 +20,7 @@ import { injectGlobal } from 'styled-components'
 import ReactTooltip from 'react-tooltip'
 
 import Palette from '../../styleUtils/Palette'
+import StyleProps from '../../styleUtils/StyleProps'
 
 injectGlobal`
   .reactTooltip {
@@ -30,6 +31,8 @@ injectGlobal`
     box-shadow: 0 0 9px 1px rgba(32, 34, 52, 0.1);
     margin-left: 12px !important;
     opacity: 1 !important;
+    z-index: 999999;
+    transition: opacity ${StyleProps.animations.swift};
     &:after {
       border-right-color: ${Palette.grayscale[1]} !important;
       border-right-width: 8px !important;
@@ -43,14 +46,19 @@ injectGlobal`
 
 @observer
 class Tooltip extends React.Component<{}> {
-  static rebuild = () => {
-    ReactTooltip.rebuild()
+  intervalId: IntervalID
+
+  componentWillMount() {
+    if (this.intervalId) {
+      return
+    }
+    this.intervalId = setInterval(() => {
+      ReactTooltip.rebuild()
+    }, 1000)
   }
 
   render() {
-    return (
-      <ReactTooltip place="right" effect="solid" className="reactTooltip" />
-    )
+    return <ReactTooltip place="right" effect="solid" className="reactTooltip" />
   }
 }
 

src/components/organisms/AssessmentDetailsContent/AssessmentDetailsContent.jsx

@@ -26,7 +26,6 @@ import DropdownLink from '../../molecules/DropdownLink'
 import Table from '../../molecules/Table'
 import AssessedVmListItem from '../../molecules/AssessedVmListItem'
 import DropdownFilter from '../../molecules/DropdownFilter'
-import Tooltip from '../../atoms/Tooltip'
 import Checkbox from '../../atoms/Checkbox'
 import SmallLoading from '../../atoms/SmallLoading'
 
@@ -214,10 +213,6 @@ class AssessmentDetailsContent extends React.Component<Props> {
     page: '',
   }
 
-  componentDidUpdate() {
-    Tooltip.rebuild()
-  }
-
   doesVmMatchSource(vm: VmItem) {
     if (!this.props.sourceEndpoint || !this.props.sourceEndpoint.connection_info) {
       return false
@@ -513,7 +508,6 @@ class AssessmentDetailsContent extends React.Component<Props> {
           {this.props.detailsLoading ? null : this.renderVmsTable()}
           {this.props.detailsLoading || this.props.instancesLoading ? null : this.renderNetworkTable()}
           {this.props.detailsLoading ? null : this.renderButtons()}
-          <Tooltip />
         </DetailsBody>
       </Wrapper>
     )

src/components/organisms/AssessmentMigrationOptions/AssessmentMigrationOptions.jsx

@@ -21,7 +21,6 @@ import styled from 'styled-components'
 import Button from '../../atoms/Button'
 import EndpointField from '../../molecules/EndpointField'
 import ToggleButtonBar from '../../../components/atoms/ToggleButtonBar'
-import Tooltip from '../../atoms/Tooltip'
 
 import type { Field } from '../../../types/Field'
 
@@ -122,7 +121,6 @@ class AssessmentMigrationOptions extends React.Component<Props, State> {
     if (prevState.showAdvancedOptions !== this.state.showAdvancedOptions && this.props.onResizeUpdate) {
       this.props.onResizeUpdate(this.scrollableRef)
     }
-    Tooltip.rebuild()
   }
 
   handleValueChange(fieldName: string, value: any) {
@@ -237,7 +235,6 @@ class AssessmentMigrationOptions extends React.Component<Props, State> {
     return (
       <Fields innerRef={ref => { this.scrollableRef = ref }}>
         {rows}
-        <Tooltip />
       </Fields>
     )
   }

src/components/organisms/Endpoint/Endpoint.jsx

@@ -22,7 +22,6 @@ import { observe } from 'mobx'
 import EndpointLogos from '../../atoms/EndpointLogos'
 import StatusIcon from '../../atoms/StatusIcon'
 import CopyButton from '../../atoms/CopyButton'
-import Tooltip from '../../atoms/Tooltip'
 import StatusImage from '../../atoms/StatusImage'
 import Button from '../../atoms/Button'
 import LoadingButton from '../../molecules/LoadingButton'
@@ -404,8 +403,6 @@ class Endpoint extends React.Component<Props, State> {
           onResizeUpdate: (scrollOffset: number) => { this.props.onResizeUpdate(this.scrollableRef, scrollOffset) },
         })}
         {this.renderButtons()}
-        <Tooltip />
-        {Tooltip.rebuild()}
       </Content>
     )
   }

src/components/organisms/EndpointDuplicateOptions/EndpointDuplicateOptions.jsx

@@ -27,7 +27,6 @@ import type { Project } from '../../../types/Project'
 import Palette from '../../styleUtils/Palette'
 
 import duplicateImage from './images/duplicate.svg'
-import Tooltip from '../../atoms/Tooltip'
 
 const Wrapper = styled.div`
   display: flex;
@@ -131,8 +130,6 @@ class EndpointDuplicateOptions extends React.Component<Props, State> {
             onChange={projectId => { this.setState({ selectedProjectId: projectId }) }}
             width={318}
           />
-          <Tooltip />
-          {Tooltip.rebuild()}
         </Form>
         <Buttons>
           <Button secondary onClick={this.props.onCancelClick}>Cancel</Button>

src/components/organisms/MainList/MainList.jsx

@@ -20,7 +20,6 @@ import styled from 'styled-components'
 
 import StatusImage from '../../atoms/StatusImage'
 import Button from '../../atoms/Button'
-import Tooltip from '../../atoms/Tooltip'
 
 import type { MainItem } from '../../../types/MainItem'
 import Palette from '../../styleUtils/Palette'
@@ -181,16 +180,10 @@ class MainList extends React.Component<Props> {
       return this.renderList()
     }
 
-    let rebuildTooltip = () => {
-      setTimeout(() => { Tooltip.rebuild() }, 500)
-    }
-
     return (
       <Wrapper>
         {this.props.loading || this.props.items.length === 0 || this.props.showEmptyList ? <Separator /> : null}
         {renderContent()}
-        <Tooltip />
-        {rebuildTooltip()}
       </Wrapper>
     )
   }

src/components/organisms/WizardOptions/WizardOptions.jsx

@@ -19,7 +19,6 @@ import styled from 'styled-components'
 import { observer } from 'mobx-react'
 import autobind from 'autobind-decorator'
 
-import Tooltip from '../../atoms/Tooltip'
 import StyleProps from '../../styleUtils/StyleProps'
 import ToggleButtonBar from '../../atoms/ToggleButtonBar'
 import WizardOptionsField from '../../molecules/WizardOptionsField'
@@ -96,10 +95,6 @@ class WizardOptions extends React.Component<Props> {
     window.addEventListener('resize', this.handleResize)
   }
 
-  componentDidUpdate() {
-    Tooltip.rebuild()
-  }
-
   componentWillUnmount() {
     window.removeEventListener('resize', this.handleResize, false)
   }
@@ -222,7 +217,6 @@ class WizardOptions extends React.Component<Props> {
           <OneColumn>
             {fields.map(f => f.component)}
           </OneColumn>
-          <Tooltip />
         </Fields>
       )
     }
@@ -235,7 +229,6 @@ class WizardOptions extends React.Component<Props> {
         <Column right>
           {fields.map(f => f.column === 'right' && f.component)}
         </Column>
-        <Tooltip />
       </Fields>
     )
   }

yarn.lock

@@ -7288,9 +7288,10 @@ react-test-renderer@^16.0.0-0:
     react-is "^16.8.4"
     scheduler "^0.13.4"
 
-react-tooltip@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-3.4.0.tgz#037f38f797c3e6b1b58d2534ccc8c2c76af4f52d"
+react-tooltip@^3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-3.10.0.tgz#268b5ef519fd8a1369288d1f086f42c90d5da7ef"
+  integrity sha512-GGdxJvM1zSFztkTP7gCQbLTstWr1OOoMpJ5WZUGhimj0nhRY+MPz+92MpEnKmj0cftJ9Pd/M6FfSl0sfzmZWkg==
   dependencies:
     classnames "^2.2.5"
     prop-types "^15.6.0"