From deeee0564726e93125e80a70efb3a83d8ed4eeae Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Mon, 4 Mar 2024 10:51:34 +0800
Subject: [PATCH] fix: Issues #220 done.

---
 src/components/Discover/Map/Filter/Attributes.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/Discover/Map/Filter/Attributes.vue b/src/components/Discover/Map/Filter/Attributes.vue
index 0aa03f9..4ada949 100644
--- a/src/components/Discover/Map/Filter/Attributes.vue
+++ b/src/components/Discover/Map/Filter/Attributes.vue
@@ -4,7 +4,7 @@
   <div class="flex flex-row justify-between items-start gap-4 w-full h-[calc(100%_-_48px)]">
     <!-- Attribute Name -->
     <div class="basis-1/3 bg-neutral-10 border border-neutral-300 rounded-xl px-4 pb-4 w-full h-full relative text-sm">
-      <p class="h2 my-2">Attribute Name ({{ attTotal }})</p>
+      <p class="h2 my-2">Attribute Name ({{ attTotal }})<span class="material-symbols-outlined !text-sm align-middle ml-2 cursor-pointer" v-tooltip.bottom="tooltip.attributeName">info</span></p>
       <div class="overflow-y-auto overflow-x-auto scrollbar -mx-2 h-[calc(100%_-_56px)]">
         <DataTable v-model:selection="selectedAttName" :value="filterAttrs" dataKey="key" breakpoint="0" :tableClass="tableClass" @row-select="switchAttNameRadio">
           <Column selectionMode="single" :headerClass="headerModeClass" :bodyClass="bodyModeClass"></Column>
@@ -149,6 +149,13 @@ export default {
           event.stopPropagation();
         },
       },
+      tooltip: {
+        attributeName: {
+          value: 'Attributes with too many discrete values are excluded from selection. But users can still view those attributes in the DATA page.',
+
+          class: '!max-w-[212px] !text-[10px] !opacity-90',
+        },
+      }
     }
   },
   computed: {