fix inline glossary issues

app/src/components/Tenet.astro

@@ -55,15 +55,13 @@ const tooltipId = `tenet-${Math.random().toString(36).slice(2)}`;
   onmouseenter={`window.showTenetTooltip(event, '${tooltipId}')`}
   onmousemove={`window.updateTenetTooltip(event, '${tooltipId}')`}
   onmouseleave={`window.hideTenetTooltip('${tooltipId}')`}
->{display}</span>
-
-<div id={tooltipId} class="glossary-tooltip" data-position={position}>
-  <div class="glossary-tooltip__content">
-    <div class="glossary-tooltip__term">{term}</div>
-    <div class="glossary-tooltip__definition">{definition}</div>
-  </div>
-  <div class="glossary-tooltip__arrow"></div>
-</div>
+>{display}</span><span id={tooltipId} class="glossary-tooltip" data-position={position}>
+  <span class="glossary-tooltip__content">
+    <span class="glossary-tooltip__term">{term}</span>
+    <span class="glossary-tooltip__definition">{definition}</span>
+  </span>
+  <span class="glossary-tooltip__arrow"></span>
+</span>
 
 <script is:inline>
 if (!window.tenetTooltipInitialized) {
@@ -72,16 +70,23 @@ if (!window.tenetTooltipInitialized) {
   window.showTenetTooltip = function(event, id) {
     const tooltip = document.getElementById(id);
     if (!tooltip) return;
-    tooltip.style.display = 'block';
+    tooltip.style.visibility = 'visible';
     tooltip.style.opacity = '1';
     tooltip.style.top = (event.clientY + 10) + 'px';
     tooltip.style.left = (event.clientX + 10) + 'px';
   };
 
+  window.updateTenetTooltip = function(event, id) {
+    const tooltip = document.getElementById(id);
+    if (!tooltip) return;
+    tooltip.style.top = (event.clientY + 10) + 'px';
+    tooltip.style.left = (event.clientX + 10) + 'px';
+  };
+
   window.hideTenetTooltip = function(id) {
     const tooltip = document.getElementById(id);
     if (!tooltip) return;
-    tooltip.style.display = 'none';
+    tooltip.style.visibility = 'hidden';
     tooltip.style.opacity = '0';
   };
 }

app/src/styles/components/_glossary.css

@@ -42,15 +42,18 @@
   pointer-events: none;
   max-width: 300px;
   min-width: 200px;
+  visibility: hidden;
 }
 
 .glossary-tooltip.is-visible {
+  visibility: visible;
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
 }
 
 .glossary-tooltip__content {
+  display: block;
   background: var(--surface-bg);
   border: 1px solid var(--border-color);
   border-radius: 8px;
@@ -60,6 +63,7 @@
 }
 
 .glossary-tooltip__term {
+  display: block;
   font-weight: 600;
   font-size: 14px;
   color: var(--primary-color);
@@ -68,6 +72,7 @@
 }
 
 .glossary-tooltip__definition {
+  display: block;
   font-size: 13px;
   color: var(--text-color);
   line-height: 1.4;
@@ -75,6 +80,7 @@
 }
 
 .glossary-tooltip__arrow {
+  display: block;
   position: absolute;
   width: 0;
   height: 0;