A card with an image and a line of context for links in running text, so a reader can decide before leaving the page.
Print series · October 2026
The series opens with Coral sky, the first sheet we pulled. Mint and ember came from the same water an hour later. Lilac bloom was the last, once the colors had softened.
Point at a print name to see it.
Coral skyThe first sheet pulled from the tray. Coral and sand over a cool blue.prints.example.com
Mint and emberPulled an hour later, after the orange had sunk to the bottom.prints.example.com
Lilac bloomThe last sheet of the day, once the colors had softened.prints.example.comimport { createFloatingTooltip } from "@reuse-sh/interactions";
// Each link names the print it points to. The card is built on hover.
createFloatingTooltip(document.querySelector("article"), {
selector: "a[data-preview]",
content: (link) => previewCard(prints[link.dataset.preview]),
});import { FloatingTooltipGroup } from "@reuse-sh/interactions/react";
export function Article({ children }) {
return (
<FloatingTooltipGroup
selector="a[data-preview]"
content={(link) => previewCard(prints[link.dataset.preview])}
>
<article>{children}</article>
</FloatingTooltipGroup>
);
}