Add side bar icon tooltip (#206)

Author: huchenlei

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"]);

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">

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">

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) => {

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: {