From 9b36c6b254d128d9b313ee6141fb19997428138b Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Tue, 23 Jul 2024 09:45:47 -0400
Subject: [PATCH] Add side bar icon tooltip (#206)

---
 src/components/sidebar/SideBarIcon.vue               | 5 +++++
 src/components/sidebar/SideBarSettingsToggleIcon.vue | 2 +-
 src/components/sidebar/SideBarThemeToggleIcon.vue    | 2 +-
 src/components/sidebar/SideToolBar.vue               | 7 ++++++-
 src/main.ts                                          | 2 ++
 5 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/sidebar/SideBarIcon.vue b/src/components/sidebar/SideBarIcon.vue
index 075d3a31d..463eebb38 100644
--- a/src/components/sidebar/SideBarIcon.vue
+++ b/src/components/sidebar/SideBarIcon.vue
@@ -11,6 +11,7 @@
       icon: 'side-bar-button-icon',
     }"
     @click="emit('click', $event)"
+    v-tooltip="{ value: props.tooltip, showDelay: 300, hideDelay: 300 }"
   />
 </template>
 
@@ -20,6 +21,10 @@ import Button from "primevue/button";
 const props = defineProps({
   icon: String,
   selected: Boolean,
+  tooltip: {
+    type: String,
+    default: "",
+  },
 });
 
 const emit = defineEmits(["click"]);
diff --git a/src/components/sidebar/SideBarSettingsToggleIcon.vue b/src/components/sidebar/SideBarSettingsToggleIcon.vue
index 00f346bea..7d6269d33 100644
--- a/src/components/sidebar/SideBarSettingsToggleIcon.vue
+++ b/src/components/sidebar/SideBarSettingsToggleIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <SideBarIcon icon="pi pi-cog" @click="showSetting" />
+  <SideBarIcon icon="pi pi-cog" @click="showSetting" tooltip="Settings" />
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/sidebar/SideBarThemeToggleIcon.vue b/src/components/sidebar/SideBarThemeToggleIcon.vue
index b18d2b2e7..7df7815c1 100644
--- a/src/components/sidebar/SideBarThemeToggleIcon.vue
+++ b/src/components/sidebar/SideBarThemeToggleIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <SideBarIcon :icon="icon" @click="toggleTheme" />
+  <SideBarIcon :icon="icon" @click="toggleTheme" tooltip="Toggle Theme" />
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/sidebar/SideToolBar.vue b/src/components/sidebar/SideToolBar.vue
index 2754e376b..8f2f2455a 100644
--- a/src/components/sidebar/SideToolBar.vue
+++ b/src/components/sidebar/SideToolBar.vue
@@ -4,6 +4,7 @@
       <SideBarIcon
         v-for="item in items"
         :icon="item.icon"
+        :tooltip="item.tooltip"
         :selected="item === selectedItem"
         @click="onItemClick(item)"
       />
@@ -26,7 +27,11 @@ import { markRaw, onMounted, onUnmounted, ref, watch } from "vue";
 
 const items = ref([
   // { icon: "pi pi-map", component: markRaw(NodeDetailSideBarItem) },
-  { icon: "pi pi-history", component: markRaw(QueueSideBarItem) },
+  {
+    icon: "pi pi-history",
+    tooltip: "Queue",
+    component: markRaw(QueueSideBarItem),
+  },
 ]);
 const selectedItem = ref(null);
 const onItemClick = (item) => {
diff --git a/src/main.ts b/src/main.ts
index 3d0c5ba49..a7462d320 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,6 +4,7 @@ import Aura from "@primevue/themes/aura";
 import { definePreset } from "@primevue/themes";
 import ConfirmationService from "primevue/confirmationservice";
 import ToastService from "primevue/toastservice";
+import Tooltip from "primevue/tooltip";
 import "primeicons/primeicons.css";
 
 import App from "./App.vue";
@@ -24,6 +25,7 @@ comfyApp.setup().then(() => {
   window["app"] = comfyApp;
   window["graph"] = comfyApp.graph;
 
+  app.directive("tooltip", Tooltip);
   app
     .use(PrimeVue, {
       theme: {