From dbeb15f92564f6502423d57372bd70572e71c953 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Thu, 24 Sep 2026 14:29:41 +0200
Subject: [PATCH 1/9] =?UTF-8?q?=F0=9F=94=A8=20Restructure=20ToolTip=20to?=
 =?UTF-8?q?=20have=20a=20default=20slot=20and=20a=20content=20slot?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ToolTip.vue | 123 +++++++++++++++++++++++++++----------
 1 file changed, 90 insertions(+), 33 deletions(-)

diff --git a/src/components/ToolTip.vue b/src/components/ToolTip.vue
index 4f0880f..2396458 100644
--- a/src/components/ToolTip.vue
+++ b/src/components/ToolTip.vue
@@ -1,46 +1,64 @@
 <script setup lang="ts">
 // component properties
+import { useId } from 'vue';
 import { TooltipPosition } from '@/definitions';
 
 // component properties
 interface Props {
-  alt?: string;
   position?: TooltipPosition;
+  visible?: boolean;
   dataTestid?: string;
 }
 withDefaults(defineProps<Props>(), {
-  alt: '',
   position: TooltipPosition.Bottom,
+  visible: undefined, // Explicit undefined default so Vue doesn't auto-cast an absent boolean prop to false.
   dataTestid: 'tool-tip',
 });
+
+// ID shared with consumers so they can wire aria-describedby onto the trigger they slot in.
+const tooltipId = useId();
 </script>
 
 <template>
-  <div class="tooltip" :aria-label="alt" :data-testid="dataTestid">
-    <div class="tooltip-container">
-      <div class="tooltip-body">
-        <slot></slot>
+  <div class="tooltip-anchor">
+    <slot :tooltip-id="tooltipId"></slot>
+    <div
+      class="tooltip"
+      :class="[position, { 'force-visible': visible === true, 'force-hidden': visible === false }]"
+      role="tooltip"
+      :id="tooltipId"
+      :data-testid="dataTestid"
+    >
+      <div class="tooltip-container">
+        <div class="tooltip-body">
+          <slot name="content"></slot>
+        </div>
+        <svg
+          class="beak"
+          width="29"
+          height="6"
+          viewBox="0 0 29 6"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M15.9142 4.58579C15.1332 5.36683 13.8668 5.36683 13.0858 4.58579L8.5 0L20.5 0L15.9142 4.58579Z"
+            fill="currentColor"
+          />
+        </svg>
       </div>
-      <svg
-        class="beak"
-        :class="position"
-        width="29"
-        height="6"
-        viewBox="0 0 29 6"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.9142 4.58579C15.1332 5.36683 13.8668 5.36683 13.0858 4.58579L8.5 0L20.5 0L15.9142 4.58579Z"
-          fill="currentColor"
-        />
-      </svg>
     </div>
   </div>
 </template>
 
 <style scoped>
