Merge pull request #817 from IPG-Automotive-UK/bug/tooltip-not-closing

Show tooltip only if text overflows

src/NoWrapTypography/NoWrapTypography.spec.tsx

@@ -0,0 +1,40 @@
+import { expect, test } from "@playwright/test";
+
+// test that the tooltip shows when the text overflows
+test.describe("NoWrapTypography", () => {
+  test("shows tooltip when text overflows", async ({ page }) => {
+    // open the storybook with a large (h1) font size to ensure the text overflows
+    const url = `http://localhost:6006/?path=/story/general-nowraptypography--default&args=variant:h1`;
+    await page.goto(url);
+    const frame = page.frameLocator('iframe[title="storybook-preview-iframe"]');
+
+    // hover over the text
+    const textContent = "text that is too long to fit in the box";
+    await frame.getByText(textContent).hover();
+
+    // expect the tooltip to be visible and have the correct text
+    const tooltip = frame.locator("div[role=tooltip]").first();
+    await expect(tooltip).toBeVisible();
+    expect(tooltip).toHaveText(textContent);
+
+    // hover over another element to hide the tooltip
+    page.getByText("Controls").hover();
+
+    // expect the tooltip to be hidden
+    await expect(tooltip).not.toBeVisible();
+  });
+  test("doesn't show tooltip when text overflows", async ({ page }) => {
+    // open the storybook with a small (caption) font size to ensure the text doesn't overflow
+    const url = `http://localhost:6006/?path=/story/general-nowraptypography--default&args=variant:caption`;
+    await page.goto(url);
+    const frame = page.frameLocator('iframe[title="storybook-preview-iframe"]');
+
+    // hover over the text
+    const textContent = "text that is too long to fit in the box";
+    await frame.getByText(textContent).hover();
+
+    // expect the tooltip to be hidden
+    const tooltip = frame.locator("div[role=tooltip]").first();
+    await expect(tooltip).not.toBeVisible();
+  });
+});

src/NoWrapTypography/NoWrapTypography.stories.tsx

@@ -9,15 +9,22 @@ import React from "react";
  * Story metadata
  */
 const meta: Meta<typeof NoWrapTypography> = {
+  argTypes: {
+    children: {
+      control: {
+        type: "text"
+      }
+    }
+  },
   component: NoWrapTypography,
   title: "General/NoWrapTypography"
 };
 export default meta;
 
-const Template: StoryFn<NoWrapTypographyProps> = ({ children, sx }) => {
+const Template: StoryFn<NoWrapTypographyProps> = props => {
   return (
     <Box sx={{ border: "1px solid black", mt: 2, width: "350px" }}>
-      <NoWrapTypography sx={sx}>{children}</NoWrapTypography>
+      <NoWrapTypography {...props} />
     </Box>
   );
 };

src/NoWrapTypography/NoWrapTypography.tsx

@@ -11,24 +11,22 @@ export default function NoWrapTypography({
   sx,
   variant
 }: NoWrapTypographyProps) {
-  const [tooltipEnabled, setTooltipEnabled] = useState(false);
+  const [open, setOpen] = useState(false);
 
   // if the text overflows its bounding box, then show the tooltip
   const handleShouldShow = ({
     currentTarget
   }: React.MouseEvent<HTMLDivElement | null>) => {
-    if (currentTarget.scrollWidth > currentTarget.clientWidth) {
-      setTooltipEnabled(true);
-    }
+    setOpen(currentTarget.scrollWidth > currentTarget.clientWidth);
   };
 
   // on mouse leave, hide the tooltip
-  const hideTooltip = () => setTooltipEnabled(true);
+  const hideTooltip = () => setOpen(false);
 
   return (
     <Tooltip
       title={children}
-      disableHoverListener={!tooltipEnabled}
+      open={open}
       onMouseEnter={handleShouldShow}
       onMouseLeave={hideTooltip}
     >