From 62e9d17d114dcd3b702f36763895c0a88421eedc Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Thu, 15 Aug 2024 14:38:44 +1200
Subject: [PATCH] Add popover message

Explain AC/FC/3D Body
---
 pages/user/profile/index.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/pages/user/profile/index.vue b/pages/user/profile/index.vue
index 914d10e1..a037e08a 100644
--- a/pages/user/profile/index.vue
+++ b/pages/user/profile/index.vue
@@ -99,7 +99,20 @@
                   </span>
                 <div class="body4">
                   The Map Annotation Tool is built in to the Maps functionality within the SPARC Portal. The Tool allows you to add annotations to 2D and 3D anatomical models.
-                  View Maps guide <a href="https://docs.sparc.science/docs/introduction-to-maps" target="_blank">here</a>.
+                  <span class="help-link">
+                    <client-only>
+                      <el-popover width="fit-content" trigger="hover" :append-to-body=false popper-class="popover">
+                        <template v-slot:reference>
+                          <svgo-icon-help class="icon-help" />
+                        </template>
+                        <div>
+                          The Anatomical Connectivity (AC) flatmaps show physical connectivity derived from SCKAN in an anatomical schematic context.<br>
+                          The Functional Connectivity (FC) flatmap provides a visualization of semantic connectivity for a mammalian body.<br>
+                          The 3D whole-body shows physical connectivity derived from SCKAN in an anatomically realistic context.<br>
+                        </div>
+                      </el-popover>
+                    </client-only>
+                  </span>
                 </div>
                 <div class="mt-8">
                   <el-button class='secondary' @click="handleAnnotateButtonClicked('ac')">Launch AC Map in Annotation Mode</el-button>