@mozaic-ds/vue/src/components/tooltip/MTooltip.stories.ts

Mozaic-Vue is the Vue.js implementation of ADEO Design system

import type { Meta, StoryObj } from '@storybook/vue3-vite';
import MTooltip from './MTooltip.vue';

const meta: Meta<typeof MTooltip> = {
  title: 'Overlay/Tooltip',
  component: MTooltip,
  parameters: {
    docs: {
      description: {
        component:
          'A tooltip is a small, contextual message that appears when users hover over, focus on, or tap an element, providing additional information or guidance without cluttering the interface. Tooltips are commonly used to explain icons, abbreviations, or complex actions. They typically disappear automatically when the user moves away from the trigger element.',
      },
    },
  },
  args: {
    id: 'tooltipId',
    text: 'Keep the tooltip text concise.',
    default: 'Tooltip on the top',
  },
  render: (args) => ({
    components: { MTooltip },
    setup() {
      return { args };
    },
    template: `
      <MTooltip v-bind="args">
        ${args.default}
      </MTooltip>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MTooltip>;

export const Default: Story = {};

export const Pointer: Story = {
  args: {
    pointer: false
  }
};

export const Right: Story = {
  args: {
    position: 'right'
  }
};

export const Left: Story = {
  args: {
    position: 'left'
  }
};

export const Bottom: Story = {
  args: {
    position: 'bottom'
  }
};