+.tooltip-anchor {
+  position: relative;
+  display: inline-block;
+}
+
 .tooltip {
+  --tooltip-gap: 0.5rem;
   position: absolute;
   text-wrap: wrap;
   border-radius: 0.5rem;
@@ -53,6 +71,9 @@ withDefaults(defineProps<Props>(), {
   box-shadow:
     0px 4px 8px 0px rgba(0, 0, 0, 0.14),
     0px 0px 2px 0px rgba(0, 0, 0, 0.12);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 250ms ease-out;
 }
 
 .tooltip-body {
@@ -75,30 +96,66 @@ withDefaults(defineProps<Props>(), {
   filter: drop-shadow(0px 1px 0px #00000010);
 }
 
-.pos-none {
-  display: none;
+/* Box placement: position names the side the tooltip appears on */
+.tooltip.pos-top {
+  bottom: calc(100% + var(--tooltip-gap));
+  left: 50%;
+  transform: translateX(-50%);
 }
 
-.pos-top {
-  top: -6px;
-  transform: scaleY(-1);
+.tooltip.pos-bottom,
+.tooltip.pos-none {
+  top: calc(100% + var(--tooltip-gap));
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.tooltip.pos-left {
+  right: calc(100% + var(--tooltip-gap));
+  top: 50%;
+  transform: translateY(-50%);
+}
 
-  &.beak {
-    filter: drop-shadow(0px -1px 0px #00000010);
-  }
+.tooltip.pos-right {
+  left: calc(100% + var(--tooltip-gap));
+  top: 50%;
+  transform: translateY(-50%);
 }
 
-.pos-bottom {
+.tooltip.pos-top .beak {
   top: 100%;
 }
 
-.pos-left {
-  left: -17px;
-  transform: rotateZ(90deg);
+.tooltip.pos-bottom .beak {
+  top: -6px;
+  transform: scaleY(-1);
+  filter: drop-shadow(0px -1px 0px #00000010);
 }
 
-.pos-right {
+.tooltip.pos-left .beak {
   right: -17px;
   transform: rotateZ(-90deg);
 }
+
+.tooltip.pos-right .beak {
+  left: -17px;
+  transform: rotateZ(90deg);
+}
+
+.tooltip.pos-none .beak {
+  display: none;
+}
+
+.tooltip-anchor:hover .tooltip,
+.tooltip-anchor:focus-within .tooltip,
+.tooltip.force-visible {
+  opacity: 1;
+  pointer-events: auto;
+  z-index: 110;
+}
+
+.tooltip.force-hidden {
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
 </style>

From fcfa2625922f41abb36a753e7ac026184802fff5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Thu, 24 Sep 2026 14:38:03 +0200
Subject: [PATCH 2/9] =?UTF-8?q?=F0=9F=94=A8=20Drop=20TooltipPosition.None?=
 =?UTF-8?q?=20in=20favor=20of=20a=20beak=20property?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ToolTip.vue | 18 ++++++------------
 src/definitions.ts         |  1 -
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/components/ToolTip.vue b/src/components/ToolTip.vue
index 2396458..649d8c5 100644
--- a/src/components/ToolTip.vue
+++ b/src/components/ToolTip.vue
@@ -7,11 +7,13 @@ import { TooltipPosition } from '@/definitions';
 interface Props {
   position?: TooltipPosition;
   visible?: boolean;
+  beak?: boolean;
   dataTestid?: string;
 }
 withDefaults(defineProps<Props>(), {
   position: TooltipPosition.Bottom,
   visible: undefined, // Explicit undefined default so Vue doesn't auto-cast an absent boolean prop to false.
+  beak: true,
   dataTestid: 'tool-tip',
 });
 
@@ -24,7 +26,7 @@ const tooltipId = useId();
     <slot :tooltip-id="tooltipId"></slot>
     <div
       class="tooltip"
-      :class="[position, { 'force-visible': visible === true, 'force-hidden': visible === false }]"
+      :class="[position, { 'force-visible': visible === true, 'force-hidden': visible === false, 'no-beak': !beak }]"
       role="tooltip"
       :id="tooltipId"
       :data-testid="dataTestid"
@@ -33,14 +35,7 @@ const tooltipId = useId();
         <div class="tooltip-body">
           <slot name="content"></slot>
         </div>
-        <svg
-          class="beak"
-          width="29"
-          height="6"
-          viewBox="0 0 29 6"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
+        <svg class="beak" width="29" height="6" viewBox="0 0 29 6" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path
             d="M15.9142 4.58579C15.1332 5.36683 13.8668 5.36683 13.0858 4.58579L8.5 0L20.5 0L15.9142 4.58579Z"
             fill="currentColor"
@@ -103,8 +98,7 @@ const tooltipId = useId();
   transform: translateX(-50%);
 }
 
-.tooltip.pos-bottom,
-.tooltip.pos-none {
+.tooltip.pos-bottom {
   top: calc(100% + var(--tooltip-gap));
   left: 50%;
   transform: translateX(-50%);
@@ -142,7 +136,7 @@ const tooltipId = useId();
   transform: rotateZ(90deg);
 }
 
-.tooltip.pos-none .beak {
+.tooltip.no-beak .beak {
   display: none;
 }
 
diff --git a/src/definitions.ts b/src/definitions.ts
index 7b54c1a..a95d866 100644
--- a/src/definitions.ts
+++ b/src/definitions.ts
@@ -233,7 +233,6 @@ export enum FtueStep {
 }
 
 export enum TooltipPosition {
-  None = 'pos-none',
   Top = 'pos-top',
   Bottom = 'pos-bottom',
   Left = 'pos-left',

From 20198ff5032604e8f71a4b34e24d01c325d39632 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Thu, 24 Sep 2026 14:43:23 +0200
Subject: [PATCH 3/9] =?UTF-8?q?=F0=9F=94=A8=20Update=20stories=20and=20tes?=
 =?UTF-8?q?ts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ToolTip.stories.ts | 74 +++++++++++++++++++++----------
 test/components/ToolTip.test.js   | 66 +++++++++++++++++++++++----
 2 files changed, 108 insertions(+), 32 deletions(-)

diff --git a/src/components/ToolTip.stories.ts b/src/components/ToolTip.stories.ts
index 9e6678b..d15dcc8 100644
--- a/src/components/ToolTip.stories.ts
+++ b/src/components/ToolTip.stories.ts
@@ -11,10 +11,11 @@ const meta: Meta<typeof ToolTip> = {
   tags: ['autodocs'],
   argTypes: {
     position: { control: 'select', options: Object.values(TooltipPosition) },
-    default: { control: 'text' },
+    beak: { control: 'boolean' },
+    content: { control: 'text' },
   },
   args: {
-    default: 'Primary',
+    content: 'Primary',
   },
 };
 
@@ -22,16 +23,22 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Standard: Story = {
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `<div style="min-height:60px;"><story /></div>`,
-    }),
-  ],
+  render: (args) => ({
+    components: { ToolTip },
+    setup() {
+      return { args };
+    },
+    template: `<div style="min-height:60px;">
+      <tool-tip v-bind="args">
+        <button>Hover me</button>
+        <template #content>{{ args.content }}</template>
+      </tool-tip>
+    </div>`,
+  }),
   parameters: {
     docs: {
       source: {
-        code: '<tool-tip>Primary</tool-tip>',
+        code: '<tool-tip>\n  <button>Hover me</button>\n  <template #content>Primary</template>\n</tool-tip>',
       },
     },
   },
@@ -40,18 +47,36 @@ export const Standard: Story = {
 export const Position: Story = {
   render: () => ({
     components: { ToolTip },
-    template: `<div style="display:flex;flex-direction:column;gap:1rem;">
-      <div style="position:relative;height:3rem;"><tool-tip position="pos-top">Pointing upwards</tool-tip></div>
-      <div style="position:relative;height:3rem;"><tool-tip position="pos-left">Pointing left</tool-tip></div>
-      <div style="position:relative;height:3rem;"><tool-tip position="pos-bottom">Pointing downwards</tool-tip></div>
-      <div style="position:relative;height:3rem;"><tool-tip position="pos-right">Pointing right</tool-tip></div>
-      <div style="position:relative;height:3rem;"><tool-tip position="pos-none">Pointing nowhere</tool-tip></div>
+    template: `<div style="display:flex;gap:2rem;padding:3rem;">
+      <tool-tip position="pos-top"><button>Top</button><template #content>Appears above</template></tool-tip>
+      <tool-tip position="pos-left"><button>Left</button><template #content>Appears to the left</template></tool-tip>
+      <tool-tip position="pos-bottom"><button>Bottom</button><template #content>Appears below</template></tool-tip>
+      <tool-tip position="pos-right"><button>Right</button><template #content>Appears to the right</template></tool-tip>
+    </div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: '<tool-tip position="pos-top"><button>Top</button><template #content>Appears above</template></tool-tip>\n<tool-tip position="pos-left"><button>Left</button><template #content>Appears to the left</template></tool-tip>\n<tool-tip position="pos-bottom"><button>Bottom</button><template #content>Appears below</template></tool-tip>\n<tool-tip position="pos-right"><button>Right</button><template #content>Appears to the right</template></tool-tip>',
+      },
+    },
+  },
+};
+
+export const NoBeak: Story = {
+  render: () => ({
+    components: { ToolTip },
+    template: `<div style="display:flex;gap:2rem;padding:3rem;">
+      <tool-tip position="pos-top" :beak="false"><button>Top</button><template #content>Appears above</template></tool-tip>
+      <tool-tip position="pos-left" :beak="false"><button>Left</button><template #content>Appears to the left</template></tool-tip>
+      <tool-tip position="pos-bottom" :beak="false"><button>Bottom</button><template #content>Appears below</template></tool-tip>
+      <tool-tip position="pos-right" :beak="false"><button>Right</button><template #content>Appears to the right</template></tool-tip>
     </div>`,
   }),
   parameters: {
     docs: {
       source: {
-        code: '<tool-tip position="pos-top">Pointing upwards</tool-tip>\n<tool-tip position="pos-left">Pointing left</tool-tip>\n<tool-tip position="pos-bottom">Pointing downwards</tool-tip>\n<tool-tip position="pos-right">Pointing right</tool-tip>\n<tool-tip position="pos-none">Pointing nowhere</tool-tip>',
+        code: '<tool-tip position="pos-top" :beak="false"><button>Top</button><template #content>Appears above</template></tool-tip>\n<tool-tip position="pos-left" :beak="false"><button>Left</button><template #content>Appears to the left</template></tool-tip>\n<tool-tip position="pos-bottom" :beak="false"><button>Bottom</button><template #content>Appears below</template></tool-tip>\n<tool-tip position="pos-right" :beak="false"><button>Right</button><template #content>Appears to the right</template></tool-tip>',
       },
     },
   },
@@ -60,20 +85,21 @@ export const Position: Story = {
 export const Context: Story = {
   render: () => ({
     components: { ToolTip, PrimaryButton },
-    template: `<div style="position:relative; padding-top:3rem;">
-      <primary-button>
-        Copy the booking link
-      </primary-button>
-      <tool-tip style="top:0;">
-        This button copies to clipboard
+    template: `<div style="padding-bottom:3rem;">
+      <tool-tip>
+        <primary-button>
+          Copy the booking link
+        </primary-button>
+        <template #content>
+          This button copies to clipboard
+        </template>
       </tool-tip>
-      <p>Tooltips are currently not assigned to a specific element, but placed and positioned separately. This will be improved in the future.</p>
     </div>`,
   }),
   parameters: {
     docs: {
       source: {
-        code: '<div style="position: relative; padding-top: 3rem;">\n  <primary-button>\n    Copy the booking link\n  </primary-button>\n  <tool-tip style="top: 0;">\n    This button copies to clipboard\n  </tool-tip>\n</div>',
+        code: '<tool-tip>\n  <primary-button>\n    Copy the booking link\n  </primary-button>\n  <template #content>\n    This button copies to clipboard\n  </template>\n</tool-tip>',
       },
     },
   },
diff --git a/test/components/ToolTip.test.js b/test/components/ToolTip.test.js
index b89ab96..149e593 100644
--- a/test/components/ToolTip.test.js
+++ b/test/components/ToolTip.test.js
@@ -1,4 +1,5 @@
 import { describe, it, expect, afterEach } from 'vitest';
+import { h } from 'vue';
 import { mount } from '@vue/test-utils';
 import ToolTip from '@/components/ToolTip.vue';
 import { TooltipPosition } from '@/definitions';
@@ -8,7 +9,6 @@ describe('ToolTip', () => {
   var wrapper;
 
   const positions = [
-    TooltipPosition.None,
     TooltipPosition.Top,
     TooltipPosition.Bottom,
     TooltipPosition.Left,
@@ -23,11 +23,13 @@ describe('ToolTip', () => {
   it.each(positions)('%s renders correctly', (position) => {
     const ourProps = {
       position: position,
-      alt: `alt-${position}`,
+      beak: true,
       dataTestid: `tooltip-test-${position}`,
     };
     const ourSlots = {
-        default: 'Hello!',
+      // scoped default slot: the trigger, wired up with the tooltipId it's given
+      default: (slotProps) => h('button', { 'aria-describedby': slotProps.tooltipId }, 'Trigger'),
+      content: 'Hello!',
     };
 
     wrapper = mount(ToolTip, {
@@ -37,19 +39,67 @@ describe('ToolTip', () => {
 
     expect(wrapper.props()).toEqual(ourProps);
 
-    // verify exists and is displayed with correct text
+    // verify tooltip bubble exists, is a proper aria tooltip and shows the content slot text
     const tooltipSelector = `[data-testid=${ourProps['dataTestid']}]`;
     const toolTip = wrapper.find(tooltipSelector);
     expect(toolTip.exists()).toBe(true);
     expect(toolTip.isVisible()).toBe(true);
-    expect(toolTip.attributes()['aria-label']).toBe(ourProps['alt']);
-    expect(toolTip.text()).toBe(ourSlots['default']);
+    expect(toolTip.attributes().role).toBe('tooltip');
+    expect(toolTip.attributes().id).toBeTruthy();
+    expect(toolTip.text()).toBe('Hello!');
+    expect(toolTip.classes()).toContain(ourProps['position']);
 
-    // verify position 'beak'
+    // verify the trigger (default slot) was handed the same id to describe itself with
+    const trigger = wrapper.find('button');
+    expect(trigger.exists()).toBe(true);
+    expect(trigger.attributes()['aria-describedby']).toBe(toolTip.attributes().id);
+
+    // verify beak exists (its visibility per position is CSS-only, not asserted here)
     const container = toolTip.find('.tooltip-container');
     expect(container.exists()).toBe(true);
     const beak = container.find('.beak');
     expect(beak.exists()).toBe(true);
-    expect(beak.attributes().class).toBe(`beak ${ourProps['position']}`);
+  });
+
+  it.each([
+    { visible: true, expectedClass: 'force-visible' },
+    { visible: false, expectedClass: 'force-hidden' },
+  ])('visible=$visible forces the $expectedClass class', ({ visible, expectedClass }) => {
+    wrapper = mount(ToolTip, {
+      propsData: { visible },
+      slots: { default: 'Trigger', content: 'Hello!' },
+    });
+
+    const toolTip = wrapper.find('[data-testid=tool-tip]');
+    expect(toolTip.classes()).toContain(expectedClass);
+  });
+
+  it('visible unset leaves hover/focus in control (no force class)', () => {
+    wrapper = mount(ToolTip, {
+      slots: { default: 'Trigger', content: 'Hello!' },
+    });
+
+    const toolTip = wrapper.find('[data-testid=tool-tip]');
+    expect(toolTip.classes()).not.toContain('force-visible');
+    expect(toolTip.classes()).not.toContain('force-hidden');
+  });
+
+  it('beak defaults to visible', () => {
+    wrapper = mount(ToolTip, {
+      slots: { default: 'Trigger', content: 'Hello!' },
+    });
+
+    const toolTip = wrapper.find('[data-testid=tool-tip]');
+    expect(toolTip.classes()).not.toContain('no-beak');
+  });
+
+  it('beak=false hides the beak', () => {
+    wrapper = mount(ToolTip, {
+      propsData: { beak: false },
+      slots: { default: 'Trigger', content: 'Hello!' },
+    });
+
+    const toolTip = wrapper.find('[data-testid=tool-tip]');
+    expect(toolTip.classes()).toContain('no-beak');
   });
 });

From 10be2d0aa338932ec10931a25777dbe584af6341 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Thu, 24 Sep 2026 14:44:25 +0200
Subject: [PATCH 4/9] =?UTF-8?q?=F0=9F=94=A8=20Migrate=20BaseButton=20compo?=
 =?UTF-8?q?nent=20to=20the=20new=20ToolTip=20implementation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BaseButton.vue      | 51 +++++++++++++++---------------
 test/components/BaseButton.test.js |  4 +--
 2 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index 2936311..d510945 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -29,7 +29,32 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
+  <tool-tip v-if="tooltip" :position="TooltipPosition.Top" :visible="forceTooltip || undefined">
+    <template #default>
+      <component
+        :is="href ? 'a' : 'button'"
+        :href="href"
+        class="base"
+        :class="{ [type]: type, small: size === 'small', [variant]: variant }"
+        :type="formAction === 'none' ? 'button' : formAction"
+        :data-testid="dataTestid"
+        :disabled="disabled"
+      >
+        <span class="icon" v-if="$slots?.iconLeft">
+          <slot name="iconLeft" />
+        </span>
+        <span class="text">
+          <slot />
+        </span>
+        <span class="icon" v-if="$slots?.iconRight">
+          <slot name="iconRight" />
+        </span>
+      </component>
+    </template>
+    <template #content>{{ tooltip }}</template>
+  </tool-tip>
   <component
+    v-else
     :is="href ? 'a' : 'button'"
     :href="href"
     class="base"
@@ -47,15 +72,6 @@ withDefaults(defineProps<Props>(), {
     <span class="icon" v-if="$slots?.iconRight">
       <slot name="iconRight" />
     </span>
-    <tool-tip
-      v-if="tooltip"
-      class="tooltip"
-      :class="{ 'display-tooltip': forceTooltip }"
-      :position="TooltipPosition.Bottom"
-      @click.prevent
-    >
-      {{ tooltip }}
-    </tool-tip>
   </component>
 </template>
 
@@ -76,27 +92,10 @@ html {
 <style scoped>
 @import '@/assets/styles/mixins.pcss';
 
-.tooltip {
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 250ms ease-out;
-  bottom: calc(100% + .5rem);
-}
-
 a {
   text-decoration: none;
 }
 
-a:hover > .tooltip,
-button:hover > .tooltip,
-.display-tooltip {
-  opacity: 1;
-}
-a:hover > .tooltip,
-button:hover > .tooltip {
-  z-index: 110; /* Make sure that current tooltip is on top of static (forced) tooltips */
-}
-
 .base {
   display: flex;
   justify-content: center;
diff --git a/test/components/BaseButton.test.js b/test/components/BaseButton.test.js
index db00515..b224b13 100644
--- a/test/components/BaseButton.test.js
+++ b/test/components/BaseButton.test.js
@@ -79,7 +79,7 @@ describe('BaseButton', () => {
       expect(btn.isVisible()).toBe(true);
       expect(btn.attributes().class).toContain(ourProps['type']);
       expect(btn.attributes().class).toContain(ourProps['variant']);
-      expect(btn.text()).toContain(text); // btn text contains all dom text including btn label and tooltip
+      expect(btn.text()).toBe(text); // tooltip now lives outside the button, so btn text is just its own label
       expect(wrapper.find(tooltipSelector).text()).toBe(ourProps['tooltip']);
 
       // icon displayed or not depending on option
@@ -98,7 +98,7 @@ describe('BaseButton', () => {
 
       // force tooltip causes tooltip to display even when not hovering over button
       if (forceToolTip) {
-        expect(wrapper.find(tooltipSelector).isVisible()).toBeTruthy();
+        expect(wrapper.find(tooltipSelector).classes()).toContain('force-visible');
       }
 
       // providing href turns button into an anchor tag

From a66baba16fd627d4ac93051afca2e2e8f6048fa5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Thu, 24 Sep 2026 15:18:33 +0200
Subject: [PATCH 5/9] =?UTF-8?q?=F0=9F=94=A8=20Use=20primary=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ToolTip.stories.ts | 38 +++++++++++++++----------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/ToolTip.stories.ts b/src/components/ToolTip.stories.ts
index d15dcc8..40d05f5 100644
--- a/src/components/ToolTip.stories.ts
+++ b/src/components/ToolTip.stories.ts
@@ -24,13 +24,13 @@ type Story = StoryObj<typeof meta>;
 
 export const Standard: Story = {
   render: (args) => ({
-    components: { ToolTip },
+    components: { ToolTip, PrimaryButton },
     setup() {
       return { args };
     },
     template: `<div style="min-height:60px;">
       <tool-tip v-bind="args">
-        <button>Hover me</button>
+        <primary-button>Hover me</primary-button>
         <template #content>{{ args.content }}</template>
       </tool-tip>
     </div>`,
@@ -38,7 +38,7 @@ export const Standard: Story = {
   parameters: {
     docs: {
       source: {
-        code: '<tool-tip>\n  <button>Hover me</button>\n  <template #content>Primary</template>\n</tool-tip>',
+        code: '<tool-tip>\n  <primary-button>Hover me</primary-button>\n  <template #content>Primary</template>\n</tool-tip>',
       },
     },
   },
@@ -46,18 +46,18 @@ export const Standard: Story = {
 
 export const Position: Story = {
   render: () => ({
-    components: { ToolTip },
+    components: { ToolTip, PrimaryButton },
     template: `<div style="display:flex;gap:2rem;padding:3rem;">
-      <tool-tip position="pos-top"><button>Top</button><template #content>Appears above</template></tool-tip>
-      <tool-tip position="pos-left"><button>Left</button><template #content>Appears to the left</template></tool-tip>
-      <tool-tip position="pos-bottom"><button>Bottom</button><template #content>Appears below</template></tool-tip>
-      <tool-tip position="pos-right"><button>Right</button><template #content>Appears to the right</template></tool-tip>
+      <tool-tip position="pos-top"><primary-button>Top</primary-button><template #content>Appears above</template></tool-tip>
+      <tool-tip position="pos-left"><primary-button>Left</primary-button><template #content>Appears to the left</template></tool-tip>
+      <tool-tip position="pos-bottom"><primary-button>Bottom</primary-button><template #content>Appears below</template></tool-tip>
+      <tool-tip position="pos-right"><primary-button>Right</primary-button><template #content>Appears to the right</template></tool-tip>
     </div>`,
   }),
   parameters: {
     docs: {
       source: {
-        code: '<tool-tip position="pos-top"><button>Top</button><template #content>Appears above</template></tool-tip>\n<tool-tip position="pos-left"><button>Left</button><template #content>Appears to the left</template></tool-tip>\n<tool-tip position="pos-bottom"><button>Bottom</button><template #content>Appears below</template></tool-tip>\n<tool-tip position="pos-right"><button>Right</button><template #content>Appears to the right</template></tool-tip>',
+        code: '<tool-tip position="pos-top"><primary-button>Top</primary-button><template #content>Appears above</template></tool-tip>\n<tool-tip position="pos-left"><primary-button>Left</primary-button><template #content>Appears to the left</template></tool-tip>\n<tool-tip position="pos-bottom"><primary-button>Bottom</primary-button><template #content>Appears below</template></tool-tip>\n<tool-tip position="pos-right"><primary-button>Right</primary-button><template #content>Appears to the right</template></tool-tip>',
       },
     },
   },
@@ -65,28 +65,28 @@ export const Position: Story = {
 
 export const NoBeak: Story = {
   render: () => ({
-    components: { ToolTip },
+    components: { ToolTip, PrimaryButton },
     template: `<div style="display:flex;gap:2rem;padding:3rem;">
-      <tool-tip position="pos-top" :beak="false"><button>Top</button><template #content>Appears above</template></tool-tip>
-      <tool-tip position="pos-left" :beak="false"><button>Left</button><template #content>Appears to the left</template></tool-tip>
-      <tool-tip position="pos-bottom" :beak="false"><button>Bottom</button><template #content>Appears below</template></tool-tip>
-      <tool-tip position="pos-right" :beak="false"><button>Right</button><template #content>Appears to the right</template></tool-tip>
+      <tool-tip position="pos-top" :beak="false"><primary-button>Top</primary-button><template #content>Appears above</template></tool-tip>
+      <tool-tip position="pos-left" :beak="false"><primary-button>Left</primary-button><template #content>Appears to the left</template></tool-tip>
+      <tool-tip position="pos-bottom" :beak="false"><primary-button>Bottom</primary-button><template #content>Appears below</template></tool-tip>
+      <tool-tip position="pos-right" :beak="false"><primary-button>Right</primary-button><template #content>Appears to the right</template></tool-tip>
     </div>`,
   }),
   parameters: {
     docs: {
       source: {
-        code: '<tool-tip position="pos-top" :beak="false"><button>Top</button><template #content>Appears above</template></tool-tip>\n<tool-tip position="pos-left" :beak="false"><button>Left</button><template #content>Appears to the left</template></tool-tip>\n<tool-tip position="pos-bottom" :beak="false"><button>Bottom</button><template #content>Appears below</template></tool-tip>\n<tool-tip position="pos-right" :beak="false"><button>Right</button><template #content>Appears to the right</template></tool-tip>',
+        code: '<tool-tip position="pos-top" :beak="false"><primary-button>Top</primary-button><template #content>Appears above</template></tool-tip>\n<tool-tip position="pos-left" :beak="false"><primary-button>Left</primary-button><template #content>Appears to the left</template></tool-tip>\n<tool-tip position="pos-bottom" :beak="false"><primary-button>Bottom</primary-button><template #content>Appears below</template></tool-tip>\n<tool-tip position="pos-right" :beak="false"><primary-button>Right</primary-button><template #content>Appears to the right</template></tool-tip>',
       },
     },
   },
 };
 
-export const Context: Story = {
+export const AlwaysVisible: Story = {
   render: () => ({
     components: { ToolTip, PrimaryButton },
-    template: `<div style="padding-bottom:3rem;">
-      <tool-tip>
+    template: `<div style="padding-top:3rem;">
+      <tool-tip visible position="pos-top">
         <primary-button>
           Copy the booking link
         </primary-button>
@@ -99,7 +99,7 @@ export const Context: Story = {
   parameters: {
     docs: {
       source: {
-        code: '<tool-tip>\n  <primary-button>\n    Copy the booking link\n  </primary-button>\n  <template #content>\n    This button copies to clipboard\n  </template>\n</tool-tip>',
+        code: '<tool-tip visible position="pos-top">\n  <primary-button>\n    Copy the booking link\n  </primary-button>\n  <template #content>\n    This button copies to clipboard\n  </template>\n</tool-tip>',
       },
     },
   },

From 180b2de4ca2c91aad25a5a1f92ef5cdf177b8b34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Fri, 25 Sep 2026 10:18:11 +0200
Subject: [PATCH 6/9] =?UTF-8?q?=F0=9F=A7=B9=20Remove=20tooltip=20support?=
 =?UTF-8?q?=20from=20BaseButton?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BaseButton.stories.ts | 35 -------------------------
 src/components/BaseButton.vue        | 31 ----------------------
 test/components/BaseButton.test.js   | 39 ++++++++++------------------
 3 files changed, 13 insertions(+), 92 deletions(-)

diff --git a/src/components/BaseButton.stories.ts b/src/components/BaseButton.stories.ts
index ec87b2b..8d113f3 100644
--- a/src/components/BaseButton.stories.ts
+++ b/src/components/BaseButton.stories.ts
@@ -20,17 +20,14 @@ const meta: Meta<typeof BaseButton> = {
     size: { control: 'select', options: ['regular', 'small'] },
     variant: { control: 'select', options: ['filled', 'outline'] },
     type: { control: 'select', options: ['primary', 'brand', 'danger', 'link'] },
-    tooltip: { control: 'text' },
     disabled: { control: 'boolean' },
   },
   args: {
-    tooltip: '',
     // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
     /* @ts-ignore */
     onClick: fn(),
     default: 'Click me!',
     disabled: false,
-    forceTooltip: false,
   },
 };
 
@@ -266,35 +263,3 @@ export const IconOnly: Story = {
     },
   },
 };
-
-export const WithTooltip: Story = {
-  render: (args) => ({
-    components: { PrimaryButton, LinkButton, IconButton, RefreshIcon },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div style="display:flex;gap:2rem;align-items:center;margin-top:3rem;">
-        <primary-button tooltip="Reload everything">
-          Refresh
-        </primary-button>
-        <icon-button tooltip="Refresh">
-          <refresh-icon />
-        </icon-button>
-        <primary-button tooltip="Forced tooltip on a primary button" force-tooltip>
-          Refresh
-        </primary-button>
-        <link-button href="https://mozilla.org" tooltip="Tooltip on a link button">
-          Refresh
-        </link-button>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: '<primary-button tooltip="Reload everything">Refresh</primary-button>\n<icon-button tooltip="Refresh"><refresh-icon /></icon-button>\n<primary-button tooltip="Forced tooltip" force-tooltip>Refresh</primary-button>',
-      },
-    },
-  },
-};
diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index d510945..fb56cab 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { TooltipPosition } from '@/definitions';
-import ToolTip from '@/components/ToolTip.vue';
-
 // component properties
 interface Props {
   type?: 'primary' | 'brand' | 'danger' | 'link';
@@ -11,8 +8,6 @@ interface Props {
    * Transform the button into an anchor tag. If null then the component will be rendered as a button tag.
    */
   href?: string;
-  tooltip?: string;
-  forceTooltip?: boolean;
   formAction?: 'none' | 'submit' | 'reset';
   dataTestid?: string;
   disabled?: boolean;
@@ -21,7 +16,6 @@ withDefaults(defineProps<Props>(), {
   type: 'primary',
   size: 'default',
   variant: 'filled',
-  forceTooltip: false,
   formAction: 'none',
   dataTestid: 'button',
   disabled: false,
@@ -29,32 +23,7 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <tool-tip v-if="tooltip" :position="TooltipPosition.Top" :visible="forceTooltip || undefined">
-    <template #default>
-      <component
-        :is="href ? 'a' : 'button'"
-        :href="href"
-        class="base"
-        :class="{ [type]: type, small: size === 'small', [variant]: variant }"
-        :type="formAction === 'none' ? 'button' : formAction"
-        :data-testid="dataTestid"
-        :disabled="disabled"
-      >
-        <span class="icon" v-if="$slots?.iconLeft">
-          <slot name="iconLeft" />
-        </span>
-        <span class="text">
-          <slot />
-        </span>
-        <span class="icon" v-if="$slots?.iconRight">
-          <slot name="iconRight" />
-        </span>
-      </component>
-    </template>
-    <template #content>{{ tooltip }}</template>
-  </tool-tip>
   <component
-    v-else
     :is="href ? 'a' : 'button'"
     :href="href"
     class="base"
diff --git a/test/components/BaseButton.test.js b/test/components/BaseButton.test.js
index b224b13..b14a4c0 100644
--- a/test/components/BaseButton.test.js
+++ b/test/components/BaseButton.test.js
@@ -13,27 +13,25 @@ describe('BaseButton', () => {
     // build out test cases for variants/options
     const testCases = [
       { type: type, size: 'default', variant: 'filled', iconLeft: false, iconRight: false, formAction: 'none',
-        forceToolTip: false, disabled: false, href: null, text: `${type} button` },
+        disabled: false, href: null, text: `${type} button` },
       { type: type, size: 'default', variant: 'filled', iconLeft: true, iconRight: false, formAction: 'none',
-        forceToolTip: false, disabled: false, href: null, text: `${type} button with icon left` },
+        disabled: false, href: null, text: `${type} button with icon left` },
       { type: type, size: 'default', variant: 'filled', iconLeft: false, iconRight: true, formAction: 'none',
-        forceToolTip: false, disabled: false, href: null, text: `${type} button with icon right` },
+        disabled: false, href: null, text: `${type} button with icon right` },
       { type: type, size: 'default', variant: 'filled', iconLeft: true, iconRight: true, formAction: 'none',
-        forceToolTip: false, disabled: false, href: null, text: `${type} button with icon left and right` },
+        disabled: false, href: null, text: `${type} button with icon left and right` },
       { type: type, size: 'small', variant: 'filled', iconLeft: false, iconRight: false, formAction: 'none',
-        forceToolTip: false, disabled: false, href: null, text: `small ${type} button` },
+        disabled: false, href: null, text: `small ${type} button` },
       { type: type, size: 'default', variant: 'outline', iconLeft: false, iconRight: false, formAction: 'none',
-        forceToolTip: false, disabled: false, href: null, text: `${type} outlined` },
+        disabled: false, href: null, text: `${type} outlined` },
       { type: type, size: 'default', variant: 'filled', iconLeft: false, iconRight: false, formAction: 'none',
-        forceToolTip: true, disabled: false, href: null, text: `${type} forced tt` },
-      { type: type, size: 'default', variant: 'filled', iconLeft: false, iconRight: false, formAction: 'none',
-        forceToolTip: false, disabled: false, href: 'http://tb.pro', text: `${type} HREF` },
+        disabled: false, href: 'http://tb.pro', text: `${type} HREF` },
       { type: type, size: 'default', variant: 'filled', iconLeft: false, iconRight: false, formAction: 'submit',
-        forceToolTip: false, disabled: false, href: null, text: `${type} submit` },
+        disabled: false, href: null, text: `${type} submit` },
       { type: type, size: 'default', variant: 'filled', iconLeft: false, iconRight: false, formAction: 'reset',
-        forceToolTip: false, disabled: false, href: null, text: `${type} reset` },
+        disabled: false, href: null, text: `${type} reset` },
       { type: type, size: 'default', variant: 'filled', iconLeft: false, iconRight: false, formAction: 'none',
-        forceToolTip: false, disabled: true, href: null, text: `${type} disabled` },
+        disabled: true, href: null, text: `${type} disabled` },
     ];
 
     afterEach(() => {
@@ -41,14 +39,12 @@ describe('BaseButton', () => {
     });
 
     it.each(testCases)('$type button renders correctly with the given options',
-      async ({ type, size, variant, iconLeft, iconRight, formAction, forceToolTip, disabled, href, text }) => {
+      async ({ type, size, variant, iconLeft, iconRight, formAction, disabled, href, text }) => {
       const ourProps = {
         type: type,
         size: size,
         variant: variant,
         formAction: formAction,
-        tooltip: 'Button tooltip!',
-        forceTooltip: forceToolTip,
         disabled: disabled,
         href: type == 'link'? 'http://tb.pro' : href, // we want our link type buttons to always have an href
         dataTestid: `${type}-data-test-id`,
@@ -66,7 +62,6 @@ describe('BaseButton', () => {
       }
 
       const btnSelector = `[data-testid=${ourProps['dataTestid']}]`;
-      const tooltipSelector = `[data-testid=tool-tip]`;
 
       wrapper = mount(BaseButton, {
         propsData: ourProps,
@@ -79,8 +74,7 @@ describe('BaseButton', () => {
       expect(btn.isVisible()).toBe(true);
       expect(btn.attributes().class).toContain(ourProps['type']);
       expect(btn.attributes().class).toContain(ourProps['variant']);
-      expect(btn.text()).toBe(text); // tooltip now lives outside the button, so btn text is just its own label
-      expect(wrapper.find(tooltipSelector).text()).toBe(ourProps['tooltip']);
+      expect(btn.text()).toBe(text);
 
       // icon displayed or not depending on option
       if (iconLeft || iconRight) {
@@ -96,11 +90,6 @@ describe('BaseButton', () => {
         expect(btn.attributes().type).toBe(ourProps['formAction']);
       }
 
-      // force tooltip causes tooltip to display even when not hovering over button
-      if (forceToolTip) {
-        expect(wrapper.find(tooltipSelector).classes()).toContain('force-visible');
-      }
-
       // providing href turns button into an anchor tag
       if (href) {
         expect(btn.attributes().href).toBe(ourProps['href']);
@@ -108,14 +97,12 @@ describe('BaseButton', () => {
     });
 
     it.each(testCases)('able to click $type button with the given options',
-      async ({ type, size, variant, formAction, forceToolTip, disabled, href, text }) => {
+      async ({ type, size, variant, formAction, disabled, href, text }) => {
       const ourProps = {
         type: type,
         size: size,
         variant: variant,
         formAction: formAction,
-        tooltip: 'Button tooltip!',
-        forceTooltip: forceToolTip,
         disabled: disabled,
         href: type == 'link'? 'http://tb.pro' : href, // we want our link type buttons to always have an href
         dataTestid: `${type}-data-test-id`,

From ed362c666661c0546f2c3739eeaff50bb7ed540f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Fri, 25 Sep 2026 10:19:10 +0200
Subject: [PATCH 7/9] =?UTF-8?q?=F0=9F=94=A8=20Migrate=20CopyToClipboard=20?=
 =?UTF-8?q?to=20explicit=20ToolTip=20use?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/patterns/CopyToClipboard.vue | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/patterns/CopyToClipboard.vue b/src/patterns/CopyToClipboard.vue
index e57b186..a324a25 100644
--- a/src/patterns/CopyToClipboard.vue
+++ b/src/patterns/CopyToClipboard.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { t } from '@/composable/i18n';
+import { TooltipPosition } from '@/definitions';
 import CopyIcon from '@/foundation/CopyIcon.vue';
 import LinkButton from '@/components/LinkButton.vue';
+import ToolTip from '@/components/ToolTip.vue';
 
 type BaseProps = {
   dataTestid?: string;
@@ -54,19 +56,16 @@ const copyLink = async () => {
 </script>
 
 <template>
-  <link-button
-    :data-testid="dataTestid"
-    :class="{ iconOnly: iconOnly }"
-    @click="copyLink"
-    :tooltip="myLinkTooltip"
-    :force-tooltip="myLinkShow"
-  >
-    <template #iconLeft>
-      <copy-icon />
-    </template>
+  <tool-tip :position="TooltipPosition.Top" :visible="myLinkShow || undefined">
+    <link-button :data-testid="dataTestid" :class="{ iconOnly: iconOnly }" @click="copyLink">
+      <template #iconLeft>
+        <copy-icon />
+      </template>
 
-    {{ !iconOnly ? displayText : '' }}
-  </link-button>
+      {{ !iconOnly ? displayText : '' }}
+    </link-button>
+    <template #content>{{ myLinkTooltip }}</template>
+  </tool-tip>
 </template>
 
 <style scoped>

From 3e12c7d3be0df6bd346df90fe97118e63a1e38cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Fri, 25 Sep 2026 10:25:13 +0200
Subject: [PATCH 8/9] =?UTF-8?q?=F0=9F=94=A8=20Respect=20reduced=20motion?=
 =?UTF-8?q?=20user=20preference?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ToolTip.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/ToolTip.vue b/src/components/ToolTip.vue
index 649d8c5..ebe616a 100644
--- a/src/components/ToolTip.vue
+++ b/src/components/ToolTip.vue
@@ -68,7 +68,6 @@ const tooltipId = useId();
     0px 0px 2px 0px rgba(0, 0, 0, 0.12);
   opacity: 0;
   pointer-events: none;
-  transition: opacity 250ms ease-out;
 }
 
 .tooltip-body {
@@ -152,4 +151,10 @@ const tooltipId = useId();
   opacity: 0 !important;
   pointer-events: none !important;
 }
+
+@media (prefers-reduced-motion: no-preference) {
+  .tooltip {
+    transition: opacity 250ms ease-out;
+  }
+}
 </style>

From c861c0bd15fb4f37a82f2d32aef50bd35630cedf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Fri, 25 Sep 2026 13:08:13 +0200
Subject: [PATCH 9/9] =?UTF-8?q?=F0=9F=94=A8=20Fix=20visibility=20handling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ToolTip.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/ToolTip.vue b/src/components/ToolTip.vue
index ebe616a..ad8282a 100644
--- a/src/components/ToolTip.vue
+++ b/src/components/ToolTip.vue
@@ -67,6 +67,7 @@ const tooltipId = useId();
     0px 4px 8px 0px rgba(0, 0, 0, 0.14),
     0px 0px 2px 0px rgba(0, 0, 0, 0.12);
   opacity: 0;
+  visibility: hidden;
   pointer-events: none;
 }
 
@@ -143,18 +144,30 @@ const tooltipId = useId();
 .tooltip-anchor:focus-within .tooltip,
 .tooltip.force-visible {
   opacity: 1;
+  visibility: visible;
   pointer-events: auto;
   z-index: 110;
 }
 
 .tooltip.force-hidden {
   opacity: 0 !important;
+  visibility: hidden !important;
   pointer-events: none !important;
 }
 
 @media (prefers-reduced-motion: no-preference) {
   .tooltip {
-    transition: opacity 250ms ease-out;
+    transition:
+      opacity 250ms ease-out,
+      visibility 0s linear 250ms; /* Delay hiding until the fade-out finishes */
+  }
+
+  .tooltip-anchor:hover .tooltip,
+  .tooltip-anchor:focus-within .tooltip,
+  .tooltip.force-visible {
+    transition:
+      opacity 250ms ease-out,
+      visibility 0s linear 0s;
   }
 }
 </style>