shadcn.io is not affiliated with official shadcn/ui
Tooltip Grid Awards Block for Solid
Twenty-four awards as a tiny grid of drawn marks with no text, each opening a tooltip on hover, focus or tap, with one tab stop and arrow-key movement.
Installation
Overview
A micro-grid of awards for Solid with Ark UI. Twenty-four awards are drawn as tiny marks (a medal, a crown, a star, a shield, a gem, a rosette, a cup or an obelisk, in your theme's foreground) in cells that share their hairlines, eight by three on a wide screen and six by four on a phone, with no text in the cells. Hovering or focusing a cell opens a tooltip with the award, the programme, the year and the category; on a touch screen a tap opens it instead. The whole grid is one tab stop: the arrow keys move between the cells, Home and End jump to the first and last, and every cell's name carries the full award for screen readers. A legend line under the grid counts the awards and the programmes from the list. It's built from the catalog Tooltip, Toggle Tooltip and Guides. The awards and programmes are made up for the example: swap AWARDS for your own.
FAQ
How do I change the awards?
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.
What happens on a touch screen?
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.
Do I have to tab through 24 cells?
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.
How does a screen reader read a cell?
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.