display hover text, link to aisafety.info

web/src/glossary.tsx

@@ -16,7 +16,7 @@ type GlossaryItem = {
 export const GlossaryP: React.FC<{content: string}> = ({content}) => {
     const [glossary, setGlossary] = useState<Map<string, GlossaryItem> | null>(null);
     const [glossaryRegex, setGlossaryRegex] = useState<RegExp | null>(null);
-    
+
     useEffect(() => {
         if (glossary === null) {
             const glossary = new Map(Object.entries(GLOSSARY_JSON));
@@ -37,12 +37,21 @@ export const GlossaryP: React.FC<{content: string}> = ({content}) => {
     // once and use that instead.
 
     return <span dangerouslySetInnerHTML={{__html: content.replace(glossaryRegex!, (match) => {
+
         const item = glossary.get(match.toLowerCase());
         if (item == undefined) return match;
 
         const hover_content = item.contents;
         const pageid = item.pageid;
-        return "AAAAAAAAA";
+
+        return `
+            <a href="https://aisafety.info/?state=${pageid}"
+               target="_blank"
+               class="glossary-link">
+                 ${match}
+            </a>
+            <div class="glossary-hover">${hover_content}</div>
+        `;
 
     })}} />;
 }

web/src/styles/globals.css

@@ -37,3 +37,16 @@ ol {
   @apply list-decimal;
 }
 
+
+/* glossary terms with a definition that shows on hover */
+.glossary-hover {
+  position: absolute;
+  display: none;
+  width: 300px;
+  @apply bg-white hover:bg-gray-300 h-fit px-3;
+  @apply border border-gray-300;
+}
+
+.glossary-link:hover + .glossary-hover {
+  display: block;
+}