From 60a09db3b71677766aa6541b2b552c67dae09216 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 11 Jul 2025 14:49:06 +0700
Subject: [PATCH] fix report salary text hint to tootip

---
 .../21_report/views/05_reportSalary.vue       | 38 +++++++++++--------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/modules/21_report/views/05_reportSalary.vue b/src/modules/21_report/views/05_reportSalary.vue
index af32b2dcd..0cd90d6ed 100644
--- a/src/modules/21_report/views/05_reportSalary.vue
+++ b/src/modules/21_report/views/05_reportSalary.vue
@@ -526,13 +526,30 @@ onMounted(() => {
                       lazy-rules
                       hide-bottom-space
                       bg-color="white"
-                      :hint="
-                        group === 'GROUP1'
-                          ? 'ทั่วไป: ปฏิบัติงาน, ชำนาญงาน, อาวุโส\nวิชาการ: ปฏิบัติการ, ชำนาญการ, ชำนาญการพิเศษ\nอำนวยการ: ต้น'
-                          : 'ทั่วไป: ทักษะพิเศษ\nวิชาการ: เชี่ยวชาญ, ทรงคุณวุฒิ\nอำนวยการ: สูง\nบริหาร: ต้น, สูง'
-                      "
-                      class="multiline-hint"
                     >
+                      <template #append>
+                        <q-icon
+                          name="help_outline"
+                          color="info"
+                          size="20px"
+                          class="cursor-pointer"
+                          v-if="group"
+                        >
+                          <q-tooltip>
+                            <div v-if="group === 'GROUP1'">
+                              <div>ทั่วไป: ปฏิบัติงาน, ชำนาญงาน, อาวุโส</div>
+                              <div>วิชาการ: ปฏิบัติการ, ชำนาญการ, ชำนาญการพิเศษ</div>
+                              <div>อำนวยการ: ต้น</div>
+                            </div>
+                            <div v-else>
+                              <div>ทั่วไป: ทักษะพิเศษ</div>
+                              <div>วิชาการ: เชี่ยวชาญ, ทรงคุณวุฒิ</div>
+                              <div>อำนวยการ: สูง</div>
+                              <div>บริหาร: ต้น, สูง</div>
+                            </div>
+                          </q-tooltip>
+                        </q-icon>
+                      </template>
                     </q-select>
                   </div>
                   <q-separator v-if="employeeClass === 'officer'" />
@@ -847,13 +864,4 @@ onMounted(() => {
   min-height: 32px;
   padding: 2px 9px;
 }
-
-.multiline-hint :deep(.q-field__messages) {
-  white-space: pre-line;
-  font-size: 0.8rem;
-  line-height: 1.2;
-  background-color: #eeeeee;
-  padding: 8px;
-  border-radius: 4px;
-}
 </style>