add tooltip

src/lib/DatasetViewer.svelte

@@ -292,16 +292,30 @@
   <!-- Model Info Display -->
   {#if datasetConfig}
     <div class="dataset-model-info subtle">
-      <span><strong>Scoring Model:</strong> {datasetConfig.scoring_model}</span>
+      <span class="info-tooltip-inline">
+        <strong>Scoring Model:</strong>
+        {datasetConfig.scoring_model}
+        <span class="tooltip-content-inline">
+          <strong>Scoring Model</strong> is the model used to compute the equivalency
+          score between terms. It uses a language model to assess how closely terms
+          from different jurisdictions match in meaning.
+        </span>
+      </span>
       <span class="sep">|</span>
-      <span
-        ><strong>Synthesis Model:</strong> {datasetConfig.synthesis_model}</span
-      >
+      <span class="info-tooltip-inline">
+        <strong>Synthesis Model:</strong>
+        {datasetConfig.synthesis_model}
+        <span class="tooltip-content-inline">
+          <strong>Synthesis Model</strong> is the model used to synthesize comparative
+          law notes. Generative AI is used to assess and explain the similarities
+          and differences between terms from different jurisdictions.
+        </span>
+      </span>
       <span class="sep">|</span>
-      <span
-        ><strong>Last Updated:</strong>
-        {datasetConfig.generation_date || "N/A"}</span
-      >
+      <span>
+        <strong>Last Updated:</strong>
+        {datasetConfig.generation_date || "N/A"}
+      </span>
     </div>
   {/if}
 
@@ -1049,4 +1063,41 @@
     font-size: 1.1em;
     margin: 0 0.5em;
   }
+  .info-tooltip-inline {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    cursor: help;
+  }
+  .info-tooltip-inline strong {
+    margin-right: 0.15em;
+  }
+  .info-tooltip-inline:hover .tooltip-content-inline {
+    display: block;
+  }
+  .tooltip-content-inline {
+    display: none;
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 0;
+    background: #333;
+    color: white;
+    padding: 0.75rem 1rem;
+    border-radius: 6px;
+    font-size: 0.8rem;
+    white-space: normal;
+    z-index: 100;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    text-align: left;
+    min-width: 220px;
+    max-width: 320px;
+  }
+  .tooltip-content-inline strong {
+    display: block;
+    font-size: 0.85rem;
+    margin-bottom: 0.5rem;
+    color: #fff;
+    border-bottom: 1px solid #555;
+    padding-bottom: 0.4rem;
+  }
 </style>