feat: ทำ tooltip เเละ สี dark

src/pages/01_branch-management/MainPage.vue

@@ -9,17 +9,46 @@ import AppBox from 'components/app/AppBox.vue';
     <app-box bordered style="width: 100%; height: 500px">
       <div class="column" style="height: 100%">
         <div class="col-1 self-end">
-          <q-btn
-            unelevated
-            class="color-btn-icon"
-            size="10px"
-            round
-            icon="mdi-exclamation"
-            :class="{ dark: $q.dark.isActive }"
-          >
-            <q-tooltip>test</q-tooltip>
-          </q-btn>
+          <div class="row">
+            <div class="tooltip" :class="{ 'dark-tooltip': $q.dark.isActive }">
+              <q-btn
+                unelevated
+                class="color-btn-icon"
+                size="5px"
+                round
+                icon="mdi-exclamation"
+                :class="{ 'dark-btn-icon': $q.dark.isActive }"
+              ></q-btn>
+
+              <div
+                class="tooltip-text"
+                :class="{ 'dark-tooltip-text': $q.dark.isActive }"
+              >
+                <q-img
+                  :src="`/img-table-${$q.dark.isActive ? 'dark' : 'light'}.png`"
+                  width="60%"
+                />
+                <div
+                  class="box-content"
+                  :class="{ 'dack-box-content': $q.dark.isActive }"
+                >
+                  <div class="column justify-center" style="height: 100%">
+                    <div class="col-4">ยังไม่มีสำนักงานใหญ่</div>
+                    <div class="col-4 q-mb-md q-px-md">
+                      <div
+                        class="content-text q-pa-sm"
+                        :class="{ 'dack-content-text': $q.dark.isActive }"
+                      >
+                        คลิก + เพื่อสร้างสำนักงานใหญ่
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
+
         <div
           class="col test self-center"
           style="display: flex; align-items: center"
@@ -39,10 +68,80 @@ import AppBox from 'components/app/AppBox.vue';
 </template>
 
 <style scoped>
-/* .test {
-  display: flex;
-  align-items: center;
-} */
+.box-content {
+  position: absolute;
+  width: 100%;
+  height: 45%;
+  background: var(--_bg-box-content);
+  bottom: 0;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+
+  .content-text {
+    color: var(--_color-box-content-text);
+    background: var(--_bg-box-content-text);
+    border-radius: 6px;
+
+    &.dack-content-text {
+      border: 1px solid var(--brand-1);
+    }
+  }
+
+  &.dack-box-content {
+    border: 1px solid var(--gray-7);
+  }
+}
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+
+  &.dark-tooltip {
+    --_bg-box-content: var(--gray-9);
+    --_bg-tooltip-branch: var(--gray-11);
+    --_bg-tooltip-branch-arrow: var(--_bg-box-content);
+    --_bg-box-content-text: var(--gray-11);
+    --_color-box-content-text: var(--gray-0);
+  }
+}
+
+.tooltip-text {
+  &.dark-tooltip-text {
+    border: 1px solid var(--gray-7);
+  }
+}
+
+.tooltip .tooltip-text {
+  visibility: hidden;
+  width: 242px;
+  height: 200px;
+  background-color: var(--_bg-tooltip-branch);
+  color: white;
+  text-align: center;
+  border-radius: 10px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+  bottom: -170px;
+  left: -255px;
+}
+
+.tooltip .tooltip-text::after {
+  content: '';
+  z-index: -99;
+  position: absolute;
+  top: 7%;
+  left: 100.2%;
+  border-width: 8px;
+  border-style: solid;
+  border-color: var(--_bg-tooltip-branch-arrow) transparent transparent
+    transparent;
+  transform: rotate(270deg);
+}
+
+.tooltip:hover .tooltip-text {
+  visibility: visible;
+}
 
 .color-btn-icon {
   --_bg-color-btn-icon: var(--blue-5-hsl);
@@ -50,7 +149,7 @@ import AppBox from 'components/app/AppBox.vue';
   color: var(--gray-0);
   background: hsl(var(--_bg-color-btn-icon));
 
-  &.dark {
+  &.dark-btn-icon {
     --_bg-color-btn-icon: var(--surface-0);
     border: 2px solid;
     border-color: var(--brand-1);