// GlossTip is the inline hover gloss: rest the pointer on an English word and a // small bubble shows its Chinese meaning, pulled instantly from the offline // gloss dataset. It's a pure reading aid — pointer-events are off so it never // steals hover or blocks a click, and it sits just under the word. Bilingual // chrome elsewhere puts zh first; here the gloss IS the content (the word is // already on screen), so the bubble shows only the 中文. interface Props { gloss: string // A line above the gloss, in a lighter weight: the pinyin of a Chinese word. // It leads because it is what is actually being asked — a learner reading // their own 公园 back may know it means a park and still not know how to say // it, which is the one thing the character does not tell them. lead?: string // The English meaning of the same token read as a word of the writer's own // language, when it is one. On a Latin-script pair "sale" is both, and the // bubble shows the two readings stacked rather than picking one — the same // both-directions rule the word card follows, in one line less space. reverse?: string // How the writer's language names itself, to label the second line. reverseLang?: string style: React.CSSProperties } export function GlossTip({ gloss, lead, reverse, reverseLang, style }: Props) { return ( ) }