Popover timing tweaks (#48888)

* Increase the size of the overlay spacer

* Increase the delay of the popover opening

* Hard-code the popover delays

* Remove delay props from info components

* Fix unit test

* Shorten popover timeout to 500ms

* Make popover delay configurable again

* Increase openDelay for header info

frontend/src/metabase/components/MetadataInfo/ColumnInfoIcon/ColumnInfoIcon.tsx

@@ -27,7 +27,6 @@ type QueryColumnInfoIconProps = QueryColumnInfoPopoverProps & {
 
 export function QueryColumnInfoIcon({
   className,
-  delay,
   size,
   icon,
   color,
@@ -40,7 +39,7 @@ export function QueryColumnInfoIcon({
 
   return (
     <>
-      <QueryColumnInfoPopover {...props} delay={delay}>
+      <QueryColumnInfoPopover {...props}>
         <span aria-label={t`More info`}>
           <PopoverDefaultIcon
             className={className}
@@ -70,7 +69,6 @@ type TableColumnInfoIconProps = TableColumnInfoPopoverProps & {
 
 export function TableColumnInfoIcon({
   className,
-  delay,
   field,
   icon,
   size,
@@ -78,7 +76,7 @@ export function TableColumnInfoIcon({
   ...props
 }: TableColumnInfoIconProps) {
   return (
-    <TableColumnInfoPopover {...props} field={field} delay={delay}>
+    <TableColumnInfoPopover {...props} field={field}>
       <span aria-label={t`More info`}>
         <PopoverDefaultIcon
           className={className}

frontend/src/metabase/components/MetadataInfo/ColumnInfoIcon/ColumnInfoIcon.unit.spec.tsx

-import { fireEvent, render, screen } from "__support__/ui";
+import { fireEvent, render, screen, waitFor } from "__support__/ui";
 import * as Lib from "metabase-lib";
 import { columnFinder, createQuery } from "metabase-lib/test-helpers";
 
@@ -26,6 +26,13 @@ describe("QueryColumnInfoIcon", () => {
 
     fireEvent.mouseEnter(icon);
 
-    expect(await screen.findByText("Category")).toBeInTheDocument();
+    await waitFor(
+      () => {
+        expect(screen.getByText("Category")).toBeInTheDocument();
+      },
+      {
+        timeout: 1200,
+      },
+    );
   });
 });

frontend/src/metabase/components/MetadataInfo/ColumnInfoPopover/ColumnInfoPopover.tsx

@@ -8,16 +8,16 @@ export type QueryColumnInfoPopoverProps = QueryColumnInfoProps &
 
 export function QueryColumnInfoPopover({
   position,
-  delay,
   disabled,
   children,
+  openDelay,
   ...rest
 }: QueryColumnInfoPopoverProps) {
   return (
     <Popover
       position={position}
-      delay={delay}
       disabled={disabled}
+      openDelay={openDelay}
       content={<QueryColumnInfo {...rest} />}
     >
       {children}
@@ -30,16 +30,16 @@ export type TableColumnInfoPopoverProps = TableColumnInfoProps &
 
 export function TableColumnInfoPopover({
   position,
-  delay,
   disabled,
+  openDelay,
   children,
   ...rest
 }: TableColumnInfoPopoverProps) {
   return (
     <Popover
       position={position}
-      delay={delay}
       disabled={disabled}
+      openDelay={openDelay}
       content={<TableColumnInfo {...rest} />}
     >
       {children}

frontend/src/metabase/components/MetadataInfo/Popover/Popover.styled.tsx

@@ -15,6 +15,6 @@ export const HackyInvisibleTargetFiller = styled.div`
   position: absolute;
   width: 100%;
   top: -10px;
-  min-height: 5px;
+  min-height: 10px;
   z-index: -1;
 `;

frontend/src/metabase/components/MetadataInfo/Popover/Popover.tsx

@@ -5,8 +5,22 @@ import useSequencedContentCloseHandler from "metabase/hooks/use-sequenced-conten
 import type { HoverCardProps } from "metabase/ui";
 import { HoverCard, useDelayGroup } from "metabase/ui";
 
-export const POPOVER_DELAY: [number, number] = [250, 150];
-export const POPOVER_TRANSITION_DURATION = 150;
+const POPOVER_TRANSITION_DURATION = 150;
+
+// Initially, the user will have to hover for this long to open the popover
+const POPOVER_SLOW_OPEN_DELAY = 250;
+
+// When an item in the same delay group is already open, we want to open the
+// popover immediately, without waiting for the user to hover for POPOVER_SLOW_OPEN_DELAY.
+// This way the user can move the cursor between hover targets and get feedback immediately.
+//
+// When opening fast, we still delay a little bit to avoid a flickering popover
+// when the target is being clicked.
+const POPOVER_FAST_OPEN_DELAY = 150;
+
+// When switching to another hover target in the same delay group,
+// we don't close immediately but delay by a short amount to avoid flicker.
+const POPOVER_CLOSE_DELAY = POPOVER_FAST_OPEN_DELAY + 30;
 
 import {
   Dropdown,
@@ -14,24 +28,20 @@ import {
   WidthBound,
 } from "./Popover.styled";
 
-// When switching to another hover target in the same delay group,
-// we don't close immediately but delay by a short amount to avoid flicker.
-export const POPOVER_CLOSE_DELAY = 20;
-
 export type PopoverProps = Pick<
   HoverCardProps,
   "children" | "position" | "disabled"
 > & {
-  delay?: [number, number];
   width?: number;
   content: ReactNode;
+  openDelay?: number;
 };
 
 export function Popover({
   position = "bottom-start",
   disabled,
-  delay = POPOVER_DELAY,
   content,
+  openDelay = POPOVER_SLOW_OPEN_DELAY,
   width,
   children,
 }: PopoverProps) {
@@ -57,8 +67,8 @@ export function Popover({
     <HoverCard
       position={position}
       disabled={disabled}
-      openDelay={group.shouldDelay ? delay[0] : 0}
-      closeDelay={group.shouldDelay ? delay[1] : POPOVER_CLOSE_DELAY}
+      openDelay={group.shouldDelay ? openDelay : POPOVER_FAST_OPEN_DELAY}
+      closeDelay={POPOVER_CLOSE_DELAY}
       onOpen={handleOpen}
       onClose={handleClose}
       transitionProps={{

frontend/src/metabase/components/MetadataInfo/TableInfoIcon/TableInfoIcon.tsx

@@ -19,14 +19,13 @@ type TableInfoIconProps = TableInfoPopoverProps & {
 
 export function TableInfoIcon({
   className,
-  delay,
   table,
   size,
   icon = "table",
   ...props
 }: TableInfoIconProps) {
   return (
-    <TableInfoPopover {...props} table={table} delay={delay}>
+    <TableInfoPopover {...props} table={table}>
       <span aria-label={t`More info`}>
         <PopoverDefaultIcon name={icon} className={className} size={size} />
         <PopoverHoverTarget

frontend/src/metabase/components/MetadataInfo/TableInfoPopover/TableInfoPopover.tsx

@@ -15,9 +15,9 @@ export type TableInfoPopoverProps = Omit<PopoverProps, "content"> &
 
 export function TableInfoPopover({
   children,
-  delay,
   disabled,
   position,
+  openDelay,
   table,
   ...rest
 }: TableInfoPopoverProps) {
@@ -30,8 +30,8 @@ export function TableInfoPopover({
   return (
     <Popover
       position={position}
-      delay={delay}
       disabled={disabled}
+      openDelay={openDelay}
       content={<TableInfo tableId={table.id} {...rest} />}
     >
       {children}

frontend/src/metabase/visualizations/components/TableInteractive/TableInteractive.jsx

@@ -919,6 +919,7 @@ class TableInteractive extends Component {
             column={query && Lib.fromLegacyColumn(query, stageIndex, column)}
             timezone={data.results_timezone}
             disabled={this.props.clicked != null || !hasMetadataPopovers}
+            openDelay={500}
             showFingerprintInfo
           >
             {renderTableHeaderWrapper(