Skip to content

refactor(editor): Replace old N8nTooltip with new Reka UI based tooltip #22838

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cstuncsik wants to merge 5 commits into
base: master
Choose a base branch
from
+1,556 −1,602
Open

refactor(editor): Replace old N8nTooltip with new Reka UI based tooltip #22838

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9411576
refactor(editor): Replace old N8nTooltip with new Reka UI based tooltip
cstuncsik Dec 5, 2025
eb79adf
refactor: update tooltip implementation across various components to …
cstuncsik Dec 5, 2025
69a0806
refactor(tests): remove unused imports from Assignment and WorkflowHi…
cstuncsik Dec 5, 2025
467094b
refactor(tests): update ActionBox and IconPicker tests to include N8n…
cstuncsik Dec 5, 2025
37fa003
Merge branch 'master' into ds-298-replace-old-tooltip-component
cstuncsik Dec 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/frontend/@n8n/design-system/src/components/N8nActionBox/ActionBox.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ describe('N8NActionBox', () => {
buttonType: 'primary',
},
global: {
stubs: ['N8nHeading', 'N8nText', 'N8nButton', 'N8nCallout'],
stubs: ['N8nHeading', 'N8nText', 'N8nButton', 'N8nCallout', 'N8nTooltip'],
},
});
expect(wrapper.html()).toMatchSnapshot();
Expand All @@ -30,7 +30,7 @@ describe('N8NActionBox', () => {
buttonType: 'primary',
},
global: {
stubs: ['N8nHeading', 'N8nText', 'N8nButton', 'N8nCallout', 'N8nIcon'],
stubs: ['N8nHeading', 'N8nText', 'N8nButton', 'N8nCallout', 'N8nIcon', 'N8nTooltip'],
},
});
expect(wrapper.html()).toMatchSnapshot();
Expand Down
8 changes: 2 additions & 6 deletions ...ntend/@n8n/design-system/src/components/N8nActionBox/__snapshots__/ActionBox.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,7 @@ exports[`N8NActionBox > should render correctly with emoji 1`] = `
<div class="description">
<n8n-text-stub color="text-base" bold="false" size="medium" compact="false" tag="span"></n8n-text-stub>
</div>
<n8n-button-stub block="false" element="button" label="Do something" square="false" active="false" disabled="false" loading="false" outline="false" size="large" text="false" type="primary" role="button" class="el-tooltip__trigger"></n8n-button-stub>
<!--teleport start-->
<!--teleport end-->
<n8n-tooltip-stub placement="top" disabled="true" showafter="0" visible="false" enterable="true" teleported="true" offset="6" buttons="" justifybuttons="flex-end" avoidcollisions="true"></n8n-tooltip-stub>
<!--v-if-->
<!--v-if-->
</div>"
Expand All @@ -28,9 +26,7 @@ exports[`N8NActionBox > should render correctly with icon 1`] = `
<div class="description">
<n8n-text-stub color="text-base" bold="false" size="medium" compact="false" tag="span"></n8n-text-stub>
</div>
<n8n-button-stub block="false" element="button" label="Add Item" square="false" active="false" disabled="false" loading="false" outline="false" size="large" text="false" type="primary" role="button" class="el-tooltip__trigger"></n8n-button-stub>
<!--teleport start-->
<!--teleport end-->
<n8n-tooltip-stub placement="top" disabled="true" showafter="0" visible="false" enterable="true" teleported="true" offset="6" buttons="" justifybuttons="flex-end" avoidcollisions="true"></n8n-tooltip-stub>
<!--v-if-->
<!--v-if-->
</div>"
Expand Down
16 changes: 11 additions & 5 deletions packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import userEvent from '@testing-library/user-event';
import { fireEvent, render } from '@testing-library/vue';
import { fireEvent, render, waitFor } from '@testing-library/vue';
import { createRouter, createWebHistory } from 'vue-router';

