From c2e1f8b3d15a541f6115b5e22115487b0ec09f5b Mon Sep 17 00:00:00 2001 From: Ajay Ghanwat Date: Wed, 28 Oct 2026 16:27:39 +0530 Subject: [PATCH] fix(ui): keep closed tooltips hidden before hydration Tooltip content was hidden only by data-show, which the client applies after hydration, so server HTML showed every tooltip for a moment on page load. A closed tooltip ([data-open="false"]) is now hidden in CSS too. Co-Authored-By: Claude Opus 5.5 --- packages/ui/components/tooltip.wrn | 6 ++++++ packages/ui/test/tooltip-closed.test.ts | 8 ++++++++ 2 files changed, 14 insertions(+) create mode 100644 packages/ui/test/tooltip-closed.test.ts diff --git a/packages/ui/components/tooltip.wrn b/packages/ui/components/tooltip.wrn index 2c2f895e..8e980ad6 100644 --- a/packages/ui/components/tooltip.wrn +++ b/packages/ui/components/tooltip.wrn @@ -189,6 +189,12 @@ id: string = "" pointer-events: none; } + /* Closed until hovered or focused, including in server HTML before the + client applies data-show; otherwise every tooltip flashes on load. */ + .wrn-tooltip[data-open="false"] .wrn-tooltip__content { + display: none; + } + .wrn-tooltip[data-interactive="true"] .wrn-tooltip__content { pointer-events: auto; } diff --git a/packages/ui/test/tooltip-closed.test.ts b/packages/ui/test/tooltip-closed.test.ts new file mode 100644 index 00000000..cbb4f0e9 --- /dev/null +++ b/packages/ui/test/tooltip-closed.test.ts @@ -0,0 +1,8 @@ +import { expect, test } from "bun:test"; + +// Server HTML renders tooltip content before the client applies data-show, so +// a closed tooltip must also be hidden by CSS or it flashes on every page load. +test("closed tooltip content is hidden by CSS before hydration", async () => { + const source = await Bun.file(new URL("../components/tooltip.wrn", import.meta.url)).text(); + expect(source).toMatch(/\.wrn-tooltip\[data-open="false"\] \.wrn-tooltip__content \{\s*display: none;/); +});