Adjust how tooltips are triggered (#2958)

vivid-planet · Dec 19, 2024 · e9f547d · e9f547d
1 parent 8dd4d3b
commit e9f547d
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/.changeset/good-cobras-pretend.md b/.changeset/good-cobras-pretend.md
@@ -0,0 +1,11 @@
+---
+"@comet/admin": minor
+---
+
+Adjust how tooltips are triggered
+
+This is to achieve a more consistent and user-friendly experience by ensuring tooltips are always shown when the user interacts with the underlying element.
+
+-   When using the default `hover` trigger, tooltips will now be shown on both `hover` and `focus`. Previously, you had to choose between `hover` and `focus`.
+-   The `trigger` prop is deprecated and will be removed in a future major version. The combined `hover`/`focus` trigger will be the only supported behavior.
+-   Tooltips on touch devices will be shown immediately when the user starts interacting with the underlying element.
diff --git a/packages/admin/admin/src/common/Tooltip.tsx b/packages/admin/admin/src/common/Tooltip.tsx
@@ -14,9 +14,13 @@ import { cloneElement, ComponentProps, useState } from "react";
 import { createComponentSlot } from "../helpers/createComponentSlot";
 
 export interface TooltipProps extends MuiTooltipProps {
+    /**
+     * @deprecated Triggers other than the default "hover" will be removed in the future.
+     */
     trigger?: "hover" | "focus" | "click";
     variant?: Variant;
 }
+
 type Variant = "light" | "dark" | "neutral" | "primary" | "error" | "success";
 
 export type TooltipClassKey = "root" | Variant | MuiTooltipClassKey;
@@ -240,7 +244,7 @@ export const Tooltip = (inProps: TooltipProps) => {
             </TooltipRoot>
         </ClickAwayListener>
     ) : (
-        <TooltipRoot disableFocusListener={trigger === "hover"} disableHoverListener={trigger === "focus"} {...commonTooltipProps}>
+        <TooltipRoot disableHoverListener={trigger === "focus"} enterTouchDelay={0} {...commonTooltipProps}>
             {children}
         </TooltipRoot>
     );

diff --git a/storybook/src/docs/components/Tooltip/Tooltip.mdx b/storybook/src/docs/components/Tooltip/Tooltip.mdx
@@ -14,10 +14,10 @@ The Comet Admin `Tooltip` extends [Material UI's `Tooltip`](https://mui.com/mate
 
 #### Props
 
-| Name    | Type                                             | Description                                             |
-| :------ | :----------------------------------------------- | :------------------------------------------------------ |
-| trigger | "hover", "focus", "click" (optional)             | Defines the type of event that causes a tooltip to show |
-| variant | "light", "dark", "neutral", "primary" (optional) | Defines the color scheme of a tooltip                   |
+| Name                 | Type                                             | Description                                                                                                                  |
+| :------------------- | :----------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------- |
+| trigger (deprecated) | "hover", "focus", "click" (optional)             | Defines the type of event that causes a tooltip to show. <br />(_Only the default "hover" will be supported in the future._) |
+| variant              | "light", "dark", "neutral", "primary" (optional) | Defines the color scheme of a tooltip.                                                                                       |
 
 In addition to its own props, the Tooltip component also accepts all props from the Material UI Tooltip component.