From 6f9bef3c5c6ba64a95dc91af558b9ddea56676ba Mon Sep 17 00:00:00 2001
From: Comfy Org PR Bot <snomiao+comfy-pr@gmail.com>
Date: Wed, 5 Nov 2025 17:37:10 +0900
Subject: [PATCH] [backport rh-test] fix(AssetCard): use tooltip instead of
 title for overflow text (#6558)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Backport of #6556 to `rh-test`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6558-backport-rh-test-fix-AssetCard-use-tooltip-instead-of-title-for-overflow-text-2a06d73d365081bd8e12dea668538935)
by [Unito](https://www.unito.io)

Co-authored-by: Arjan Singh <1598641+arjansingh@users.noreply.github.com>
---
 src/platform/assets/components/AssetCard.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index 3f793529b..0fe141af7 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -24,6 +24,7 @@
       <div>
         <h3
           :id="titleId"
+          v-tooltip.top="{ value: asset.name, showDelay: tooltipDelay }"
           :class="
             cn(
               'mb-2 m-0 text-base font-semibold line-clamp-2 wrap-anywhere',
@@ -31,12 +32,12 @@
               'dark-theme:text-white'
             )
           "
-          :title="asset.name"
         >
           {{ asset.name }}
         </h3>
         <p
           :id="descId"
+          v-tooltip.top="{ value: asset.description, showDelay: tooltipDelay }"
           :class="
             cn(
               'm-0 text-sm leading-6 overflow-hidden [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box]',
@@ -44,7 +45,6 @@
               'dark-theme:text-slate-100'
             )
           "
-          :title="asset.description"
         >
           {{ asset.description }}
         </p>
@@ -81,6 +81,7 @@ import { computed, useId } from 'vue'
 
 import AssetBadgeGroup from '@/platform/assets/components/AssetBadgeGroup.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { cn } from '@/utils/tailwindUtil'
 
 const props = defineProps<{
@@ -88,9 +89,15 @@ const props = defineProps<{
   interactive?: boolean
 }>()
 
+const settingStore = useSettingStore()
+
 const titleId = useId()
 const descId = useId()
 
+const tooltipDelay = computed<number>(() =>
+  settingStore.get('LiteGraph.Node.TooltipDelay')
+)
+
 const { error } = useImage({
   src: props.asset.preview_url ?? '',
   alt: props.asset.name