Flash of type hint tooltips on page load

[mattrossman]

What version of Effect is running?

No response

What steps can reproduce the bug?

Visit a page with code snippets and type hint tooltips above the fold.

E.g. https://effect.website/docs/getting-started/creating-effects/

Load or reload the page. You'll see all tooltips appear for a moment before returning to the correct hidden state.

CleanShot.2025-03-12.at.19.12.07.mp4

What is the expected behavior?

I expect these tooltips will be hidden unless I hover over them.

What do you see instead?

All tooltips appear briefly before hiding.

Additional information

I see this behavior in Chrome and (to a lesser extent) Firefox.

A brief poking around in devtools suggests these tooltips are provided by the "expressive-code-twoslash" package. Based on the behavior on the website for that package, there must be a way to implement it that avoids the flash.

website/content/package.json

Line 67 in 317e708

"expressive-code-twoslash": "^0.4.0",

The package was introduced in #943

[mattrossman]

Couple things I notice:

• Tooltip initialization aligns with the DOMContentLoaded event
• When JavaScript is disabled, all type hints are permanently visible

I figure tooltips should instead be hidden until JS runs.