Tooltip Experiments
Variants I tried for the photo grid and tracklist on aadhar.sh. Hover the slots and rows. The two photo variants below (Fuji LCD and XP-skinned camera readout) carry the same content shape under different chrome; the third (vinyl) targets tracks only. Status pills: in review marks a live candidate, shipped reached the homepage, rejected got tried and lost, reference sits here as a comparison point.
The live candidates share one architecture: popover API for show/hide, @starting-style for the entry fade, a small rAF-coalesced translate3d loop for cursor tracking. Roughly 100 lines of JS total.
← back to garage
Fuji X-T LCD readout (photos) in review
Hover any slot. The floating panel mimics the camera's image-review screen: histogram band on top, filename, exposure trio, recipe grid, footer. It follows the cursor. The slot itself stays untouched (no in-tooltip thumbnail; you can already see the larger slot image).
Each recipe value is real EXIF, pulled from /images/metadata.json. An earlier preview fabricated values (it tagged XT508756 ACROS+R, which shoots B&W only); fixed.
XP-skinned camera readout (photos) shipped
This is the one that shipped. It's the live photo-grid tooltip on the homepage (the .cam markup out of buildContent()). Same content as the Fuji LCD above (histogram, exposure trio, recipe grid, date) but reskinned in XP visual vocabulary: cream panel, blue gradient title strip, sunken bevel around the histogram, Tahoma body with Courier numerics. Keeps the camera-back density without arguing visually with the surrounding XP shell. The Fuji LCD lost on exactly that (too dark a panel against the Luna page).
Vinyl sleeve at cursor (tracks) shipped
The cover-at-cursor idea shipped as the live tracklist tooltip on the homepage, in a contact-sheet-style raised frame rather than this paper-mat -6° tilt, but it makes the same move: hover a row, and the square album cover floats at the cursor like a sleeve you pull out to read the front. Same architecture as the photo tooltip; the row text stays put.
- 3:54 Guild (feat. Mac Miller)—Earl Sweatshirt, Mac Miller
- 2:14 GAHDAMN—Kairee Doty
- 4:49 1995—Freddie Gibbs, The Alchemist
- 3:35 TRICERATOPS—Action Bronson, Paul Wall, Lil Yachty
- 2:04 GREEN LIGHT—colle$ttye
Luna balloon (tracks) in review
The authentic XP balloon: the rounded, pale-yellow info bubble with a pointer tail (the "Your files are ready to burn" taskbar popup). Cream #FFFFE1 infotip fill, 1px outline, a CSS-drawn tail aimed back at the cursor. This is the period-correct shape for the simple track/artist tooltips; the camera readout stays a Fuji LCD on purpose, because an XP machine never had a tooltip that rich, so calling it XP would be dishonest.
- 3:54 Guild (feat. Mac Miller)—Earl Sweatshirt, Mac Miller
- 4:49 1995—Freddie Gibbs, The Alchemist
- 2:04 GREEN LIGHT—colle$ttye
Polaroid flip (photos) rejected
transform: rotateY, so you see the metadata or the photo, never both. The grid exists to show the photos, so a tooltip should add to what you can see, not replace it. The same fault killed the first Fuji-LCD overlay (v1, painted on top of the slot). I kept this one as a record.
CSS Anchor Positioning shipped
Element-anchored rather than cursor-anchored. This shipped. It's the homepage's keyboard-focus tooltip path: mouse users get the cursor-follower, but a keyboard user tabbing to a slot has no cursor to track, so on :focus-visible the JS sets anchor-name on the focused element and the popover tethers to it via position-anchor / position-area (gated on CSS.supports, a clean no-op where unsupported).
Note: this is a keyboard fallback, and a keyboard fallback only, not a JS-disabled one. JS orchestrates every live tooltip (here and on serendipity): it populates the popover, calls showPopover(), and sets the anchor-name. With JS off, the popover stays empty and never opens: no tooltip at all. This pure-CSS :has(:hover) demo below would work without JS, but it isn't wired into any live page; tooltips are progressive enhancement that simply vanish without script (the photos and links still work).
anchor-name yet. Chrome 125+ or Safari TP shows this demo.