fix(ui): keep closed tooltips hidden before hydration
Quality / quality (ubuntu-latest) (push) Failing after 1s
Quality / quality (windows-latest) (push) Canceled after 0s

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 <noreply@anthropic.com>
This commit is contained in:
ClintchizandClaude Opus 5.5 committed 2026-10-28 16:27:39 +05:30
1 parent 866620ded3
commit c2e1f8b3d1
2 files changed
+14

No files matched your search

+6
View File
@@ -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;
}
+8
View File
@@ -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;/);
});