Usage: a meter's note is the site's tooltip, caught by the no-native-title test
1 file+6−10/1 viewed
| 31 | 31 | } from "../lib/usage"; | |
| 32 | 32 | import { cn } from "../lib/cn"; | |
| 33 | 33 | import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./ui/dropdown-menu"; | |
| 34 | + | import { Hint } from "./ui/hint"; | |
| 34 | 35 | import { Skeleton } from "./ui/skeleton"; | |
| 35 | 36 | ||
| 36 | 37 | const SELECT = | |
| ⋯ | |||
| 485 | 486 | <span className="size-2 shrink-0 rounded-sm" style={{ background: color }} /> | |
| 486 | 487 | <span className="min-w-0"> | |
| 487 | 488 | <span className="block truncate">{meter.label}</span> | |
| 488 | − | {meter.note && <span className="block truncate text-[0.6875rem] text-faint" title={meter.note}>{meter.note}</span>} | |
| 489 | + | {meter.note && ( | |
| 490 | + | <Hint label={meter.note}> | |
| 491 | + | <span className="block truncate text-[0.6875rem] text-faint">{meter.note}</span> | |
| 492 | + | </Hint> | |
| 493 | + | )} | |
| 489 | 494 | </span> | |
| 490 | 495 | {parts.length > 0 && <ChevronDown size={13} className="shrink-0 text-faint transition-transform group-open:rotate-180" />} | |
| 491 | 496 | </span> | |