import Builder, { toProps } from "../../utils/builder";
export default {
    title: 'Components/Tooltip',
    argTypes: {
        align: {
            options: ['auto', 'top', 'bottom', 'right', 'left'],
            control: {
                type: 'radio',
            },
        },
    },
};
const Template = new Builder(args => `<div class="d-flex justify-content-center align-items-center vh-100" style="margin: -1rem;">
	<x-tooltip ${toProps(args)}>
		<x-button color="primary">Please hover</x-button>
	</x-tooltip>
</div>`);
export const Auto = Template.args({
    align: 'auto',
    content: 'Testing tooltip',
}).build();
export const Top = Template.args({
    align: 'top',
    content: 'Testing tooltip',
}).build();
export const Right = Template.args({
    align: 'right',
    content: 'Testing tooltip',
}).build();
export const Bottom = Template.args({
    align: 'bottom',
    content: 'Testing tooltip',
}).build();
export const Left = Template.args({
    align: 'left',
    content: 'Testing tooltip',
}).build();
