Ensure no funnel tooltips appear on the main graph (#5638)

* Ensure no funnel tooltips appear on the main graph

* Update CHANGELOG

Funnels are not available in CE anyway 🤷

assets/css/app.css

@@ -270,17 +270,6 @@ iframe[hidden] {
   @apply cursor-default bg-gray-100 dark:bg-gray-300 pointer-events-none;
 }
 
-#chartjs-tooltip {
-  background-color: rgba(25 30 56);
-  position: absolute;
-  font-size: 14px;
-  font-style: normal;
-  padding: 10px 12px;
-  pointer-events: none;
-  border-radius: 5px;
-  z-index: 100;
-}
-
 /* This class is used for styling embedded dashboards. Do not remove. */
 /* stylelint-disable */
 /* prettier-ignore */

assets/css/chartjs.css

@@ -1,4 +1,4 @@
-#chartjs-tooltip {
+.chartjs-tooltip {
   background-color: rgb(25 30 56);
   position: absolute;
   font-size: 14px;

assets/js/dashboard/extra/funnel-tooltip.js

@@ -3,21 +3,18 @@ export default function FunnelTooltip(palette, funnel) {
     const tooltipModel = context.tooltip
     const dataIndex = tooltipModel.dataPoints[0].dataIndex
     const offset = document.getElementById('funnel').getBoundingClientRect()
-    let tooltipEl = document.getElementById('chartjs-tooltip')
+    let tooltipEl = document.getElementById('chartjs-tooltip-funnel')
 
     if (!tooltipEl) {
       tooltipEl = document.createElement('div')
-      tooltipEl.id = 'chartjs-tooltip'
+      tooltipEl.id = 'chartjs-tooltip-funnel'
+      tooltipEl.className = 'chartjs-tooltip'
       tooltipEl.style.display = 'none'
       tooltipEl.style.opacity = 0
       document.body.appendChild(tooltipEl)
     }
 
-    if (tooltipEl && offset && window.innerWidth < 768) {
-      tooltipEl.style.top =
-        offset.y + offset.height + window.scrollY + 15 + 'px'
-      tooltipEl.style.left = offset.x + 'px'
-      tooltipEl.style.right = null
+    if (tooltipEl && offset) {
       tooltipEl.style.opacity = 1
     }
 

assets/js/dashboard/extra/funnel.js

@@ -67,6 +67,29 @@ export default function Funnel({ funnelName, tabs }) {
     }
   }, [])
 
+  const repositionFunnelTooltip = (e) => {
+    const tooltipEl = document.getElementById('chartjs-tooltip-funnel')
+    if (tooltipEl && window.innerWidth >= 768) {
+      if (e.clientX > 0.66 * window.innerWidth) {
+        tooltipEl.style.right =
+          window.innerWidth - e.clientX + window.pageXOffset + 'px'
+        tooltipEl.style.left = null
+      } else {
+        tooltipEl.style.right = null
+        tooltipEl.style.left = e.clientX + window.pageXOffset + 'px'
+      }
+      tooltipEl.style.top = e.clientY + window.pageYOffset + 'px'
+      tooltipEl.style.opacity = 1
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('mousemove', repositionFunnelTooltip)
+    return () => {
+      window.removeEventListener('mousemove', repositionFunnelTooltip)
+    }
+  }, [])
+
   const isDarkMode = () => {
     return document.querySelector('html').classList.contains('dark') || false
   }

assets/js/dashboard/stats/graph/graph-tooltip.js

@@ -105,11 +105,12 @@ export default function GraphTooltip(graphData, metric, query) {
     const offset = document
       .getElementById('main-graph-canvas')
       .getBoundingClientRect()
-    let tooltipEl = document.getElementById('chartjs-tooltip')
+    let tooltipEl = document.getElementById('chartjs-tooltip-main')
 
     if (!tooltipEl) {
       tooltipEl = document.createElement('div')
-      tooltipEl.id = 'chartjs-tooltip'
+      tooltipEl.id = 'chartjs-tooltip-main'
+      tooltipEl.className = 'chartjs-tooltip'
       tooltipEl.style.display = 'none'
       tooltipEl.style.opacity = 0
       document.body.appendChild(tooltipEl)

assets/js/dashboard/stats/graph/line-graph.js

@@ -157,7 +157,7 @@ class LineGraph extends React.Component {
   }
 
   repositionTooltip(e) {
-    const tooltipEl = document.getElementById('chartjs-tooltip')
+    const tooltipEl = document.getElementById('chartjs-tooltip-main')
     if (tooltipEl && window.innerWidth >= 768) {
       if (e.clientX > 0.66 * window.innerWidth) {
         tooltipEl.style.right =
@@ -181,7 +181,7 @@ class LineGraph extends React.Component {
 
   componentDidUpdate(prevProps) {
     const { graphData, darkTheme } = this.props
-    const tooltip = document.getElementById('chartjs-tooltip')
+    const tooltip = document.getElementById('chartjs-tooltip-main')
 
     if (
       graphData !== prevProps.graphData ||
@@ -213,7 +213,7 @@ class LineGraph extends React.Component {
 
   componentWillUnmount() {
     // Ensure that the tooltip doesn't hang around when we are loading more data
-    const tooltip = document.getElementById('chartjs-tooltip')
+    const tooltip = document.getElementById('chartjs-tooltip-main')
     if (tooltip) {
       tooltip.style.opacity = 0
       tooltip.style.display = 'none'