From 91d56d2f6139a8645cbdb4fdff58a7be4ef0bebf Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Mon, 30 Mar 2026 12:36:23 +0200
Subject: [PATCH] fix(editor): Show tooltip on dependency pill (#27545)

---
 .../frontend/@n8n/i18n/src/locales/en.json    |  3 +
 .../src/app/components/DependencyPill.vue     | 76 ++++++++++---------
 2 files changed, 44 insertions(+), 35 deletions(-)

diff --git a/packages/frontend/@n8n/i18n/src/locales/en.json b/packages/frontend/@n8n/i18n/src/locales/en.json
index a79aa861e9e..22b735634d6 100644
--- a/packages/frontend/@n8n/i18n/src/locales/en.json
+++ b/packages/frontend/@n8n/i18n/src/locales/en.json
@@ -3849,6 +3849,9 @@
 	"workflows.dynamic.tooltipTitle": "Dynamic credentials",
 	"workflows.dynamic.resolverMissing": "Credential resolver missing",
 	"workflows.dependencies.tooltip": "1 dependency | {count} dependencies",
+	"workflows.dependencies.tooltip.workflow": "Resources referenced by this workflow",
+	"workflows.dependencies.tooltip.credential": "Resources referencing this credential",
+	"workflows.dependencies.tooltip.dataTable": "Resources referencing this data table",
 	"workflows.dependencies.modal.title": "Dependencies",
 	"workflows.dependencies.modal.search": "Search dependencies...",
 	"workflows.dependencies.type.credentials": "Credentials",
diff --git a/packages/frontend/editor-ui/src/app/components/DependencyPill.vue b/packages/frontend/editor-ui/src/app/components/DependencyPill.vue
index cfcbaa804a6..8d934759cec 100644
--- a/packages/frontend/editor-ui/src/app/components/DependencyPill.vue
+++ b/packages/frontend/editor-ui/src/app/components/DependencyPill.vue
@@ -3,7 +3,7 @@ import { computed, ref } from 'vue';
 import { useI18n } from '@n8n/i18n';
 import { useRouter } from 'vue-router';
 import type { BaseTextKey } from '@n8n/i18n';
-import { N8nBadge, N8nIcon } from '@n8n/design-system';
+import { N8nBadge, N8nIcon, N8nTooltip } from '@n8n/design-system';
 import {
 	N8nDropdownMenu,
 	type DropdownMenuItemProps,
@@ -47,6 +47,10 @@ const effectiveCount = computed(() => {
 
 const hasHiddenDeps = computed(() => (depsResult.value?.inaccessibleCount ?? 0) > 0);
 
+const tooltipText = computed(() =>
+	i18n.baseText(`workflows.dependencies.tooltip.${props.resourceType}` as BaseTextKey),
+);
+
 const hasFullDeps = computed(() => depsResult.value !== undefined);
 
 const showSearch = computed(
@@ -194,40 +198,42 @@ async function onDropdownToggle(open: boolean) {
 </script>
 
 <template>
-	<N8nDropdownMenu
-		:items="menuItems"
-		trigger="hover"
-		placement="bottom"
-		:loading="isLoadingDetails"
-		:loading-item-count="1"
-		:searchable="showSearch"
-		extra-popper-class="dependency-pill-dropdown"
-		:search-placeholder="i18n.baseText('workflows.dependencies.search.placeholder')"
-		:max-height="280"
-		:data-test-id="dataTestId"
-		@select="onSelect"
-		@search="onSearch"
-		@update:model-value="onDropdownToggle"
-	>
-		<template #trigger>
-			<N8nBadge theme="tertiary" :class="$style.badge">
-				<span :class="$style.badgeText">
-					<N8nIcon icon="link" size="medium" />
-					{{ effectiveCount }}
-				</span>
-			</N8nBadge>
-		</template>
-		<template v-if="hasHiddenDeps" #footer>
-			<div :class="$style.hiddenNotice">
-				{{
-					i18n.baseText('workflows.dependencies.hiddenNotice', {
-						adjustToNumber: depsResult!.inaccessibleCount,
-						interpolate: { count: String(depsResult!.inaccessibleCount) },
-					})
-				}}
-			</div>
-		</template>
-	</N8nDropdownMenu>
+	<N8nTooltip :content="tooltipText" placement="left" :show-after="200">
+		<N8nDropdownMenu
+			:items="menuItems"
+			trigger="hover"
+			placement="bottom"
+			:loading="isLoadingDetails"
+			:loading-item-count="1"
+			:searchable="showSearch"
+			extra-popper-class="dependency-pill-dropdown"
+			:search-placeholder="i18n.baseText('workflows.dependencies.search.placeholder')"
+			:max-height="280"
+			:data-test-id="dataTestId"
+			@select="onSelect"
+			@search="onSearch"
+			@update:model-value="onDropdownToggle"
+		>
+			<template #trigger>
+				<N8nBadge theme="tertiary" :class="$style.badge">
+					<span :class="$style.badgeText">
+						<N8nIcon icon="link" size="medium" />
+						{{ effectiveCount }}
+					</span>
+				</N8nBadge>
+			</template>
+			<template v-if="hasHiddenDeps" #footer>
+				<div :class="$style.hiddenNotice">
+					{{
+						i18n.baseText('workflows.dependencies.hiddenNotice', {
+							adjustToNumber: depsResult!.inaccessibleCount,
+							interpolate: { count: String(depsResult!.inaccessibleCount) },
+						})
+					}}
+				</div>
+			</template>
+		</N8nDropdownMenu>
+	</N8nTooltip>
 </template>
 
 <style lang="scss" module>