import React from 'react'
import { Meta } from '@storybook/react/types-6-0'
import { Story } from '@storybook/react'
import { Tooltip,TooltipProps } from './Tooltip'

export default {
  title:'Components/Tooltip',
  component: Tooltip,
  argTypes: {},
} as Meta

const Template: Story<TooltipProps> = (args) => <Tooltip {...args}/>

export const Left = Template.bind({})
Left.args = { 
  content:'You don\'t have permission for this', 
  children:<span>hello</span>,
  direction:'left' 
}

export const Right = Template.bind({})
Right.args = { 
  content:'You don\'t have permission for this', 
  children:<span>hello</span>,
  direction:'right' 
}

export const Top = Template.bind({})
Top.args = { 
  content:'You don\'t have permission for this', 
  children:<span>hello</span>,
  direction:'top' 
}

export const Bottom = Template.bind({})
Bottom.args = { 
  content:'You don\'t have permission for this', 
  children:<span>hello</span>,
  direction:'bottom' 
}