HTML 77.2%
TypeScript 10.5%
Python 9.6%
JavaScript 2.5%
1import { Info } from 'lucide-react';2import type { ReactNode } from 'react';3import { cn } from '@/lib/cn';45/**6 * Pure-CSS tooltip (server-safe): an info glyph (or any trigger) that reveals a definition bubble on hover / focus.7 * Used by `DataStrip` for "How counted" definitions. The bubble is also readable by screen readers through `aria-describedby`.8 */9export function Hint({ text, children, className, align = 'left', id }: { text: ReactNode; children?: ReactNode; className?: string; align?: 'left' | 'right'; id?: string }) {10 const bubbleId = id ?? `hint-${hash(String(typeof text === 'string' ? text : 'hint'))}`;11 return (12 <span className={cn('hint', align === 'right' && 'hint-right', className)}>13 <button type="button" className="inline-flex size-6 items-center justify-center rounded-sm text-ink-3 hover:text-ink focus-visible:text-ink" aria-describedby={bubbleId} aria-label="Definition">14 {children ?? <Info className="size-3.5" aria-hidden />}15 </button>16 <span role="tooltip" id={bubbleId} className="hint-bubble">17 {text}18 </span>19 </span>20 );21}2223function hash(s: string): string {24 let h = 0;25 for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0;26 return Math.abs(h).toString(36);27}28