From 2ac67f2dd0850dd36624ffe0e8a941c780ed14e3 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Mon, 24 Feb 2025 11:22:26 -0500
Subject: [PATCH] Add tooltip show-delay in action bar (#2709)

---
 src/components/actionbar/BatchCountEdit.vue   |  5 +++-
 src/components/actionbar/ComfyQueueButton.vue | 24 +++++++++++++------
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/actionbar/BatchCountEdit.vue b/src/components/actionbar/BatchCountEdit.vue
index b46a6ce34..1e1109e2e 100644
--- a/src/components/actionbar/BatchCountEdit.vue
+++ b/src/components/actionbar/BatchCountEdit.vue
@@ -2,7 +2,10 @@
   <div
     class="batch-count"
     :class="props.class"
-    v-tooltip.bottom="$t('menu.batchCount')"
+    v-tooltip.bottom="{
+      value: $t('menu.batchCount'),
+      showDelay: 600
+    }"
     :aria-label="$t('menu.batchCount')"
   >
     <InputNumber
diff --git a/src/components/actionbar/ComfyQueueButton.vue b/src/components/actionbar/ComfyQueueButton.vue
index 4000b921c..668722322 100644
--- a/src/components/actionbar/ComfyQueueButton.vue
+++ b/src/components/actionbar/ComfyQueueButton.vue
@@ -8,11 +8,12 @@
       @click="queuePrompt"
       :model="queueModeMenuItems"
       data-testid="queue-button"
-      v-tooltip.bottom="
-        workspaceStore.shiftDown
+      v-tooltip.bottom="{
+        value: workspaceStore.shiftDown
           ? $t('menu.queueWorkflowFront')
-          : $t('menu.queueWorkflow')
-      "
+          : $t('menu.queueWorkflow'),
+        showDelay: 600
+      }"
     >
       <template #icon>
         <i-lucide:list-start v-if="workspaceStore.shiftDown" />
@@ -27,14 +28,20 @@
           :severity="item.key === queueMode ? 'primary' : 'secondary'"
           size="small"
           text
-          v-tooltip="item.tooltip"
+          v-tooltip="{
+            value: item.tooltip,
+            showDelay: 600
+          }"
         />
       </template>
     </SplitButton>
     <BatchCountEdit />
     <ButtonGroup class="execution-actions flex flex-nowrap">
       <Button
-        v-tooltip.bottom="$t('menu.interrupt')"
+        v-tooltip.bottom="{
+          value: $t('menu.interrupt'),
+          showDelay: 600
+        }"
         icon="pi pi-times"
         :severity="executingPrompt ? 'danger' : 'secondary'"
         :disabled="!executingPrompt"
@@ -44,7 +51,10 @@
       >
       </Button>
       <Button
-        v-tooltip.bottom="$t('sideToolbar.queueTab.clearPendingTasks')"
+        v-tooltip.bottom="{
+          value: $t('sideToolbar.queueTab.clearPendingTasks'),
+          showDelay: 600
+        }"
         icon="pi pi-stop"
         :severity="hasPendingTasks ? 'danger' : 'secondary'"
         :disabled="!hasPendingTasks"