import IconPicker from '.';
Expand Down Expand Up @@ -65,7 +65,7 @@ describe('IconPicker', () => {
it('renders icon picker with custom icon and tooltip', async () => {
const ICON = 'layers';
const TOOLTIP = 'Select something...';
const { getByTestId, getByRole } = render(IconPicker, {
const { getByTestId, baseElement } = render(IconPicker, {
props: {
modelValue: { type: 'icon', value: ICON },
buttonTooltip: TOOLTIP,
Expand All @@ -77,14 +77,17 @@ describe('IconPicker', () => {
},
});
await userEvent.hover(getByTestId('icon-picker-button'));
expect(getByRole('tooltip').textContent).toBe(TOOLTIP);
await waitFor(() => {
const tooltip = baseElement.ownerDocument.querySelector('[data-dismissable-layer]');
expect(tooltip).toHaveTextContent(TOOLTIP);
});
expect(getByTestId('icon-picker-button')).toHaveAttribute('icon', ICON);
});

it('renders emoji as default icon correctly', async () => {
const ICON = '🔥';
const TOOLTIP = 'Select something...';
const { getByTestId, getByRole } = render(IconPicker, {
const { getByTestId, baseElement } = render(IconPicker, {
props: {
modelValue: { type: 'emoji', value: ICON },
buttonTooltip: TOOLTIP,
Expand All @@ -95,7 +98,10 @@ describe('IconPicker', () => {
},
});
await userEvent.hover(getByTestId('icon-picker-button'));
expect(getByRole('tooltip').textContent).toBe(TOOLTIP);
await waitFor(() => {
const tooltip = baseElement.ownerDocument.querySelector('[data-dismissable-layer]');
expect(tooltip).toHaveTextContent(TOOLTIP);
});
expect(getByTestId('icon-picker-button')).toHaveTextContent(ICON);
});

Expand Down
4 changes: 2 additions & 2 deletions packages/frontend/@n8n/design-system/src/components/N8nInfoTip/InfoTip.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<script lang="ts" setup>
import type { Placement } from 'element-plus';
import { computed } from 'vue';

import type { IconSize } from '../../types';
import type { IconColor } from '../../types/icon';
import N8nIcon from '../N8nIcon';
import { type IconName } from '../N8nIcon/icons';
import N8nTooltip from '../N8nTooltip';
import type { Placement } from '../N8nTooltip/Tooltip.types';

const THEME = ['info', 'info-light', 'warning', 'warning-light', 'danger', 'success'] as const;
const TYPE = ['note', 'tooltip'] as const;
Expand Down Expand Up @@ -77,7 +77,7 @@ const iconData = computed<{ icon: IconName; color: IconColor }>(() => {
<N8nTooltip
v-if="type === 'tooltip'"
:placement="tooltipPlacement"
:popper-class="$style.tooltipPopper"
:content-class="$style.tooltipPopper"
:disabled="type !== 'tooltip'"
:enterable
>
Expand Down
5 changes: 2 additions & 3 deletions .../frontend/@n8n/design-system/src/components/N8nInfoTip/__snapshots__/InfoTip.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,8 @@ exports[`N8nInfoTip > should render correctly as note 1`] = `
exports[`N8nInfoTip > should render correctly as tooltip 1`] = `
"<div class="n8n-info-tip infoTip info tooltip bold">
<!-- Note that the branching is required to support displaying
the slot either in the tooltip of the icon or following it --><span class="iconText el-tooltip__trigger el-tooltip__trigger"><n8n-icon-stub icon="info" spin="false" color="text-base"></n8n-icon-stub></span>
<!--teleport start-->
<!--teleport end-->
the slot either in the tooltip of the icon or following it --><span data-state="closed" data-grace-area-trigger="" class="iconText"><n8n-icon-stub icon="info" spin="false" color="text-base"></n8n-icon-stub></span>
<!--v-if-->
</div>"
`;

Expand Down
2 changes: 1 addition & 1 deletion packages/frontend/@n8n/design-system/src/components/N8nInputLabel/InputLabel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const addTargetBlank = (html: string) =>
v-if="tooltipText && label"
:class="[$style.infoIcon, showTooltip ? $style.visible : $style.hidden]"
>
<N8nTooltip placement="top" :popper-class="$style.tooltipPopper" :show-after="300">
<N8nTooltip placement="top" :content-class="$style.tooltipPopper" :show-after="300">
<N8nIcon :class="$style.icon" icon="circle-help" size="small" />
<template #content>
<div v-n8n-html="addTargetBlank(tooltipText)" />
Expand Down
2 changes: 1 addition & 1 deletion packages/frontend/@n8n/design-system/src/components/N8nNodeIcon/NodeIcon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<script lang="ts" setup>
import type { Placement } from 'element-plus';
import { computed } from 'vue';

import N8nTooltip from '../N8nTooltip';
import IconContent from './IconContent.vue';
import type { Placement } from '../N8nTooltip/Tooltip.types';

type IconType = 'file' | 'icon' | 'unknown';

Expand Down
Loading
Loading