fix(flamegraph): Make table tooltip invisible when user not hovering …

…on table (#1749)
grafana · Nov 29, 2022 · 5210aa7 · 5210aa7
1 parent e490138
commit 5210aa7
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/cypress/integration/webapp/basic.ts b/cypress/integration/webapp/basic.ts
@@ -138,7 +138,6 @@ describe('basic test', () => {
       });
   });
 
-  //
   it('validates "Reset View" button works', () => {
     cy.intercept('**/render*', {
       fixture: 'simple-golang-app-cpu.json',
@@ -221,7 +220,7 @@ describe('basic test', () => {
       findFlamegraph(1)
         .findByTestId('flamegraph-view')
         .findByTestId('tooltip')
-        .should('be.visible');
+        .should('have.css', 'visibility', 'visible');
 
       findFlamegraph(1)
         .findByTestId('tooltip-title')
@@ -255,7 +254,7 @@ describe('basic test', () => {
       findFlamegraph(2)
         .findByTestId('flamegraph-view')
         .findByTestId('tooltip')
-        .should('be.visible');
+        .should('have.css', 'visibility', 'visible');
 
       findFlamegraph(2)
         .findByTestId('tooltip-title')
@@ -301,7 +300,7 @@ describe('basic test', () => {
       cy.waitForFlamegraphToRender().trigger('mousemove', 0, 0);
       cy.findByTestId('flamegraph-view')
         .findByTestId('tooltip')
-        .should('be.visible');
+        .should('have.css', 'visibility', 'visible');
 
       cy.findByTestId('tooltip-title').should('have.text', 'total');
       cy.findByTestId('tooltip-table').should(
@@ -328,7 +327,7 @@ describe('basic test', () => {
       cy.findByTestId('table-view').trigger('mousemove', 150, 80);
       cy.findByTestId('table-view')
         .findByTestId('tooltip')
-        .should('be.visible');
+        .should('have.css', 'visibility', 'visible');
 
       cy.findByTestId('tooltip-table').should(
         'have.text',
@@ -356,7 +355,7 @@ describe('basic test', () => {
       cy.findByTestId('table-view').trigger('mousemove', 150, 80);
       cy.findByTestId('table-view')
         .findByTestId('tooltip')
-        .should('be.visible');
+        .should('have.css', 'visibility', 'visible');
 
       cy.findByTestId('tooltip-table').should(
         'have.text',

diff --git a/packages/pyroscope-flamegraph/src/Tooltip/Tooltip.module.scss b/packages/pyroscope-flamegraph/src/Tooltip/Tooltip.module.scss
@@ -8,6 +8,7 @@
   font-size: 12px;
   visibility: hidden;
   z-index: 2;
+  pointer-events: none;
 
   &.flamegraphDiffTooltip {
     width: 450px;