feat: add tooltips

src/config/geneDetailsConfig.js

@@ -12,9 +12,9 @@ export const geneDetailsConfig = {
     visibility: false
   },
   NCS: {
-    label: "Nephro Candidate Score",
+    label: "Nephro Candidate Gene Score",
     format: "number",
-    description: "Score based on the likelihood that the gene is linked to kidney disease.",
+    description: "Score indicating the likelihood that the gene is linked to kidney disease.",
     colorThresholds: {
       low: 0.2,
       medium: 0.5,
@@ -36,7 +36,7 @@ export const geneDetailsConfig = {
   geneset: {
     label: "Geneset",
     format: "text",
-    description: "The geneset to which this gene belongs.",
+    description: "The geneset to which this gene belongs to (e.g. training, testing or none).",
     colorThresholds: {
       low: "train",
       medium: "test",

src/views/GeneInfo.vue

@@ -6,7 +6,16 @@
       <template v-slot:default>
         <tbody>
           <tr v-for="(item, key) in filteredGeneData" :key="key">
-            <td>{{ item.label }}</td>
+            <td>
+              <span class="label-hover" :title="item.description">{{ item.label }}</span>
+              <v-tooltip
+                activator="parent"
+                location="start"
+              >
+                {{ item.description }}
+              </v-tooltip>
+            </td>
+
             <td>
               <v-chip 
                 v-if="item.style === 'chip'" 
@@ -76,6 +85,7 @@ export default {
           if (config && config.visibility) {
             formattedData[key] = {
               label: config.label,
+              description: config.description,
               value: formatValue(value, config),
               color: getColor(value, config),
               style: config.style,
@@ -112,6 +122,10 @@ export default {
 
 
 <style scoped>
+.label-hover {
+  cursor: help;
+}
+
 .italic-font {
   font-style: italic;
 }