feat(editor): Show tooltips for canvas edge buttons (#24311)

packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/edges/CanvasEdgeToolbar.vue

@@ -5,6 +5,8 @@ import type { NodeConnectionType } from 'n8n-workflow';
 import { NodeConnectionTypes } from 'n8n-workflow';
 
 import { N8nIconButton } from '@n8n/design-system';
+import CanvasEdgeTooltip from './CanvasEdgeTooltip.vue';
+
 const emit = defineEmits<{
 	add: [];
 	delete: [];
@@ -35,27 +37,28 @@ function onDelete() {
 
 <template>
 	<div :class="classes" data-test-id="canvas-edge-toolbar">
-		<N8nIconButton
-			v-if="isAddButtonVisible"
-			class="canvas-edge-toolbar-button"
-			data-test-id="add-connection-button"
-			type="tertiary"
-			size="small"
-			icon-size="medium"
-			icon="plus"
-			:title="i18n.baseText('node.add')"
-			@click="onAdd"
-		/>
-		<N8nIconButton
-			data-test-id="delete-connection-button"
-			class="canvas-edge-toolbar-button"
-			type="tertiary"
-			size="small"
-			icon-size="medium"
-			icon="trash-2"
-			:title="i18n.baseText('node.delete')"
-			@click="onDelete"
-		/>
+		<CanvasEdgeTooltip v-if="isAddButtonVisible" :content="i18n.baseText('node.add')">
+			<N8nIconButton
+				class="canvas-edge-toolbar-button"
+				data-test-id="add-connection-button"
+				type="tertiary"
+				size="small"
+				icon-size="medium"
+				icon="plus"
+				@click="onAdd"
+			/>
+		</CanvasEdgeTooltip>
+		<CanvasEdgeTooltip :content="i18n.baseText('node.delete')">
+			<N8nIconButton
+				data-test-id="delete-connection-button"
+				class="canvas-edge-toolbar-button"
+				type="tertiary"
+				size="small"
+				icon-size="medium"
+				icon="trash-2"
+				@click="onDelete"
+			/>
+		</CanvasEdgeTooltip>
 	</div>
 </template>
 

packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/edges/CanvasEdgeTooltip.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { useCssModule } from 'vue';
+import { N8nTooltip } from '@n8n/design-system';
+
+defineProps<{
+	content: string;
+}>();
+
+const $style = useCssModule();
+</script>
+
+<template>
+	<div :class="$style.tooltipContainer">
+		<N8nTooltip
+			:content="content"
+			placement="top"
+			:teleported="false"
+			:offset="8"
+			popper-class="canvas-edge-toolbar-popper"
+		>
+			<slot />
+		</N8nTooltip>
+	</div>
+</template>
+
+<style lang="scss" module>
+.tooltipContainer {
+	position: relative;
+}
+</style>
+
+<style lang="scss">
+.canvas-edge-toolbar-popper {
+	white-space: nowrap;
+
+	.el-popper__arrow {
+		// override default margin as it moves the arrow off the center
+		margin: 0 !important;
+	}
+}
+</style>

packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/handles/render-types/CanvasHandleNonMainInput.vue

@@ -82,7 +82,7 @@ function onClickAdd() {
 
 .label {
 	position: absolute;
-	top: 20px;
+	top: var(--spacing--lg);
 	left: 50%;
 	/* stylelint-disable-next-line @n8n/css-var-naming */
 	transform: translate(-50%, 0) scale(var(--canvas-zoom-compensation-factor, 1));

packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/handles/render-types/CanvasHandleNonMainOutput.vue

@@ -42,7 +42,7 @@ const handleStyles = computed(() => ({
 
 .label {
 	position: absolute;
-	top: -20px;
+	top: calc(-1 * var(--spacing--lg));
 	left: 50%;
 	/* stylelint-disable-next-line @n8n/css-var-naming */
 	transform: translate(-50%, 0) scale(var(--canvas-zoom-compensation-factor, 1));