fix: fix tooltip buttons styling

packages/design-system/src/components/N8nTooltip/Tooltip.stories.ts

@@ -41,11 +41,35 @@ const Template: StoryFn = (args, { argTypes }) => ({
 	components: {
 		N8nTooltip,
 	},
-	template:
-		'<n8n-tooltip v-bind="args"><div style="margin:50px; display: inline-block;"><span>yo</span></div></n8n-tooltip>',
+	template: '<n8n-tooltip v-bind="args"><button>Hover me</button></n8n-tooltip>',
 });
 
 export const Tooltip = Template.bind({});
 Tooltip.args = {
 	content: '...',
 };
+
+export const TooltipWithButtons = Template.bind({});
+TooltipWithButtons.args = {
+	content: 'Hello world!',
+	buttons: [
+		{
+			attrs: {
+				label: 'Button 1',
+				'data-test-id': 'tooltip-button',
+			},
+			listeners: {
+				click: () => alert('Clicked 1'),
+			},
+		},
+		{
+			attrs: {
+				label: 'Button 2',
+				'data-test-id': 'tooltip-button',
+			},
+			listeners: {
+				click: () => alert('Clicked 2'),
+			},
+		},
+	],
+};

packages/design-system/src/components/N8nTooltip/Tooltip.vue

@@ -1,15 +1,22 @@
 <template>
 	<el-tooltip v-bind="{ ...$props, ...$attrs }">
-		<template #content>
-			<n8n-button
-				v-for="button in buttons"
-				:key="button.attrs.label"
-				v-bind="button.attrs"
-				v-on="button.listeners"
-			/>
-			<slot name="content"></slot>
-		</template>
 		<slot />
+		<template #content>
+			<slot name="content">
+				{{ content }}
+			</slot>
+			<div
+				v-if="buttons.length"
+				:class="$style.buttons"
+				:style="{ justifyContent: justifyButtons }"
+			>
+				<n8n-button
+					v-for="button in buttons"
+					:key="button.attrs.label"
+					v-bind="{ ...button.attrs, ...button.listeners }"
+				/>
+			</div>
+		</template>
 	</el-tooltip>
 </template>
 
@@ -29,6 +36,10 @@ export default defineComponent({
 	},
 	props: {
 		...ElTooltip.props,
+		content: {
+			type: String,
+			default: '',
+		},
 		justifyButtons: {
 			type: String,
 			default: 'flex-end',
@@ -59,5 +70,6 @@ export default defineComponent({
 	display: flex;
 	align-items: center;
 	margin-top: var(--spacing-s);
+	gap: var(--spacing-2xs);
 }
 </style>