@dcrackel/meyersquaredui/src/stories/Molecules/ToolTip/ToolTip.stories.js

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

import Tooltip from './Tooltip.vue';


export default {
    title: 'Molecules/Tooltip/Tooltip',
    component: Tooltip,
    argTypes: {
        text: { control: 'text', description: 'The text shown inside the tooltip.' },
        position: {
            control: {
                type: 'select',
                options: ['top', 'bottom', 'left', 'right'],
            },
            description: 'Position of the tooltip relative to the element.',
        },
    },
};

const Template = (args) => ({
    components: { Tooltip },
    setup() {
        return { args };
    },
    template: `
    <div class="flex flex-col items-center space-y-8 p-8">
      <Tooltip v-bind="args">
        Hover over me!
      </Tooltip>
    </div>
  `,
});

export const Default = Template.bind({});
Default.args = {
    text: 'This is a tooltip!',
    position: 'top',
};

export const BottomTooltip = Template.bind({});
BottomTooltip.args = {
    text: 'Tooltip on the bottom!',
    position: 'bottom',
};

export const LeftTooltip = Template.bind({});
LeftTooltip.args = {
    text: 'Tooltip on the left!',
    position: 'left',
};

export const RightTooltip = Template.bind({});
RightTooltip.args = {
    text: 'Tooltip on the right!',
    position: 'right',
};