Use a variable for tooltip delays

webview/src/experiments/components/App.test.tsx

@@ -21,7 +21,7 @@ import {
   tableData as sortingTableDataFixture
 } from '../../test/sort'
 import {
-  CELL_TOOLTIP_DELAY,
+  NORMAL_TOOLTIP_DELAY,
   HEADER_TOOLTIP_DELAY
 } from '../../shared/components/tooltip/Tooltip'
 import { getRow } from '../../test/queries'
@@ -610,7 +610,7 @@ describe('App', () => {
       const testParamCell = screen.getByText(testParamStringValue)
       fireEvent.mouseEnter(testParamCell, { bubbles: true })
 
-      jest.advanceTimersByTime(CELL_TOOLTIP_DELAY - 1)
+      jest.advanceTimersByTime(NORMAL_TOOLTIP_DELAY[0] - 1)
       expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
 
       jest.advanceTimersByTime(1)
@@ -621,7 +621,7 @@ describe('App', () => {
 
       fireEvent.mouseLeave(testParamCell, { bubbles: true })
 
-      jest.advanceTimersByTime(CELL_TOOLTIP_DELAY)
+      jest.advanceTimersByTime(NORMAL_TOOLTIP_DELAY[0])
       expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
     })
 
@@ -631,14 +631,14 @@ describe('App', () => {
       const testParamCell = screen.getByText(testParamStringValue)
       fireEvent.mouseEnter(testParamCell, { bubbles: true })
 
-      jest.advanceTimersByTime(CELL_TOOLTIP_DELAY)
+      jest.advanceTimersByTime(NORMAL_TOOLTIP_DELAY[0])
       const tooltip = screen.getByRole('tooltip')
       expect(tooltip).toBeInTheDocument()
 
       fireEvent.mouseLeave(testParamCell, { bubbles: true })
       fireEvent.mouseEnter(tooltip, { bubbles: true })
 
-      jest.advanceTimersByTime(CELL_TOOLTIP_DELAY)
+      jest.advanceTimersByTime(NORMAL_TOOLTIP_DELAY[0])
       expect(tooltip).toBeInTheDocument()
     })
 
@@ -652,13 +652,13 @@ describe('App', () => {
 
         fireEvent.mouseEnter(testParamCell, { bubbles: true })
 
-        jest.advanceTimersByTime(CELL_TOOLTIP_DELAY)
+        jest.advanceTimersByTime(NORMAL_TOOLTIP_DELAY[0])
         const tooltip = screen.queryByRole('tooltip')
         expect(tooltip).toHaveTextContent(expectedTooltipResult)
 
         fireEvent.mouseLeave(testParamCell, { bubbles: true })
 
-        jest.advanceTimersByTime(CELL_TOOLTIP_DELAY)
+        jest.advanceTimersByTime(NORMAL_TOOLTIP_DELAY[0])
         expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
       }
 

webview/src/experiments/components/table/CellHintTooltip.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode, ReactElement } from 'react'
 import { TippyProps } from '@tippyjs/react'
 import styles from './styles.module.scss'
 import Tooltip, {
-  CELL_TOOLTIP_DELAY
+  NORMAL_TOOLTIP_DELAY
 } from '../../../shared/components/tooltip/Tooltip'
 
 export type CellHintTooltipProps = {
@@ -13,7 +13,7 @@ export type CellHintTooltipProps = {
 export const CellHintTooltip: React.FC<CellHintTooltipProps & TippyProps> = ({
   tooltipContent,
   children,
-  delay = [CELL_TOOLTIP_DELAY, 0]
+  delay = NORMAL_TOOLTIP_DELAY
 }) => {
   return (
     <Tooltip

webview/src/experiments/util/buildDynamicColumns.tsx

@@ -16,7 +16,7 @@ import {
 import { Value } from 'dvc/src/cli/dvc/reader'
 import { formatFloat } from './numberFormatting'
 import Tooltip, {
-  CELL_TOOLTIP_DELAY
+  NORMAL_TOOLTIP_DELAY
 } from '../../shared/components/tooltip/Tooltip'
 import styles from '../components/table/styles.module.scss'
 import { CopyButton } from '../../shared/components/copyButton/CopyButton'
@@ -97,7 +97,7 @@ const Cell: React.FC<Cell<Experiment, CellValue>> = cell => {
     <Tooltip
       content={<CellTooltip stringValue={stringValue} />}
       placement="bottom-end"
-      delay={[CELL_TOOLTIP_DELAY, 0]}
+      delay={NORMAL_TOOLTIP_DELAY}
       interactive={true}
     >
       <div className={styles.innerCell}>

webview/src/plots/components/comparisonTable/ComparisonTableRow.tsx

@@ -11,7 +11,9 @@ import { ChevronDown, ChevronRight } from '../../../shared/components/icons'
 import { PlotsState } from '../../store'
 import { CopyButton } from '../../../shared/components/copyButton/CopyButton'
 import { isSelecting } from '../../../util/strings'
-import Tooltip from '../../../shared/components/tooltip/Tooltip'
+import Tooltip, {
+  NORMAL_TOOLTIP_DELAY
+} from '../../../shared/components/tooltip/Tooltip'
 
 export interface ComparisonTableRowProps {
   path: string
@@ -51,7 +53,7 @@ export const ComparisonTableRow: React.FC<ComparisonTableRowProps> = ({
               <Tooltip
                 content={path}
                 placement="bottom-start"
-                delay={[1000, 0]}
+                delay={NORMAL_TOOLTIP_DELAY}
               >
                 <span className={styles.pathText}>{path}</span>
               </Tooltip>

webview/src/shared/components/tooltip/Tooltip.tsx

@@ -5,7 +5,7 @@ import styles from './styles.module.scss'
 import 'tippy.js/dist/tippy.css'
 
 export const HEADER_TOOLTIP_DELAY = 100
-export const CELL_TOOLTIP_DELAY = 1000
+export const NORMAL_TOOLTIP_DELAY = [1000, 0] as [number, number]
 
 const hideOnEsc = {
   defaultValue: true,

webview/src/stories/Table.stories.tsx

@@ -18,13 +18,13 @@ import Experiments from '../experiments/components/Experiments'
 
 import './test-vscode-styles.scss'
 import '../shared/style.scss'
-import { CELL_TOOLTIP_DELAY } from '../shared/components/tooltip/Tooltip'
 import {
   setExperimentsAsSelected,
   setExperimentsAsStarred
 } from '../test/tableDataFixture'
 import { experimentsReducers } from '../experiments/store'
 import { TableDataState } from '../experiments/components/table/tableDataSlice'
+import { NORMAL_TOOLTIP_DELAY } from '../shared/components/tooltip/Tooltip'
 
 const tableData: TableDataState = {
   changes: workspaceChangesFixture,
@@ -182,7 +182,7 @@ WithAllDataTypes.play = async ({ canvasElement }) => {
   userEvent.hover(falseCell, { bubbles: true })
 }
 WithAllDataTypes.parameters = {
-  chromatic: { delay: CELL_TOOLTIP_DELAY }
+  chromatic: { delay: NORMAL_TOOLTIP_DELAY[0] }
 }
 
 export const WithDeeplyNestedHeaders = Template.bind({})