Restructure ToolTip component

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>',
-      },
-    },
-  },
-};

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,
@@ -47,15 +41,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 +61,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;

src/components/ToolTip.stories.ts

@@ -11,69 +11,95 @@ 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',
   },
 };
 
 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, PrimaryButton },
+    setup() {
+      return { args };
+    },
+    template: `<div style="min-height:60px;">
+      <tool-tip v-bind="args">
+        <primary-button>Hover me</primary-button>
+        <template #content>{{ args.content }}</template>
+      </tool-tip>
+    </div>`,
+  }),
   parameters: {
     docs: {
       source: {
-        code: '<tool-tip>Primary</tool-tip>',
+        code: '<tool-tip>\n  <primary-button>Hover me</primary-button>\n  <template #content>Primary</template>\n</tool-tip>',
       },
     },
   },
 };
 
 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>
+    components: { ToolTip, PrimaryButton },
+    template: `<div style="display:flex;gap:2rem;padding:3rem;">
+      <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"><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>',
+      },
+    },
+  },
+};
+
+export const NoBeak: Story = {
+  render: () => ({
+    components: { ToolTip, PrimaryButton },
+    template: `<div style="display:flex;gap:2rem;padding:3rem;">
+      <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">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"><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="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-top:3rem;">
+      <tool-tip visible position="pos-top">
+        <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 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>',
       },
     },
   },