Tooltip Grid Awards Block for React

Edit AWARDS at the top of the file. Each has a title, a programme, a category, a fixed year and a mark (crown, cup, gem, medal, obelisk, rosette, shield or star). The legend is counted from the list. Keep a multiple of 24 so every row of both the eight-column and the six-column grid is full, or change grid-cols-6 sm:grid-cols-8 to suit.

A touch screen can't hover, so after the page loads, a device that reports no hover gets the Toggle Tooltip in each cell instead: a tap opens the tip and a second tap or a tap elsewhere closes it. Keyboard and mouse users keep the ordinary tooltip, which opens on hover or focus and closes with Escape.

No. The grid is a single tab stop: Tab lands on the cell last used, the arrow keys move between cells (up and down move a whole row, whatever the number of columns at that width), Home and End jump to the first and last, and in a right-to-left page the left and right arrows swap sides.

Each cell is a button whose name is the whole award ("Best design-token tool, Lagoonham Awards, 2025, Design systems"); the drawing is hidden and the tooltip repeats the same text for sighted users. The list is named for Gorsedene's awards, and the legend line is plain text under it. Base UI's tooltip popup has no tooltip role, so the button's own name is what is read.

Each cell is the Tooltip's render element, inside one TooltipProvider, so a tip opens without Base UI's default delay.

No. Gorsedene is a made-up token manager and Lagoonham, Rowanton, Jaspermoor, Kestrelwick, Meadowhurst, Oriolebank, Peatmoor, The Quartermane Review, Vesperholm, Zenithwood and Ashwenny are made-up programmes. The marks are drawn by the block.