Tooltip: handle non-interactive tooltip triggers

src/components/Tooltip/Tooltip.stories.tsx

@@ -21,13 +21,63 @@ import { Tooltip as TooltipComponent } from "./Tooltip";
 import { IconButton } from "../IconButton/IconButton";
 
 import UserIcon from "@vector-im/compound-design-tokens/icons/user-profile.svg";
+import { Text } from "../Typography/Text";
 
 export default {
   title: "Tooltip",
   component: TooltipComponent,
   tags: ["autodocs"],
-  argTypes: {},
-  args: {},
+  controls: {
+    include: [
+      "side",
+      "align",
+      "open",
+      "label",
+      "caption",
+      "isTriggerInteractive",
+    ],
+  },
+  argTypes: {
+    side: {
+      control: "inline-radio",
+      options: ["left", "right", "top", "bottom"],
+    },
+    align: {
+      control: "inline-radio",
+      options: ["center", "start", "end"],
+    },
+    open: {
+      control: "boolean",
+    },
+    isTriggerInteractive: {
+      control: "boolean",
+    },
+    label: {
+      control: "string",
+    },
+    caption: {
+      control: "string",
+    },
+  },
+  args: {
+    side: "left",
+    align: "center",
+    open: undefined,
+    label: "@bob:example.org",
+    caption: undefined,
+    children: (
+      <IconButton data-testid="testbutton">
+        <UserIcon />
+      </IconButton>
+    ),
+  },
+  decorators: [
+    (Story: StoryFn) => (
+      <div style={{ padding: 100 }}>
+        <Story />
+      </div>
+    ),
+  ],
 } as Meta<typeof TooltipComponent>;
 
 const TemplateSide: StoryFn<typeof TooltipComponent> = () => (
@@ -104,3 +154,57 @@ const TemplateAlign: StoryFn<typeof TooltipComponent> = () => (
 
 export const Align = TemplateAlign.bind({});
 Align.args = {};
+
+export const Default = {
+  args: {
+    // unset to test defaults
+    side: undefined,
+    align: undefined,
+  },
+};
+
+export const WithCaption = {
+  args: {
+    ...Default.args,
+    label: "Copy",
+    caption: "⌘ + C",
+  },
+};
+
+export const ForcedOpen = {
+  args: {
+    ...Default.args,
+    open: true,
+    label: "I'm always open",
+  },
+};
+
+export const ForcedClose = {
+  args: {
+    ...Default.args,
+    open: false,
+    label: "You can't see me",
+    children: <Text>No tooltip to see here</Text>,
+  },
+};
+
+export const InteractiveTrigger = {
+  args: {
+    ...Default.args,
+    isTriggerInteractive: true,
+    label: "Shown with delay",
+  },
+};
+
+export const NonInteractiveTrigger = {
+  args: {
+    ...Default.args,
+    isTriggerInteractive: false,
+    label: "Shown without delay",
+    children: (
+      <IconButton data-testid="testbutton" disabled>
+        <UserIcon />
+      </IconButton>
+    ),
+  },
+};

src/components/Tooltip/Tooltip.test.tsx

@@ -14,35 +14,63 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { describe, it, expect, beforeAll } from "vitest";
-import { render } from "@testing-library/react";
+import { describe, it, expect, beforeAll, afterEach } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 
-import { Tooltip } from "./Tooltip";
-import { IconButton } from "../IconButton/IconButton";
+import * as stories from "./Tooltip.stories";
+import { composeStories } from "@storybook/react";
+
+const { Default, WithCaption, ForcedOpen, ForcedClose, InteractiveTrigger } =
+  composeStories(stories);
 
 describe("Tooltip", () => {
   beforeAll(() => {
     global.ResizeObserver = require("resize-observer-polyfill");
   });
+
+  afterEach(cleanup);
+
   it("renders open by default", () => {
-    const { asFragment } = render(
-      <Tooltip label="Hello world 👋" caption="⌘ + C" open={true}>
-        <IconButton>
-          <svg />
-        </IconButton>
-      </Tooltip>,
-    );
+    const { asFragment } = render(<ForcedOpen />);
+    // trigger rendered
     expect(asFragment()).toMatchSnapshot();
+    // tooltip shown
+    expect(screen.getByRole("tooltip")).toMatchSnapshot();
+  });
+
+  it("renders closed by default", () => {
+    const { asFragment } = render(<ForcedClose />);
+    expect(asFragment()).toMatchSnapshot();
+    // no tooltip
+    expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+  });
+
+  it("renders default tooltip", async () => {
+    render(<Default />);
+    const trigger = screen.getByTestId("testbutton");
+
+    fireEvent.focus(trigger);
+    // tooltip shown
+    expect(await screen.findByRole("tooltip")).toMatchSnapshot();
   });
-  it("renders", () => {
-    const { asFragment } = render(
-      <Tooltip label="Hello world 👋">
-        <IconButton>
-          <svg />
-        </IconButton>
-      </Tooltip>,
-    );
+
+  it("opens tooltip on focus", async () => {
+    render(<InteractiveTrigger />);
+    const trigger = screen.getByTestId("testbutton");
+
+    fireEvent.focus(trigger);
+    // tooltip shown
+    expect(await screen.findByRole("tooltip")).toMatchSnapshot();
+  });
+
+  it("renders with caption", async () => {
+    const { asFragment } = render(<WithCaption />);
     expect(asFragment()).toMatchSnapshot();
+    const trigger = screen.getByTestId("testbutton");
+
+    fireEvent.focus(trigger);
+    // tooltip shown
+    expect(await screen.findByRole("tooltip")).toMatchSnapshot();
   });
 });

src/components/Tooltip/Tooltip.tsx

@@ -64,11 +64,23 @@ type TooltipProps = {
   >["onPointerDownOutside"];
   /**
    * The controlled open state of the tooltip.
+   * When true, the tooltip is always open. When false, the tooltip is always hidden.
+   * When undefined, the tooltip will manage its own open state.
    * You will mostly want to omit this property. Will be used the vast majority
    * of the time during development.
    * @default undefined
    */
   open?: boolean;
+  /**
+   * Whether the trigger element is interactive.
+   * When trigger is interactive:
+   *      - tooltip will be shown after a 300ms delay.
+   * When trigger is not interactive:
+   *      - tooltip will be shown instantly when pointer enters trigger.
+   *      - trigger will be wrapped in a focusable span.
+   * @default true
+   */
+  isTriggerInteractive?: boolean;
 };
 
 /**
@@ -83,12 +95,19 @@ export const Tooltip = ({
   align = "center",
   onEscapeKeyDown,
   onPointerDownOutside,
+  isTriggerInteractive = true,
   open,
 }: PropsWithChildren<TooltipProps>): JSX.Element => {
   return (
     <Provider>
-      <Root open={open} delayDuration={300}>
-        <Trigger asChild>{children}</Trigger>
+      <Root open={open} delayDuration={isTriggerInteractive ? 300 : 0}>
+        <Trigger asChild>
+          {isTriggerInteractive ? (
+            children
+          ) : (
+            <span tabIndex={0}>{children}</span>
+          )}
+        </Trigger>
         <Portal>
           <Content
             side={side}