diff --git a/src/Tooltip/Tooltip.stories.tsx b/src/Tooltip/Tooltip.stories.tsx
index aef5aa51..7b860d64 100644
--- a/src/Tooltip/Tooltip.stories.tsx
+++ b/src/Tooltip/Tooltip.stories.tsx
@@ -9,7 +9,7 @@ export default {
   component: Tooltip,
 } as Meta
 
-export const Default: Story<TooltipProps> = (args) => {
+const Template: Story<TooltipProps> = (args) => {
   return (
     <div className='my-6'>
       <Tooltip {...args}>
@@ -18,6 +18,123 @@ export const Default: Story<TooltipProps> = (args) => {
     </div>
   )
 }
+
+export const Default = Template.bind({})
 Default.args = {
   message: 'hello',
 }
+
+export const ForceOpen = Template.bind({})
+ForceOpen.args = {
+  message: 'hello',
+  open: true,
+}
+
+export const Bottom = Template.bind({})
+Bottom.args = {
+  message: 'hello',
+  open: true,
+  position: 'bottom'
+}
+
+export const Left = Template.bind({})
+Left.args = {
+  message: 'hello',
+  open: true,
+  position: 'left'
+}
+
+export const Right = Template.bind({})
+Right.args = {
+  message: 'hello',
+  open: true,
+  position: 'right'
+}
+
+export const Colors: Story<TooltipProps> = (args) => {
+  return (
+    <div className='flex gap-2 mt-6'>
+      <Tooltip
+        {...args}
+        color='primary'
+        message='primary'
+      >
+        <Button color='primary'>
+          Primary
+        </Button>
+      </Tooltip>
+
+      <Tooltip
+        {...args}
+        color='secondary'
+        message='secondary'
+      >
+        <Button color='secondary'>
+          Secondary
+        </Button>
+      </Tooltip>
+
+      <Tooltip
+        {...args}
+        color='accent'
+        message='accent'
+      >
+        <Button color='accent'>
+          Accent
+        </Button>
+      </Tooltip>
+    </div>
+  )
+}
+Colors.args = {
+  open: true,
+}
+
+export const Statuses: Story<TooltipProps> = (args) => {
+  return (
+    <div className='flex gap-2 mt-6'>
+      <Tooltip
+        {...args}
+        color='info'
+        message='info'
+      >
+        <Button color='info'>
+          Info
+        </Button>
+      </Tooltip>
+
+      <Tooltip
+        {...args}
+        color='success'
+        message='success'
+      >
+        <Button color='success'>
+          Success
+        </Button>
+      </Tooltip>
+
+      <Tooltip
+        {...args}
+        color='warning'
+        message='warning'
+      >
+        <Button color='warning'>
+          Warning
+        </Button>
+      </Tooltip>
+
+      <Tooltip
+        {...args}
+        color='error'
+        message='error'
+      >
+        <Button color='error'>
+          Error
+        </Button>
+      </Tooltip>
+    </div>
+  )
+}
+Statuses.args = {
+  open: true,
+}