diff --git a/.changeset/violet-dingos-hammer.md b/.changeset/violet-dingos-hammer.md new file mode 100644 index 00000000000..c6370c7d33f --- /dev/null +++ b/.changeset/violet-dingos-hammer.md @@ -0,0 +1,5 @@ +--- +"@salt-ds/core": patch +--- + +Fixed `Tooltip` not displaying when the `content` prop value is falsy e.g. 0 diff --git a/packages/core/src/__tests__/__e2e__/tooltip/Tooltip.cy.tsx b/packages/core/src/__tests__/__e2e__/tooltip/Tooltip.cy.tsx index 3aa14fbb859..8e1e3c0251c 100644 --- a/packages/core/src/__tests__/__e2e__/tooltip/Tooltip.cy.tsx +++ b/packages/core/src/__tests__/__e2e__/tooltip/Tooltip.cy.tsx @@ -213,6 +213,20 @@ describe("GIVEN a Tooltip", () => { }); }); + describe("WHEN content is undefined", () => { + it("then tooltip doesn't display", () => { + cy.mount(); + cy.findByRole("tooltip").should("not.exist"); + }); + }); + + describe("WHEN content is falsy", () => { + it("then tooltip should still display", () => { + cy.mount(); + cy.findByRole("tooltip").should("exist"); + }); + }); + describe("WHEN used in header tag", () => { it("then tooltip displays default font weight and size", () => { cy.mount( diff --git a/packages/core/src/tooltip/Tooltip.tsx b/packages/core/src/tooltip/Tooltip.tsx index 4863ad4b6b3..f773c23a8f8 100644 --- a/packages/core/src/tooltip/Tooltip.tsx +++ b/packages/core/src/tooltip/Tooltip.tsx @@ -124,7 +124,7 @@ export const Tooltip = forwardRef( ); const floatingRef = useForkRef(floating, ref); - const hasContent = !!content; + const hasContent = content != undefined && content !== ""; return ( <> diff --git a/packages/core/stories/tooltip/tooltip.qa.stories.tsx b/packages/core/stories/tooltip/tooltip.qa.stories.tsx index f4e932be236..0eaba102f77 100644 --- a/packages/core/stories/tooltip/tooltip.qa.stories.tsx +++ b/packages/core/stories/tooltip/tooltip.qa.stories.tsx @@ -34,6 +34,7 @@ export const AllExamplesGrid: StoryFn = (props) => { +