From b83251f9146bc522c15063f327372250a7002b2c Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 21 Apr 2026 15:25:59 +0700
Subject: [PATCH] fix(map): poiPlaceName textTooltip

---
 src/components/AscGISMap.vue | 31 +++++++++++++++++++++++++++----
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/components/AscGISMap.vue b/src/components/AscGISMap.vue
index 7651b7c..76d4443 100644
--- a/src/components/AscGISMap.vue
+++ b/src/components/AscGISMap.vue
@@ -26,6 +26,7 @@ const apiKey = ref<string>(
   // 'AAPK4f700a4324d04e9f8a1a134e0771ac45FXWawdCl-OotFfr52gz9XKxTDJTpDzw_YYcwbmKDDyAJswf14FoPyw0qBkN64DvP'
 )
 const zoomMap = ref<number>(18)
+const textTooltip = ref<string>('พื้นที่ใกล้เคียง: สถานที่สำคัญรอบตัวคุณ (ไม่ใช่ตำแหน่งปัจจุบัน)')
 
 async function initializeMap() {
   try {
@@ -308,23 +309,45 @@ defineExpose({
         พื้นที่ใกล้เคียง
         <span class="q-px-sm">:</span>
         {{ poiPlaceName }}
+        <q-icon name="mdi-information-outline" size="xs" class="q-mr-xs" />
+
+        <q-tooltip anchor="top middle" self="bottom middle" :offset="[0, 5]">
+          {{ textTooltip }}
+        </q-tooltip>
       </div>
     </div>
 
     <q-card v-else style="border-radius: 20px">
       <q-expansion-item
-        class="shadow-1 overflow-hidden bg-grey-4 text-left"
+        class="shadow-1 overflow-hidden bg-grey-4 text-left q-pa-xs"
         style="border-radius: 20px"
         dense
         default-opened
       >
         <template v-slot:header>
           <q-item-section avatar class="q-pr-none expanAS">
-            <q-avatar icon="mdi-map-marker" />
+            <q-icon name="mdi-map-marker" color="primary" />
           </q-item-section>
-
           <q-item-section>
-            {{ poiPlaceName }}
+            <q-item-label caption class="text-grey-7">
+              พื้นที่ใกล้เคียง
+              <q-icon
+                name="mdi-information-outline"
+                size="xs"
+                class="q-mr-xs"
+                @click.stop
+              />
+            </q-item-label>
+            <q-tooltip
+              anchor="top middle"
+              self="bottom middle"
+              :offset="[0, 5]"
+            >
+              {{ textTooltip }}
+            </q-tooltip>
+            <q-item-label class="text-weight-medium text-grey-9">
+              {{ poiPlaceName }}
+            </q-item-label>
           </q-item-section>
         </template>