Create separate tooltip for domains and lollipop

Author: rnugraha

src/components/Domain.js

@@ -85,7 +85,7 @@ class Domain extends React.Component {
           height={this.props.height}
           style={{opacity: 0}}
           data-tip={getTooltipContent(this.props.tooltip)}
-          data-for='svgTooltip'
+          data-for='domainTooltip'
         />
       </g>
     )

src/components/Lollipop.js

@@ -72,7 +72,7 @@ class Lollipop extends React.Component {
           cx={this.circleX()}
           cy={this.circleY()}
           data-tip={getTooltipContent(this.props.tooltip)}
-          data-for='svgTooltip'
+          data-for='lollipopTooltip'
         />
         {label}
       </g>

src/components/Tooltip.js

@@ -8,21 +8,27 @@ export const getTooltipContent = (tooltip) => {
   return (`<div>${header}${body}</div>`)
 }
 
-const getContentHandler = (dataTip) => {
-  if (!dataTip) return ''
-  return (dataTip)
-}
+class Tooltip extends React.Component {
+  componentDidUpdate() {
+    ReactTooltip.rebuild()
+  }
+
+  getContentHandler = (dataTip) => {
+    if (!dataTip) return ''
+    return (dataTip)
+  }
 
-const tooltip = (props) => {
-  return (<ReactTooltip
-    id={props.id}
-    html={true}
-    getContent={getContentHandler}
-  />)
+  render() {
+    return (<ReactTooltip
+      id={this.props.id}
+      html={true}
+      getContent={this.getContentHandler}
+    />)
+  }
 }
 
-tooltip.propTypes = {
+Tooltip.propTypes = {
   id: PropTypes.string
 }
 
-export default tooltip
+export default Tooltip

src/index.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
 import Lollipop, {lollipopSpec} from './components/Lollipop'
 import Domain, {domainSpec} from './components/Domain'
 import SVGAxis from './components/SVGAxis'
-import Tooltip, {getTooltipContent} from './components/Tooltip'
+import Tooltip from './components/Tooltip'
 
 const LOLLIPOP_ID_CLASS_PREFIX = 'lollipop-'
 const DOMAIN_ID_CLASS_PREFIX = 'domain-'
@@ -240,7 +240,8 @@ class LollipopPlot extends React.Component {
             label={`# ${this.props.hugoGeneSymbol} Mutations`}
           />
         </svg>
-        <Tooltip id='svgTooltip' />
+        <Tooltip id='domainTooltip' />
+        <Tooltip id='lollipopTooltip' />
       </React.Fragment>
     )
   }